Your fonts look awful in Chrome. Here’s the fix. 7 Comments — Uncategorized
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:
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.
Helvetica:
Ribeye:
Londrina:
Josefin:
Source Code Pro:
Titillium:
Dawning:
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.
Bobby
Thank you! BTW… Your comment form tabs to the submit button before the comment text field on Chrome using OS X.
Stephen
They render exactly the same for me in chrome 23. I even checked screenshots and the pixels are exactly the same.
nXqd
hmm, it should focus to the comment first
btw, nice post
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.
Jesse Donat
You shouldn’t be comparing text to Photoshop. Period. It will *never* ever render the same as Photoshop. Text rendering *should be* up to the OS. OS X Chrome renders the way system text renders, it renders the Mac way. Making it render the PC way simply irritates picky Mac Users. We *love* the way Mac renders text, soft and pretty. You are fixing a non-problem.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
JT
I’m not sure I really see a difference on my MBP with retina.
Dan
Looks identical in Chrome 23 on Ubuntu 12.10, but noticed font rendering is excellent on ubuntu anyway.