Font Weight: More Than Bold

Using font weights & styles properly looks better, reads easier

For years web designers were restricted to one of a few font stacks for the web. Arial, maybe Helvetica1, Verdana, Georgia, Times New Roman, IMPACT, and if you wanted to hurt someone: Comic Sans. There were a few other safe fonts and we used what we could where we could.

In recent years we've been able to branch out. There were some javascript hacks, but eventually sites like Typekit came along and made things easier. Grand font libraries, and very little setup needed. Competitors have sprung up and other sites, like Fontspring2, one of my personal favorites, allow you to license many fonts without traffic restrictions. Google Fonts has none of the restrictions and very simple code to get started with using unique fonts. Google's selection of quality is currently sparse, but getting better.

With more freedom comes more room for error.

We are family

When defining what font we'd like to use in CSS we set the font-family property. A font family is a grouping of individual fonts. Normal (400), italic, bold (700), bold italic. That's four fonts right there. No parents, no children, just a group of fonts living together as a family. It's more modern than we are.

With four fonts are four chances to screw something up.

If you use a font family that has no italic or bold (or bold italic) version the OS and browser will take over. Nothing's broken, it just might look like crap, and that probably wasn't your intention.

They key is using a font family that has the variations you need. Find something nice, set it up properly and your font options explode.

All of the options below have some version of free, so coffee shops: please, please retire Papyrus.

Google Fonts

Google fonts are well-used because they're all free. There are a few good choices, but be careful when choosing. Many don't have multiple styles, and the lack of a true font family can make usage rough.

Take Brawler as an example. It's a nice font, but only available at 400 weight, normal style.

When setting it to bold or italic you get faux bold and faux italic since there's no real font for the browser to reference.

Examples with an A-Z sentence:

Normal Brawler: Pack my box with five dozen liquor jugs.
Bold Brawler: Pack my box with five dozen liquor jugs.
Italic Brawler: Pack my box with five dozen liquor jugs.
Bold Italic: Pack my box with five dozen liquor jugs.

Depending on your setup it may look ok, but generally spacing will be awkward, inconsistent and can appear jagged. In Firefox (PC) the bold non-italics line is shorter; in all other browsers I've tested, its longer. In Chrome (Mac) the same bold non-italics line barely appears bold at all.

Lato, on the other hand, has 10 styles currently: five weights with proper italics for each, including 400 & 700 (default normal and bold weights).

Normal Lato: Pack my box with five dozen liquor jugs.
Bold Lato: Pack my box with five dozen liquor jugs.
Italic Lato: Pack my box with five dozen liquor jugs.
Bold Italic: Pack my box with five dozen liquor jugs.

Thanks to having real fonts here the look is smooth, and the spacing is as consistent as it can be cross-system and cross-browser. Lato has 100, 300, 400, 700, and 900 weights.

A bonus for using Google Fonts is that the weights are defined for you. No thinking necessary! You include their stylesheet after selecting which specific fonts you want.

Tip: combine multiple fonts into one stylesheet. Second tip: don't use too many fonts. It'll help with loading time, plus font overkill happens quickly. Third tip: Font Overkill is a decent hipster band name if you need one.

Typekit

Typekit has a great library. Bought by Adobe in 2011, Typekit is a paid subscription service based on a pageview model. I attempt to avoid pageview models for nearly any service I use, but more on that another time. Typekit is now included in Adobe's Creative Cloud service. I'm not a subscriber so I have trial access. That makes my selection limited, my pageviews limited, and there's a little ad in the bottom-right corner of this page.

Adelle (not to be confused with Adele) is a personal favorite of mine, and luckily part of the trial font library. Font selection is similar to Google Fonts, but with less maintenance. Typekit gives you an embed code for a 'kit' to include in the <head> of your page. You check off which weights & styles you'd like to use and then include it in your kit.

With Google you need to change the stylesheet included in your page if you change up your fonts. With Typekit you make the changes on their end and that's it.

Normal Adelle: Pack my box with five dozen liquor jugs.
Bold Adelle: Pack my box with five dozen liquor jugs.
Italic Adelle: Pack my box with five dozen liquor jugs.
Bold Italic: Pack my box with five dozen liquor jugs.

There's no purpose for having an Adelle example here. I simply like it, and there's a reason it's popular right now.

Like Google there are fonts that have few weights, and some that have many. I've found most fonts have at least four weights (normal [400], bold [700], and each with italics). Adelle has seven, all with proper italics. Typekit also pre-selects these common four for you, making it unlikely you'll be calling an undefined font weight or style.

Self-serve

Sites like Fontspring allow you to purchase fonts for use with no technical limits attached to them (some do have self-restricted limits). You can buy them for a variety of uses.

You'll need to download your fonts and upload them to your own server. It's up to you to include the necessary fonts you want to use, and adjust your stylesheet accordingly. All fonts come with a sample stylesheet. I've found most font stores to be similar. Fontspring's looks like this:

@font-face {
    font-family: 'sofia_pro_regularregular';
    src: url('SofiaProRegular-webfont.eot');
    src: url('SofiaProRegular-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProRegular-webfont.woff') format('woff'),
         url('SofiaProRegular-webfont.ttf') format('truetype'),
         url('SofiaProRegular-webfont.svg#sofia_pro_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You'll notice the font-family name is similar to the font file name and both weight & style are set to normal. This is a regular font, so no problem. But when choosing bold italics, you get this:

@font-face {
    font-family: 'sofia_pro_bolditalic';
    src: url('SofiaProBoldIt-webfont.eot');
    src: url('SofiaProBoldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProBoldIt-webfont.woff') format('woff'),
         url('SofiaProBoldIt-webfont.ttf') format('truetype'),
         url('SofiaProBoldIt-webfont.svg#sofia_pro_bolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

The font-family name is different and weight & style are still set to normal. As I mentioned, I've seen this at quite a few font sites, and then there are people who are just doing it themselves.

What happens here is that if you were to bold and italicize sofia_pro_regularregular then the OS & browser would take over. It would not know to use sofia_pro_bolditalic. Worse yet is if you were to use a bold font, set it to normal weight and then bold it in the HTML, you'd get a warped faux-bold bold. I've seen major companies do this.

First things first: fix the family-font name. In this case, I'd make it 'Sofia Pro' in both pieces of code.

Next: set font-weights. I suggest always using numbers, even if you are only using normal and bold. You might use more variations later and it's a good habit to get into. Also, some 'normal' weights for a font may be 300 or 500. Or a 300/600 normal/bold combination may be best for the design of your site. Start thinking in terms of weights.

Lastly: set that style. Pair your italics properly. If you don't use italics, don't include it. Personally, I don't see many situations where you never use italics (see what I did there?), but some never do in a headline, so why include it?

This would make the bold italics example look like this:

@font-face {
    font-family: 'Sofia Pro';
    src: url('SofiaProBoldIt-webfont.eot');
    src: url('SofiaProBoldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProBoldIt-webfont.woff') format('woff'),
         url('SofiaProBoldIt-webfont.ttf') format('truetype'),
         url('SofiaProBoldIt-webfont.svg#sofia_pro_bolditalic') format('svg');
    font-weight: 700;
    font-style: italics;
}

Weight examples

There are almost-standards when it comes to naming fonts. This gives you guidance for which weights they may be, but they are not definitive. This is why some names are duplicated from one weight to the next.

Weight Naming
100 Thin, Ultra Light, Extra Light, Ultra Thin
200 Light, Thin, Extra Light
300 Light, Book
400 (normal) Regular, Normal, Book
500 Medium
600 Semibold, Demibold
700 (bold) Bold
800* Extra Bold, Heavy, Black
900 Black, Extra Black, Ultra Black, Fat

* Sofia Pro, the font I'm currently using for this site, doesn't have an 800 weight - or 900, depending on how you classify it - so 800 and 900 appear the same.

Backup font-family

The font-family should never be set to just one font. You should have alternative fonts, preferably in the same style, listed after your preference. At the bare minimum it's best to set it to serif or sans-serif. This is called a font stack. Example:

font-family: 'Sofia Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;


1. Helvetica doesn't render that well on PCs, and there's a lot of it in San Francisco.

2. I wish that was an affiliate link, but it's not.