Avoid Faux-Bold with Web Fonts

Only the best web fonts have a full complement of bold, italic, and bold-italic faces. Typekit provides lots of great fonts with a fleet of variants, but if you're on a budget or enjoy the freedom of Google Fonts (as I do), you'll find a lot of great fonts that don't have true bold variants.

What you end up with is "faux bold," a glyph fattened procedurally by the OS. Here's Poly, with a synthetic bold word:

Screen Shot 2013-05-30 at 12.39.17 AM

It's showing the symptoms of a faux bold: the glyphs are puffed up and letter spacing is widened to accommodate the extra fatness. Yuck. A nice alternative is to find a stand-in that closely matches your ill-equipped font family. The bold word here is provided by Alegreya:

Screen Shot 2013-05-30 at 2.21.57 AM

For me, this is accomplished with a simple CSS rule that overrides font-family for bold elements: b, strong, th { font-family: Alegreya }

One ResponseLeave a Reply

  1. You can also set one font-face which uses one font for normal thickness and another font for bold thickness. :)

Leave a Reply