Dedicated fonts

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

Faux bold vs dedicated bold fonts

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

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:

Source Sans Pro regular is demonstrated in faux bold.

In comparison:

Source Sans Pro black, a dedicated bold font.

Faux italic vs dedicated italic fonts

The case for use of dedicated italic fonts is similar:

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.

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 shuold the web font be unavilable for any reason).