Making Browsers Play Nice With Thin Fonts
Thin fonts are oh-so-cool nowadays. The thinner, the trendier. But browsers have their own ideas when it comes to rendering font thickness. How to make everyone play nice?
Thin fonts, like Lato 100, will:
- look great on Mac Chrome
- look great on Mac Firefox
- look awful and pixelated on Mac Safari
- look pretty good on iOS Safari
- look too thin on all Windows browers, Chrome included
The Fix That Doesn't Work
If you do a bit of googling, you will find a lot of recommendations for using
-webkit-font-smoothing: antialiased or
-webkit-font-smoothing: subpixel-antialiased to make Safari render the font thicker.
Unfortunately, it barely ever works, and when it does, it makes the font look thick and clunky in Chrome.
Some posts tout using
text-rendering: optimizeLegibility but it hardly ever does a thing.
The Fix That Does Work
Chris Coyier found a great fix from Kevin Ennis:
-webkit-text-stroke. It thickens the font lines nicely in Safari, making it look a lot closer to the way it does in Chrome. Unfortunately, it thickens Chrome's already-fine rendering, screwing it up.
The only workaround is to use browser detection. Yes, I know browser detection is awful and disgusting and Sauron burns babies every time it's used, but sometimes there is just no other way.
jQuery ($) -> $(document).ready -> is_chrome = navigator.userAgent.indexOf('Chrome') > -1 is_explorer = navigator.userAgent.indexOf('MSIE') > -1 is_firefox = navigator.userAgent.indexOf('Firefox') > -1 is_safari = navigator.userAgent.indexOf("Safari") > -1 is_opera = navigator.userAgent.indexOf("Presto") > -1 is_mac = (navigator.userAgent.indexOf('Mac OS') != -1) is_windows = !is_mac if is_chrome && is_safari is_safari=false if is_safari || is_windows $('body').css '-webkit-text-stroke': '0.5px'
This will beef the text renderings only on Safari Mac, Safari Windows, and Chrome Windows. (And I think Firefox Windows too).
What about Internet Explorer? IE doesn't recognize -webkit css, so how do we fix IE's pixelated renderings of thin fonts? Well, yeah, I haven't found a fix just yet. If you have, please let us know in the comments.
Follow David on Twitter
It's what all the cool kids do.