Dedicated fonts


Comments

This is a small study into the advantages of dedicated bold and italic fonts in modern browsers.

A short time ago effects such as those demonstrated below would have been achievable only with fixed image files or elaborate font kits and placement tricks attempting to replicate kerning.

Approaching 2014, this is now possible in the majority of modern web browsers, presenting text parsable by any search engine in a single file format (WOFF):

WHEN THE RICH WAGE
WAR
IT'S THE POOR WHO
DIE
A demonstration of true bold and web font kerning.

This is Source Sans Pro with an apostrophe added from Maven Pro.


Faux bold vs dedicated bold fonts


Bold fonts provide weightier letter forms that are shaped for the purpose. The alternative is faux or false bold applied by the browser, with varying implementations. It follows that an advantage in a dedicated bold font is greater consistency across platforms and browsers, something that many site designers strive for.

Perhaps the biggest advantage, though, is the option of greater emphasis or font weight than faux bold can provide.

Anywhere faux bold is applied in the most widely used browsers, the weight of the type is exaggerated through false-bolding techniques to arrive at an equivalent to 700 weight, at least at the time of writing (indicated by the related CSS specification.).

An extreme example follows where a variant of the popular:

Source Sans Pro regular is demonstrated in faux bold.

In comparison, the following is a variant of the less well known:

Source Sans Pro black, a dedicated bold font.

Note that current releases of Internet Explorer do not provide for faux bold applied to web fonts.

Dedicated bold fonts allow the kind of control over font weight that otherwise wouldn't be possible.


GREAT FREE SERIF BOLD ITALIC WITH AWESOME KERNING & CUSTOM GLYPHS!


Faux italic vs dedicated italic fonts


The arguments for the use of italic fonts are very similar:

Consistency across platforms, and perhaps more importantly, tailored glyph shapes to fit the style of the font.

Building on the above examples:

This is Source Sans Pro black, a dedicated bold font demonstrated in faux italic.

In comparison:

This is Source Sans Pro black italic, a dedicated bold italic font.

Your miliage may vary depending on your operating system and browser choice.


A note on the use of @font-face


Remember to set a font-weight and font-style within any @font-face declaration defining a dedicated font weight or style. This is important both to prevent additional false-bolding and to allow the use of a font-weight propery on the appropriate CSS selector (that property would then be applied to any font fallen back to where the web font is unavailable).

Kerning


Kerning is a topic worthy of its own page, covered to some extent here: kerning.

Kerning in web browsers is very new and still experimental in many, applied in Chrome for example with a vendor prefix, applied by default in Firefox and available in modern versions of Internet Explorer through the use of the prefixed font-feature-settings property.