Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 matters. Here is some screenshot.

Firefox Ubuntu, good:

enter image description here

Firefox WinXP, good:

enter image description here

Chrome WinXP, bad:

enter image description here

IE WinXP, bad:

enter image description here

I can assure that in a page full of text the problem manifests greatly. Why this happen? Any trick to fix the issue?

-- EDIT:

I'd like to clarify what the problem is: in Chrome and IE, if you look closely at the € 500 stats part, you will see spurious pixels making the font really ugly.

share|improve this question
1  
possible duplicate of Making fonts render similarly across browsers –  paulmorriss Dec 22 '11 at 11:13
    
@paulmorriss: This isn't an issue of a variation in font weight/size. This is an AA problem. –  Lèse majesté Dec 22 '11 at 11:21
    
@Lèsemajesté What's AA in this context? –  paulmorriss Dec 22 '11 at 11:34
    
@paulmorriss: Anti-aliasing. The font being used may not have clear-type-specific hinting, so clear-type is doing a poor job of it. Or it may be some other bug in the AA algorithms used by XP that Firefox circumvents but IE and Chrome do not. –  Lèse majesté Dec 22 '11 at 11:38
    
Good point. I can't withdraw my close vote, maybe a moderator can. Do you want to make your comment the answer? I think the bottom line is though - browsers render fonts differently and you can't do much about it. –  paulmorriss Dec 22 '11 at 11:41
show 1 more comment

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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:

  1. Disabled (fonts are really awful)
  2. Standard (better but still not acceptable)
  3. 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?

share|improve this answer
1  
P.S. and the reason that makes Firefox rendering always good is that it overrides OS settings forcing the ClearType method (just a guess). –  Guandalino Dec 22 '11 at 16:00
    
PS: The listed "available settings" applies only to Windows XP. Every other OS including Windows 7, for example, have different settings — either more or less inclusive of this list. –  Mufasa Feb 6 '12 at 21:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.