If you are on a Mac and using Firefox or Safari to view our blog, you might notice that the font weight here is a bit crisper than the rest of our site. You can also see this difference on some of our sites that use light text on a dark background, like The Renaissance and Camp Roseland. Safari and Firefox (Mac) render default fonts a little bit chunkier and bolder than other browsers and generally bolder than we like in our designs.

Here is the difference in the font weight (on our blog) before and after:

Normal (A Little Thick)

Crisp

Why do the fonts display this way? A good example for Safari is explained on this page, Thin Is Always In. The screenshots show that on a Mac the anti-aliased font comes out thicker. The difference is particularly obvious with white text on a dark background.

So, how do you make your font less bold? Unfortunately, the only real solution is a hack, which may cause other elements in your site to display incorrectly.

For Firefox, the hack to implement is opacity, which means adding to an element the style:

opacity:0.99;

Here are the disclaimers:
If you add the opacity to the body tag, it will affect all text evenly, which is desired, but can also affect elements within the body, increasing their opacity. This may cause background images to display more lightly and appear as a different color. Another solution is to apply the opacity to all text elements in your site (headers, paragraphs, links, etc.). Make sure that you apply it to all text elements, otherwise when you scroll around the page and over text, the font will change shape.

For Safari, use a text-shadow property:

text-shadow: 0 0 0 #000;

This hack adds a dark shadow to the font and imitates reducing the thickness of the letters. This hack seems less sensitive to font style and looks like it can be applied site wide to the body.

Enjoy crispy fonts!