I'm aware that different Operating systems render fonts using different algorithms. In general, Windows uses ClearType, Apples use AAT and GNU/Linux uses Freetype. This means text doesn't always look the same. The large font serif typefaces suffer the most. For example, Georgia size: 50px.

My Question: If you really want a font to look its' best on a website, is there a solution other than taking a screenshot of the text and using the image instead of the text?

  • Example 1: http://www.timofejew.ca/ looks gorgeous on my Ubuntu machine (FF3.0) - not so much on a Vista machine (IE8 && FF3.0).
  • Example 2 : I really like the typography used on http://www.getfinch.com/work/ - but the logo is a background image. Because, if you tried doing it using HTML/CSS it'd look awful in Windows.

3 answers


You could use SIFR:


Which is 'like' using an image in place of text, but craftier!

There's also a matter of the quality of the font you use. Some fonts render well, no matter the OS/browser. Some, such as expensive font knockoffs look like garbage(I suggest you use neither the knockoff or the original simply because it most likely won't be on the user's machine).

I use Georgia at a large size for h1 headers and it looks great to me. It's actually used a lot on the web for main titles.

Answered almost 8 years ago by tahdhaze09
  • Do you have a example URL of a large size h1 header that looks great? Tom Fotherby almost 8 years ago
  • http://snook.ca/ - doesn't use h1, but header font is 40px. It also uses some type of font/image replacement method. http://webdesignledger.com/ - Another large header at 49px, uses Georgia as primary font. http://www.3point7designs.com/blog/ There was one in particular that used Georgia as an h1 header for the main story of every page - I just wish I could remember the URL... tahdhaze09 almost 8 years ago
  • Thanks very much for the examples. I looked at them in Windows and in Ubuntu. They confirm that I'm just being pedantic. I guess Windows users are used to sucky font rendering and think nothing of it. So now I feel better about my current design for a new client. I don't think I'll bother "fixing" my large h1 Georgia title for Windows. Tom Fotherby almost 8 years ago
  • Yes, you're OK! It's the old IE Complex. Funny, in IE7 that whole font smoothing technique (ClearType) was supposed to make fonts look BETTER. You would be best to turn that off. Then you can see the actual font render, the true typeface. tahdhaze09 almost 8 years ago

You could use Cufon.


Answered almost 8 years ago by Tony Crockford
  • This was great! I'm thinking about using this one. tahdhaze09 almost 8 years ago

For the record - a few weeks after asking this question I found out that the screen resolution of the Windows machine I was testing on was much lower than the Ubuntu machine I was testing on.

Windows: 1280x720 Ubuntu: 1440x900

It goes a long way in explaining the different in font rending quality I was observing. I should have compared like-with-like. However, I still maintain that Windows doesn't render as nice as OSX or Ubuntu.

Answered almost 8 years ago by Tom Fotherby