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?

The Breakdown

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.

coffeescript
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.