A List Apart

Menu
Issue № 350

Say No to Faux Bold

by Published in Browsers, CSS, HTML, Typography & Web Fonts · 22 Comments

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design. In this article you’ll find ways to avoid putting the browser in this bind.

You can’t fault the browser for compensating. The text is supposed to be bold or italic, and if there’s no data available the browser has to do something. So bold appears as a smeared version of regular glyphs, and italic appears as regular glyphs pushed over into a slant. What your users see can be better or worse depending on their browser and the fonts you start with. Some browsers, like Firefox, smear their bolds more, making a mess of display type. Other browsers, such as Chrome, smear their bolds very little, so that the distinction between bold and normal can be lost. None of these faux faces come close to what you can get from a real font.

These faux face styles aren’t much of an issue with web-safe fonts, as most of these fonts include bold and italic styles. But more and more websites with faux-bold are popping up lately, sometimes from designers who should and do know better. In each case, the culprit is web font misuse. Either the web font itself has no bold or italic face, or the @font-face rules are set up incorrectly. These problems can be fixed. Don’t let faux-bold happen on your site.

Headings and single-face display fonts

Consider the case of using a snazzy web font for headings. Perhaps Diplomata at Google Web Fonts catches your eye. Following these instructions, you can set up your h1 elements to use it:

  <link href='http://fonts.googleapis.com/css?family=Diplomata' 
  rel='stylesheet' type='text/css'>  <style>
  h1 {
    font-family: 'Diplomata', serif;
  }
  </style>  

Yikes!

With this result in Firefox:

Faux-bold Diplomata

Fig. 1: Faux-bold Diplomata

Diplomata only comes in one face, so the @font-face rule you get is set up as font-weight: normal. Since headings usually have font-weight: bold applied to them, the browser smears the glyphs in an attempt to make its own bold. The font preview you saw had some elegant stripes in the letters’ main strokes and is already a fairly bold weight. The faux-bold the browser creates obliterates these details.

You can fix this for Diplomata by adding font-weight: normal to your h1 styling. But this isn’t a good solution when your web font isn’t available and you have to fall back through your font stack. A better solution is to add an additional @font-face rule for your single-face web fonts to indicate that their normal weights can also be used for bold. Then you get the actual font for your headings and a bold fallback font when fallback happens.

If you follow the googleapi link for Diplomata in Internet Explorer, you can see the cross-browser @font-face rule Google provides. You can take that @font-face rule and add a copy to your CSS, changing the font-weight property to bold.

(Line wraps marked » —Ed.)

  <link href='http://fonts.googleapis.com/css?family=Diplomata' 
  rel='stylesheet' type='text/css'>  <style>
  @font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: bold;  
    src: url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot'); 
    src: local('Diplomata'), local('Diplomata-Regular'), 
    url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff') 
    format('woff');
  }
 
  h1 {
    font-family: 'Diplomata', serif;
  }
  </style>  

Yikes!

This preserves the design of the font you chose:

Diplomata without faux bolding

Fig. 2: Diplomata without faux bolding

Since Diplomata is fairly bold to begin with, it works as a heading with the normal face. If some other font in the stack gets used instead, the heading will still use a bold face. This duplicating @font-face rules trick can work with other web font services. In this example I’ve duplicated the rule that Google uses, but if you’re constructing your own rules you may want to check out @font-face rule advice from FontSpring, Font Squirrel, or Paul Irish. If your site uses a single-face display font, you can avoid faux faces by including extra @font-face rules.

Note that the CSS3-Fonts specification defines a font-synthesis property that could control whether faux bold or faux italic should happen for a single @font-face rule, but at the moment there are no implementations of this property. Duplicate @font-face rules are the only way to control this behavior in current browsers.

Don’t be tricked into losing bold and italic

The problem of missing bold and italic faces is not limited to single-face web fonts. Many of the web font services let you accidentally omit font faces. Some seem set up to encourage faux faces, either making all of their @font-face rules normal weight and style, or defaulting to include only a single face.

Take Lora from Google Web Fonts as an example. If you follow the defaults, it only gives you one face of the font, which results in this display in Chrome for <strong> and <cite> body text:

Faux bold and italic Lora

Fig. 3: Faux bold and italic Lora

This is not nearly as bad as the Yikes! heading above, but you can see that the bold isn’t really that strong, and the italic looks nothing like the curvy glyphs on Lora’s sample page. Your text may include bold or italic styling implicitly or explicitly, and if you are missing those font faces the browser starts making things up. What you really want looks like this:

Lora with actual bold and italic faces

Fig. 4: Lora with actual bold and italic faces

The Google Font UI actually warns the user not to include too many styles. Here are the defaults for Lora, where the meter is barely in the yellow, so things look good.

Web font UI defaulting to missing faces

Fig. 5: Web font UI defaulting to missing faces

If you happen to notice that what you’re getting does not match the sample page and decide you’d like to use the other styles, the meter runs straight into the red.

Web font UI with scary red gauge

Fig. 6: Web font UI with scary red gauge

If you’re not sure whether you need those extra styles, the meter may fool you into thinking you’re doing something wrong by including them! This encourages dependence on smearing and slanting instead of the real styles this font has available.

I don’t mean to pick on just Google Web Fonts. At least with that service, if you opt in on the bold and italic styles it sets up your @font-face rules correctly. Some other web font services set up a separate @font-face rule for each font in a typeface family, each set to font-weight: normal. This can cause all of the single-face problems to surface even when bold and italic faces are available.

So when you use web font services, take the extra step to verify in a variety of browsers that what you’re getting is what you intended. Make sure your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. Do not assume that the web font service is giving you everything you need. If you’re taking the time to choose a beautiful web font for your site, make sure that you’re actually using the web font and only the web font to display your type.

About the Author

22 Reader Comments

Load Comments