: Font rendering issue I realized there are problems about how fonts are rendered in different browsers/OS for a site I'm working on. I'm using Cantarell from Google Web Fonts, size 16px, it that

@Shelley277

With simple text, you can not guarantee font rendering to be pixel perfect. If you are worried about how the text looks for some users due to rendering artifacts, it should be up to the user at that point to fix their own system. Of course, since we can't rely on them to even know how to do that, let alone bother doing it, if you still wish to ensure pixel perfection you must use an alternative to fonts.

Even the use of modern features like CSS3 @font -face and Canvas rendering can't solve the issue, since they still use different underlying font libraries per OS/browser combination.

You could provide a 'help' page advising users how to change their settings for the more common OS systems/settings, but most users won't bother.

The only viable options are Flash replacement or generating images server-side. Neither is very accessible, and the Flash replacement isn't a solution for some mobile browsers. I would advise against these, though they can work if the pixel-perfection is more important to you than accessibility or availability across devices.

I personally feel that unless it is seriously breaking layout, or is 'unreadable', then don't bother with alternatives. Make it look decent enough for most of your users. The rest will have to deal with artifacts and aliased fonts; and since those users see the exact same font rendering issues on everything else on their system, they won't even notice anyway.

Vote Up Vote Down

@Murray155

I got a clue (kinda). The bad behavior depends on which method is used to smooth edges of screen fonts. If interested in how to access this setting see How do I get ClearType?.

This setting impacts over every aspect of OS rendering, not just in browser. Possible value for this settings are:


Disabled (fonts are really awful)
Standard (better but still not acceptable)
ClearType (looks good)


The problem is that it's not a settings we (web developers) can change easily without user intervention.

I found an interesting article explaining the issue, with a possible fix, but actually it's not that useful because the proposed method just lets discover if some kind of font smoothing is active or not. If it also could distinguish between Standard and ClearType, it'd be possible to add dedicated CSS classes with fallback fonts when needed. But it doesn't.

Any further suggestion?

Vote Up Vote Down