Serif Fonts and the Web
Is it just me or do serif fonts look totally different when rendered in Windows compared to in OSX?
I’m trying to build a site using serif fonts (namely Georgia but have been experimenting with Times too) but the character width and/or spacing is different between the platforms, even in the same browser. I’ve never really had this problem with sans-serif fonts.
Annoyingly they seem to render identically at 100% but when using smaller sizes (eg. 0.8em) the difference appear.
What a pain in the butt.
It’s not just serif fonts in my experience.
I think it’s down to the way fonts are drawn on different platforms. Windows XP has (at least) three different mechanisms for rendering type on the screen, and each looks a bit different. Apple takes an entirely different approach (or two) and Linux has it’s own variations on the theme.
There’s also some platform/font-specific hacks built into some of the browsers, because the same fonts can be rendered differently across different operating systems.
Try comparing your page in Safari 3.1 on both MacOS and Windows (both use the same text rendering gubbinses, so they should look much the same). Now throw IE7 into the mix… see what I mean? IE6 will be different again (unless you’ve enabled Cleartype system-wide). I think Firefox uses the font-rendering engine of whichever platform it’s on.
When you dig into it, it’s a miracle anything ever gets output to the screen at all
</geek>
March 19th, 2008 at 11:43 amYep - it is all down to the platform text rendering. It’s a shame you can’t put platform specific hacks in the CSS (at least as far as I know).
You are correct on the Firefox front - looks totally different in OSX compared to Windows. I’ve never really had an issue with sans-serif fonts so I guess the problem is less pronounced. I have resigned myself to doing the “best fit” for all platforms rather than having it look perfect for one and rubbish on another.
Rather annoyingly though it’s always Windows that has to take priority and it’s that one that makes the others look slightly ropey! Damn those majority users!
March 19th, 2008 at 12:01 pmI had the same problem yesterday. Using Georgia or Times on a site. FF (Win) looked cack. IE7 looked nice, as does Safari. Just make sure you always show it to a client on one of those
March 19th, 2008 at 2:25 pmURGH me too!!! I built a site for someone and actually felt embarrassed when they opened it on their windows machine. If fonts were pink I am sure it would all be fine. Solution: Windows needs to be banned.
March 19th, 2008 at 9:43 pm