5 ms·

On a side note, what's the story with all these sites using blurry fonts lately? This article is completely illegible in the latest build of Chrome on Windows

On a side note, what's the story with all these sites using blurry fonts lately? This article is completely illegible in the latest build of Chrome on Windows XP. I see this on maybe 5% of the submissions here these days. Normally, it's a sans-serif font that's the culprit, and this is my first serif-blurry sighting. Here's the font-face: garamond-premier-pro-1,garamond-premier-pro-2,serif; I've got photoshop installed, so chances are I actually have one of those local. But Chrome can't render it, so if you use it on your website it will look bad for everybody except you. Now, since I'm in developer tools, I can change that to garamond,garamond-premier-pro-1,garamond-premier-pro-2,serif; ... and it will render in a readable form. So the question, I guess, is why would you specify a non-standard font without testing to ensure that it falls back to something that's at least readable for everybody else? Especially if you're a screen designer by trade, writing articles to show off your knowledge of screen design issues.

Jgrubb 15y ago
It's a [TypeKit](http://typekit.com/ http://typekit.com/) font. Looks great on everything on a Mac, but thanks for the heads up. edit: and I'm definitely not a screen designer, nor am I intending showing off knowledge of any sort of expertise. This was more of a "note to self". Cheers.
- AgentConundrum 15y ago
  Just a heads up: HN doesn't use Markdown, so you can't link URLs like that. You can just type a URL and it'll become a link (shown truncated if its too long). Another popular convention is to use brackets as footnotes[1] and put the URL at the bottom of the comment. [1] Like this.
  - Jgrubb 15y ago
    I've seen the footnote thing plenty. I guess I thought they were auto-generated or something?? Leaving the error for all the world to see. Anyway, thanks...
- mistermustard 15y ago
  On Windows, the only browser that consistently renders Typekit fonts legibly is Safari for Windows, due to its use of Apple's subpixel smoothing. I prefer the Apple style font rendering, which is one of the few compelling reasons to use Safari on Windows.
- dspillett 15y ago
  Windows and MacOS use different techniques when approximating a font to the pixel grid of the screen. The Mac obeys the font, applying smoothing via anti-aliasing along the way, with no extra consideration given to the pixel grid. Windows tries to snap things to the pixel grid. For most "medium" sized text this produces a sharper lighter look. For small text or (in your case) typefaces with light strokes to start with, if tends to make things look too light and a bit blurry instead. These two pages give (respectively) an example of where the difference is clear to see and a description of the different processes: http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html http://www.codinghorror.com/blog/2007/06/whats-wrong-with-ap... http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html http://www.codinghorror.com/blog/2007/06/font-rendering-resp... At higher resolutions Apple's way would definitely be better (you get a result closer to what the font designer indented). For low resolutions (like the 96dots-per-logial-inch Windows usually assumes on screen) the Windows way often produces much clearer text if you are not using font-smoothing in either case. Once you add font-smoothing techniques into the mix (they use slightly different sup-pixel mapping methods) it all gets a bit arbitrary, varying from typeface to typeface (and by size, the sub-pixel differences mean some colours are more affected in certain typefaces, and opinions vary from person to person too) as to which way around looks better. The answer? Aside from just putting up with it (and testing your output on both types of font-renderer if you need/want to use typefaces away from the "standard" set) and arguing about which is technically the better mix of methods, the only real solution is probably to wait for nice high resolution screens that will make it a moot point. Unfortunately they are likely to be a long time coming, scaling the sort of DPI an iPhone4 boasts to 20"+ screens is likely to be much more expensive than the market will bare ATM. lt;dr: MS and Apple render fonts differently. The difference is often not significant, but it is often enough that unless you use the de-facto "standard" set of typefaces you need to test on both systems to ensure your output isn't blurry or otherwise difficult to read on one or the other system.
  - deleted 15y ago
    [deleted]
  - Jgrubb 15y ago
    So would using something natively installed on the machine, like Georgia for instance, solve this problem? Thanks for the lesson, BTW.
ori_b 15y ago
If you're in Firefox, you can disallow pages from choosing their own fonts. Preferences->Content, advanced in the font section, and uncheck the option. Can we pretty please have this by default?
mambodog 15y ago
Your knowledge of web font usage is a bit out of date. @font-face allows use of custom fonts on the web, and works across all browsers[1]. As for your font rendering issues, either you need to turn ClearType on, or turn it off and on again and restart Chrome (it gets stuck sometimes). Or, you know, upgrade from XP. [1] http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax http://www.fontspring.com/blog/the-new-bulletproof-font-face...
kevinpet 15y ago
Indeed. The medium defeats the message, when you're offering web design advice on an unreadable site.

Jgrubb 15y ago

It's a [TypeKit](http://typekit.com/ http://typekit.com/) font. Looks great on everything on a Mac, but thanks for the heads up. edit: and I'm definitely not a screen designer, nor am I intending showing off knowledge of any sort of expertise. This was more of a "note to self". Cheers.

AgentConundrum 15y ago
Just a heads up: HN doesn't use Markdown, so you can't link URLs like that. You can just type a URL and it'll become a link (shown truncated if its too long). Another popular convention is to use brackets as footnotes[1] and put the URL at the bottom of the comment. [1] Like this.
- Jgrubb 15y ago
  I've seen the footnote thing plenty. I guess I thought they were auto-generated or something?? Leaving the error for all the world to see. Anyway, thanks...
mistermustard 15y ago
On Windows, the only browser that consistently renders Typekit fonts legibly is Safari for Windows, due to its use of Apple's subpixel smoothing. I prefer the Apple style font rendering, which is one of the few compelling reasons to use Safari on Windows.
dspillett 15y ago
Windows and MacOS use different techniques when approximating a font to the pixel grid of the screen. The Mac obeys the font, applying smoothing via anti-aliasing along the way, with no extra consideration given to the pixel grid. Windows tries to snap things to the pixel grid. For most "medium" sized text this produces a sharper lighter look. For small text or (in your case) typefaces with light strokes to start with, if tends to make things look too light and a bit blurry instead. These two pages give (respectively) an example of where the difference is clear to see and a description of the different processes: http://www.codinghorror.com/blog/2007/06/whats-wrong-with-apples-font-rendering.html http://www.codinghorror.com/blog/2007/06/whats-wrong-with-ap... http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html http://www.codinghorror.com/blog/2007/06/font-rendering-resp... At higher resolutions Apple's way would definitely be better (you get a result closer to what the font designer indented). For low resolutions (like the 96dots-per-logial-inch Windows usually assumes on screen) the Windows way often produces much clearer text if you are not using font-smoothing in either case. Once you add font-smoothing techniques into the mix (they use slightly different sup-pixel mapping methods) it all gets a bit arbitrary, varying from typeface to typeface (and by size, the sub-pixel differences mean some colours are more affected in certain typefaces, and opinions vary from person to person too) as to which way around looks better. The answer? Aside from just putting up with it (and testing your output on both types of font-renderer if you need/want to use typefaces away from the "standard" set) and arguing about which is technically the better mix of methods, the only real solution is probably to wait for nice high resolution screens that will make it a moot point. Unfortunately they are likely to be a long time coming, scaling the sort of DPI an iPhone4 boasts to 20"+ screens is likely to be much more expensive than the market will bare ATM. lt;dr: MS and Apple render fonts differently. The difference is often not significant, but it is often enough that unless you use the de-facto "standard" set of typefaces you need to test on both systems to ensure your output isn't blurry or otherwise difficult to read on one or the other system.
- deleted 15y ago
  [deleted]
- Jgrubb 15y ago
  So would using something natively installed on the machine, like Georgia for instance, solve this problem? Thanks for the lesson, BTW.

ori_b 15y ago

If you're in Firefox, you can disallow pages from choosing their own fonts. Preferences->Content, advanced in the font section, and uncheck the option. Can we pretty please have this by default?

mambodog 15y ago

Your knowledge of web font usage is a bit out of date. @font-face allows use of custom fonts on the web, and works across all browsers[1]. As for your font rendering issues, either you need to turn ClearType on, or turn it off and on again and restart Chrome (it gets stuck sometimes). Or, you know, upgrade from XP. [1] http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax http://www.fontspring.com/blog/the-new-bulletproof-font-face...

kevinpet 15y ago

Indeed. The medium defeats the message, when you're offering web design advice on an unreadable site.