4 ms·

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

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.

arkitaip 15y ago
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.
- duopixel 15y ago
  Helvetica on Windows is terrible, see https://github.com/paulirish/html5-boilerplate/issues/42 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.
  - cpeterso 15y ago
    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. :(
    - francescolaffi 15y ago
      You could use just `font family: sans-serif` without any font name. Mac will default to Helvetica, Win to Arial
    - famfamfam 15y ago
      Mark Hurrell has blogged some of his testing on Helvetica font stacks (including Neue) at http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack 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;
albedoa 15y ago
Can you provide any further reading about this? I had never heard that the practice was frowned upon.
- duopixel 15y ago
  Here is a comprehensive article on font hinting by Peter Biľak a very respected Typographer: http://www.typotheque.com/articles/hinting 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."
cpeterso 15y ago
> 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.
- tuhin 15y ago
  http://24ways.org/2009/spruce-it-up http://24ways.org/2009/spruce-it-up Also see related ways on how to tackle FOUT.
  - cpeterso 15y ago
    Thanks! Packing the font data into the CSS is a clever idea.
tuhin 15y ago
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.

arkitaip 15y ago

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.

duopixel 15y ago
Helvetica on Windows is terrible, see https://github.com/paulirish/html5-boilerplate/issues/42 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.
- cpeterso 15y ago
  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. :(
  - francescolaffi 15y ago
    You could use just `font family: sans-serif` without any font name. Mac will default to Helvetica, Win to Arial
  - famfamfam 15y ago
    Mark Hurrell has blogged some of his testing on Helvetica font stacks (including Neue) at http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack 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;

albedoa 15y ago

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

duopixel 15y ago
Here is a comprehensive article on font hinting by Peter Biľak a very respected Typographer: http://www.typotheque.com/articles/hinting 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."

cpeterso 15y ago

> 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.

tuhin 15y ago
http://24ways.org/2009/spruce-it-up http://24ways.org/2009/spruce-it-up Also see related ways on how to tackle FOUT.
- cpeterso 15y ago
  Thanks! Packing the font data into the CSS is a clever idea.

tuhin 15y ago

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.