Thinning Text in Firefox

If your web design uses light text on a dark background, you’ll notice the text looks heavy and blurry. Instead of sporting a crisp look, your site appears a bit beginner.

Steve Smith at Ordered List solved this problem for Safari. However his solution doesn’t work in Firefox — so I came up with this CSS:

@-moz-document url-prefix() {
  body {
    font-weight: 200;
    letter-spacing: 0.3px;
  }
}

The first line targets Firefox, just like an IE conditional comment. The font-weight halves the normal weight of the text, and the letter-spacing gives the font a little breathing space. (Note the body is nested within the @-moz-document selector.)

Mark Boulton describes what’s going on:

When reversing colour out, e.g. white text on black, make sure you increase the leading and tracking, and decrease your font-weight. This applies to all widths of Measure. White text on a black background has a higher contrast to the opposite, so the letter forms need to be wider apart, lighter in weight, and have more space between the lines.

Here are before and after screenshots of Firefox so you can see for yourself:

Before

After

It’s not quite as crisp as Safari but it’s close, and certainly much better than it was.

N.B. I’ve only done this on my main site, not here on this blog. You can see the difference.

Comments

Looks SO much cleaner :-)

Olly • 4 March 2010

This doesn't seem to work for me...does this target a specific version of firefox? Or have to be somewhere in the linked CSS? I'm using FF 3.6.

Matthew • 12 March 2010

Matthew, this works for me on FF 3.6 -- you can see my CSS here. I include it into my HTML with a standard stylesheet link.

Without more information I'm not sure what to suggest.

Andy Stewart • 12 March 2010
Andrew Stewart • 4 March 2010 • •

Got a question or comment? or .