Fonts that render well on any browser

Hey guys.

I'm amateur on type. I've had some problems with type rendering across browsers, searched all over the web for good articles but still nothing.

I don't have time to really study and understand font rendering right now, but I need to find what fonts I can use. Fonts that, even if they display differently across browsers, still look good (not creepy).

1) Can you guys list the fonts you know look good on the popular browsers?
I mean IE8+, Chrome, Safari, Firefox (including mobile versions).
→ Preferrably Google Web Fonts.

2) Do you know a website focused on this issue (crossbrowser type)?

Thanks!!

juancpgo's picture

Ps.: It has to look good both on Windows and Mac also.

hrant's picture

Look here: https://monokrom.no/
The FontFont stuff is also very good that way.

hhp

1996type's picture

Open Sans, Droid Serif on google webfonts
Ubuntu, also on google webfonts

That's about all I can think of in the google library. Beware of free webfonts, only very few actually deliver decent quality.

Aure's picture

This is a HUGE subject and there isn't one answer because webfont rendering depends of multiple things like :

- Caracteristics of the screen itself (luminosity, contrast and of course resolution)
- Font-size (small font size increase type rendering issue on low resolution screens)
- Characters shape specificities (Contrast, Aperture, Counter, x-Height etc.)
- Quality of hinting / kerning
- Operating system text-rendering engine (CoreTxt, DirectWrite, GDI+, Cleartype, GDI etc.)
- Browser text-rendering engine (Webkit, Blink, Gecko etc.)
(note : some browsers rendering overlay the OS rendering)
- Custom User preferences (Anti-aliasing options)

To go deeper, you could take a look to this serie of blog posts on Typekit. It's a bit old (already 3 years now) but still interresting !

So, for body-copy you could try to follow these good practices (there are no rule) :

- Font-size not to small : 13px +
- Comfortable line-height : 1.3 +
- Low-contrast shapes
- Well hinted/kerned typefaces
- Line lenght not too long 60 char. max (or so).

An off course, TEST the rendering in various environments (different OS + Browsers) using either your own material or Virtual Machines (ex. Parallel Desktop) or web solutions (ex. Browserstack). I'm also a huge fan of Typecast which is, in my opinion, the best web service available yet, to build layouts and compare webfonts.

Concerning the choice of Google webfonts I would maybe add Roboto and PT Sans to the other one which have been given before.

I hope it will help you.

--
Note: If you can read the french language, I've written a book on that subject in 2012.

Si_Daniels's picture

Georgia

chrisburton's picture

Webtype, in my opinion, serves the best quality of webfonts. Particularly their RE series.

I would agree with the above on Typecast. Incredible service they've created.

Aure's picture

@chrisburton I didn't know these RE families, I will take a closer look. thx

chrisburton's picture

@Aure, My pleasure. You can read about them here.

Aure's picture

Thanks for the link @Chris.
It reminds me the Screensmart fonts serie of Hoefler.
Looks like despite the arrival of all these shiny new hi-res. display, webfont legibility at small size is still an issue in 2014.

chrisburton's picture

Except that the SS fonts by H&FJ are very much recent where the RE series are not. And I've found ScreenSmart fonts to have more legibility issues than I have with the RE series. Specifically on Windows (of course).

hrant's picture

But how is SS easier for users than RE? (As I thought you were saying on Twitter.)

hhp

Aure's picture

Chris Oh really ? that's interresting. Could you tell me more about that ?
Do you have any detailed results to share or is it just coming from a quick view of a webpage on Win x / IE ?

apankrat's picture

There's just one issue with RE - at 13px Benton Sans RE doesn't look anything like Benton Sans. Otherwise, it's very nice. However SS Whitney is still unmistakably Whitney.

hrant's picture

But WYSIWYG is a succubus to begin with.

hhp

dberlow's picture

"doesn't look anything like Benton Sans"

That's odd. Can you show?

"Whitney is still unmistakably Whitney"

That’s odd... can you tell?

Aure's picture

@Emanual woot ! It's quizz time :)

Richard Fink's picture

On Google Fonts here are some safe picks. Not at all a "best of" list. Just some safe and competently made stuff:

Open Sans
Roboto
Droid Sans
Droid Sans Mono
Droid Serif
Open Sans Condensed
Source Sans Pro
Roboto Condensed
Ubuntu
Ubuntu Condensed
PT Sans Narrow
PT Serif

There are more, certainly.
Fonts like Cabin and Lobster and Arvo see an insane amount of usage. So if you go by the adage "Fifty million Frenchmen can't be wrong", you won't go wrong using those fonts either.
Since Google fonts are free and easy to incorporate into a page, and they arrive fast, the question of which Google Fonts are on a "professional" level is a good one.
It would require defining what is "professional level" for a webfont because much of what's being offered commercially isn't up to snuff IMHO, either.

Here's a link to stats dated 2010:
http://www.google.com/fonts/stats?key=WebFonts2010

Don't know if there's a spreadsheet that's more current.

rich

chrisburton's picture

Do you have any detailed results to share or is it just coming from a quick view of a webpage on Win x / IE ?

You can look around CSS-Tricks which uses Whitney. I no longer have a Windows machine but from the last time I checked, Whitney had some funky looking stray pixel issues.

There's just one issue with RE - at 13px Benton Sans RE doesn't look anything like Benton Sans. Otherwise, it's very nice. However SS Whitney is still unmistakably Whitney.

I'm using Benton Sans RE for my body copy, oddly enough, at 13px. I have seen no issues but as David asked, mind showing what you're referring to?

apankrat's picture

> mind showing what you're referring to?

Certainly. The RE version has noticeably wider glyphs, it looks almost as if it was stretched horizontally. For me this completely destroys its appearance. It's just ... not elegant.

Do you see it?

hrant's picture

It's interesting that the vertical proportions are the same; it looks like each glyph is made about 1 pixel wider in the RE. That does increase legibility (although not necessarily readability) but yes, at what cost? It might be better to "simply" make/offer/recommend a wider cut of that typeface for onscreen use.

hhp

Si_Daniels's picture

The lowercase g in the RE also makes it feel less Benton-esque.

Si

hrant's picture

Oh wow, how did I miss that?
Sorry, that's a deal-breaker. Except if there's an alt in there.

hhp

dberlow's picture

On the question of the Benton RE font, I see the high end of its size spectrum being less useful than the lower end of its size spectrum, where it's best. I'm glad you think Benton Sans elegant, but I'm not sure 13 px is a place to judge such a trait.

The width issue comes to a head, i.e. how wide is the regular weight, when the family is committed to a bold that is to render well unhinted down to 9 px. I felt that these bold styles had to be widened from the print versions for the smallest uses, unlike most web bold styles, and the regular must follow or be too narrow. So if you look at the smart screen companion bold face of Whitney, vs Verdana, or any RE fonts at 9-10 px, you see a bold face you might wish was larger and wider. The carpet only moves, it doesn't stretch.

For the future, we have intermediate plans, but while new low tech solutions are being rattled about, we need to see if these or any better standards will be moving onto the web, allowing more refined optically-sized service of this and other font families.

hrant's picture

One thing that makes Benton Sans relatively elegant (at least at the size shown) is that the descenders are as long as the ascenders. What's interesting is that making the x-height one pixel taller instead would have gone hand-in-hand with the inflated width (as well as making the "g" monocular). But that was not done – possibly for reasons that are not observable without considering "relativity", as you nicely explain WRT the Bold. I wonder though whether making the Regular uncharacteristically wide is worth having a Bold that comes out better at tiny sizes.

hhp

dberlow's picture

"...that making the x-height one pixel taller instead would have gone hand-in-hand..."
Instead?

Both x and y were increased more or less proportionally, and the extenders shrank evenly. Many people not familiar with the proportions of type designs for 6-9 point, have the same crankiness. I'm used to it.

But all that only explores the issues of creepy text rendering. Anyone care take a shot at creepy display type rendering?

hrant's picture

Not cranky. Just chronically malcontent. :-)

Both x and y were increased more or less proportionally

When I looked yesterday I only saw the Y increasing (by very nearly one pixel per glyph). Should I look again?

Beyond a doubt you've looked at way more small type than I have... but every single small type I've seen has seriously shortened descenders – and in general any text type has descenders shorter than ascenders (for very good reason). The fact that Benton Sans (13 px) has descenders equal to ascenders (both in the regular and the RE) gives it more elegance (which I think makes sense in terms of mood and differentiation, especially in the context of so few pixels) but my point was that the RE's extra width –and the mono "g"– go against that (and I myself would prefer seeing a small* sacrifice in the quality of the Bold, and only at very small sizes).

* I'm assuming.

I think the bottom line –and the heart of Alex's complaint– is that Benton Sans RE is looking too much like a "generic" screen font, versus what most designers –who hopefully choose a font based on its mood and not just its readability– expect to be able to convey by bothering to select a specific non-generic (and non-free) typeface.

hhp

dberlow's picture

That's surprising. Considering that Whitney turns out looking near identical to Lucinda grande and Verdana, which are generic, I'd think it was the more generic font.

How well you know him, or these other designer people you mention, may be reflecting on your opinion. We don't have much 'mood' trouble with licensing the gigantic Benton Sans family in general, or the RE versions in particular.

hrant's picture

I'm not comparing Benton Sans RE to Whitney, and I certainly believe it has many qualities that make it a good purchase. But to me the RE cut would have been better without the Y-increase (even if that would mean obstructing a higher-quality Bold at 9–10 px) because people do choose fonts based on "looks" to a great extent – and for good reason.

It might be somewhat instructive –if probably not too actionable– to do a survey.

hhp

apankrat's picture

FWIW, every time I saw Whitney used as a body font on web (back when it was only on kottke.org and a couple of other sites), I couldn't help but pause, open the page source and look at what is this remarkably nice font that they are using. It may, technically, look nearly identical to Lucinda grande or Verdana, but it's not. It has an absolutely different and unique feel to it and in the end this is what matters most when picking a font for the online use. Readability is important, no doubt, but it's secondary.

The issue with the RE version of Benton Sans is that it's so detached from the original in how it looks and feels that it shouldn't even bear the same name. I'm sure it's doing well commercially, but that's really off the point.

dberlow's picture

Fonts with absolutely different and unique feels to them, whether actual or imagined, (at 13 pixels) is not what most readers seek, but it is an interesting fantasy.

apankrat's picture

As is a fantasy of assuming that web surfers are readers (though I think you are starting to venture into the trolling territory).

My only point was that Benton Sans RE doesn't look like Benton Sans.

hrant's picture

Readers don't –or rather shouldn't– consciously select specific fonts to read text in; a great clue to this is one of the few pieces of reliable empirical evidence concerning reading: people choose a size that's a bit too big for comfortable reading. The ideal font selection reinforces the content by "saying" things... without using words. And that's what a designer is for. Although I personally place more value on compromising style for readability than Alex seems to, saying that it's OK to throw away style to get some extra readability* is like saying readers don't need designers...

* And in that case, again: why such long descenders instead of a bigger x-height?

BTW, 13 pix might seem irrelevant on hi-res screens (but then how is a Bold's 9–10 pix relevant?) but what proportion of serious reading is done on such screens?

--

Something else I noticed: if you take away the extra width from the RE, what are you left with? The non-RE... So maybe the extra width helps to sell it (via differentiation). But a better way would've been a larger x-height.

hhp

hrant's picture

BTW, does Benton Sans (non-RE) have an 8-pixel x-height (and 3-pixel extenders) at 14 pix? If so, trim its descenders by one pixel and I think you might end up with a better 13 pix Benton Sans RE.

hhp

PabloImpallari's picture

Kottle is not using it at 13px but at 16px.
And from 13px to 16px there is a world of difference.

hrant's picture

Actually kottke.org is not "hard-coded" – it depends on the viewer. On my end a couple of zoom-outs brought it to 13 pix.

The world of difference: in a way yes, but hopefully they'll still look like they came from the same solar system.

hhp

Syndicate content Syndicate content