Your fonts look awful in Chrome. Here’s the fix. 8 CommentsUncategorized

font-featured

No offense, but your fonts look like junk.

You might not notice it at first, but sometimes when you translate fonts from photoshop, even with same type and thickness, they just don’t look the same.

Sometimes fonts look fuzzy and extra thick, and it’s especially obnoxious on custom, thin webfonts.

Don’t Panic! We can work around it.

Thankfully, this only shows up in Chrome on OS X, and there’s an easy fix!*

(*Yes, this is a fix. It restores consistency across browsers, matches what you see on google web fonts and other typography libraries, and delivers what designers expect when they use these same fonts & weights in photoshop.)

Seriously. Here’s the default. This line is a fuzzy thick mess.

The fix:

-webkit-font-smoothing:antialiased

Just set that CSS property on any element you want to fix the fonts in. Chrome defaults to “subpixel-antialised” which can look stronger & smoother on some LCD displays with black text on white. Unfortunately, it’s too thick and fuzzy when you’re using light text on a dark background, and it doesn’t match your the OS level font rendering on your machine.

Let’s look at some examples. Note that none of these are intended to be bold.

Thin & Pretty
Fat & Fuzzy

Helvetica:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Ribeye:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Londrina:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Josefin:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Source Code Pro:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Titillium:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Dawning:

Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.
Lazy jack jumped over the fox to catch the dog because it was being an evil queen or something.

Credit is due to
This stackoverflow question

You may also want to read some other discussions on the topic at
Maxvoltar.com
and
UsabilityPost’s
“stop fixing font smoothing” post, which I heartily disagree with, based on the arguments above.

8 Responses to “Your fonts look awful in Chrome. Here’s the fix.”

  1. Stephen

    They render exactly the same for me in chrome 23. I even checked screenshots and the pixels are exactly the same.

    Reply
  2. DmitryF

    Hey Eric. I wrote the UsabilityPost article and I did actually mention that on OS X light fonts look terrible on dark backgrounds and that the antialiasing mode comes in handy there. I agree that for the most part that the text in your examples looks better with subpixel-rendering turned off (though Josefin and Dawning may be a touch on the thin side). However, in the case of dark text on light backgrounds, the rendering modes yield very different results, and it is for those cases that I recommended avoiding antialiasing and sticking with subpixel-rendering.

    Reply
    • Mike

      Actually, yes they do. Thats one of the goals at least, and blurry fonts are dev’s nightmare….

      You can stick to your buffy typography, I’ll stick to consistency cross-browser and cross-OS :)

      Reply
  3. Dan

    Looks identical in Chrome 23 on Ubuntu 12.10, but noticed font rendering is excellent on ubuntu anyway.

    Reply

Leave a Reply