Hacker News Reader

Comment by duopixel | Hacker News Reader

There's a second problem that's popping up lately: font-face on the body text.

System fonts have been painstakingly hinted to make them more readable on-screen. Most web-embeddable fonts don't have appropriate hinting or are just plain bad choices for body text. Hoefler & Frere Jones (one of the most respected foundries around) haven't released embeddable fonts because they've been working on it for years.

The result is fuzzy text at small/medium text sizes. It's huge pain to read. It seems some designers forget that good typography is concerned with readability too.

View on HN

Some true facts that you might consider before passing that over-generalised statement:

-There are a number of fonts designed specifically for screen reading.

-Some of them happen to be preinstalled on our computers.

-Not all default fonts installed on our computers are meant for screen reading. Not all web safe fonts are either.

-A huge number of web fonts off late have been designed with screen in view. e.g FF Meta, FF Tisa Web Pro and so many others.

-There is nothing wrong with using font-face for body text.

Examples: Every article on trentwalton.com uses font-face (uses Typekit for webfonts) and works great in terms of readability. Please do not mix the poor aliasing on Windows with a problem with web fonts.

Core fonts don't necessarily equal good web typography. Arial, for instance, is pretty mediocre for the web. You could say the same about Helvetica (it is still better designed than Arial).

As for web fonts, Adobe and other foundries have large collections of gorgeous fonts specifically designed for the web.

Helvetica on Windows is terrible, see https://github.com/paulirish/html5-boilerplate/issues/42. This is because Helvetica comes from Linotype instead of Microsoft, and they care more about print than screens.

Arial might not be a good typeface, but as a font it's pretty damn well hinted for screens.

Except for Minion Web and Myriad, I haven't seen a really legible web font from Adobe that is usable at 11-15px. Heck, even Typekit uses Georgia/Arial for long copy.

Because Helvetica looks so bad on Windows, a good compromise for a CSS font stack is something like:

  font-family: "Helvetica Neue",Arial,sans-serif;

Helvetica Neue (a minor reworking of Helvetica from 1983) is a Mac system font, but few Windows PCs have it. So Mac users get nice fonts and everyone else gets Arial.

Many CSS font stacks list Helvetica after Arial, but that is silly because nearly all computers (like 98%) have Arial, so Helvetica will never be selected. :(

You could use just `font family: sans-serif` without any font name. Mac will default to Helvetica, Win to Arial

Mark Hurrell has blogged some of his testing on Helvetica font stacks (including Neue) at http://blog.mhurrell.co.uk/post/2946358183/updating-the-helv... which is worth a read. Current recommendation is to specify sans-serif but with additional specifications for Linux:

  font-family: Helmet, Freesans, sans-serif;

> There's a second problem that's popping up lately: font-face on the body text.

Plus, browsers will flash the body text in the alternate system font (or a blank page) while the font-face file is downloaded from the web server.

http://24ways.org/2009/spruce-it-up

Also see related ways on how to tackle FOUT.

Thanks! Packing the font data into the CSS is a clever idea.

Can you provide any further reading about this? I had never heard that the practice was frowned upon.

Here is a comprehensive article on font hinting by Peter Biľak a very respected Typographer:

http://www.typotheque.com/articles/hinting

"[font-face] also raises new issues, including poor onscreen display of non-hinted fonts. And because hinting is tedious, time-consuming and widely believed to be nearly obsolete, 99% of all fonts, even commercial ones, are non-hinted."

Reply on news.ycombinator.com