The developer’s complete guide to web typography

Web fonts are still relatively new to the web, and it’s not always clear to developers what the best practices are when using them in sites and applications. Which is a shame considering that almost half of all websites load at least one web font resource.

But when I went to brush up on my web typography skills, I found that there was a lack of centralized information on the subject from a web developer’s perspective. I’ve summarized what I found here to share with you.

Web font hosting

Let’s start from the start: delivering the font files. There are two ways to supply users with a web font. Using a web font service or hosting the font yourself.

Hosted through a service

Using a font hosted by a web font service has its advantages and its downfalls. Fonts are usually delivered in the form of CSS files which you can simply link to in the head of your project. Those CSS files declare the web fonts and link them up to external resources hosted on the font services servers so they’re ready for you to use on your pages. Here are some of the popular choices:

Typekit is different from the others in the way it delivers the fonts. Instead of loading fonts through an external CSS file, Typekit will ask you to paste a JavaScript file into the head. This is the Typekit Web Font Loader, which will not only load your web fonts for you, it will do so asynchronously and give you some neat JavaScript tools to handle possible errors. More on the Typekit Web Font Loader later.

Self-hosted

While hosting the font yourself is an arguably better option, it does take some extra effort. You have to make sure you have the necessary web font files and make sure you’re allowed to use and include them in your project. Fonts aren’t always ready to use on the web either. Use online and offline apps like FontPrep, Font Squirrel’s web font generator or Web Font Generator to convert them to ready-to-use web fonts.

In order to use the web font, you need to use the @font-face CSS rule to link the source files to a new font-family name.


@font-face{
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 200;
  src: local('Merriweather Light'), url(/fonts/merriweather/200.woff) format('woff');
}

After that, you can just use the font like you would any other web-ready font.


body{
  font-family: 'Merriweather', Arial, sans-serif;
  font-size: 100%;
  font-weight: 200;
  line-height: 1.65;
}

Web font performance

Web fonts can get quite large. A single variant of a font (for example: bold, italic, light) that includes all character sets can be between 300 and 500kb. This would immediately make your website weigh about half a megabyte. And you haven’t even loaded any styles, scripts or images.

So it goes without saying that the first step in optimizing your web font’s performance is to choose your variants carefully and only load variants that are actually being used. It’s also our job as developers to convince designers to use 2 font variants instead of 4. Often, two font variants are so similar that the same aesthetic can be achieved with only one.

But we can go further…

Limiting the character set

Since each character set holds characters that are specific to a group of languages, you are usually OK to load only one, sometimes two, character sets.

A lot of fonts in the Google Fonts directory, for example, allow you to select specific sets of characters:

  • Latin
  • Latin Extended
  • Greek
  • Greek Extended
  • Cyrillic
  • Cyrillic Extended
  • Devanagari
  • Vietnamese

A typical English site is usually fine with just the Latin character set. But keep in mind that as soon as your website has some kind of user input like a comments section, you are no longer in control of what characters are being used.

Subsetting

If performance is of the utmost importance, subsetting might be the way to go. Subsetting a font narrows the font’s glyphs down to only the ones being used. Certain font features like character-specific kerning and screen optimization can also be taken away.

Subsetting is usually only used in projects where the content is predefined and performance is key. A good example of this is an HTML5 ad, where file size has to be as small as possible.

Since subsetting a font is so project specific, you won’t find a font hosting service out there that will host your subsetted font. They are always custom and self-hosted. I found the tool over at subsetter.com really good for the job.

Using the web font

We could just stop here and fonts would arrive on the user’s device, ready to use. But what if something goes wrong? What if the font takes too long to download or fails to load at all? You’re going to want to use a font loader! These are the two I’ve used in the past:

FontFaceOnload

My personal favourite. Zach Leatherman’s FontFaceOnload is a small (~1kb, minified and gzipped) JavaScript tool that will give you more control over your fonts by letting you hook into the most important events and take action where needed. The reason I like it so much is because it’s so small and it uses the CSS Font Loading Module (which at the time of writing, already ships with the latest versions of Chrome and Opera) when available.

Typekit web font loader

I discussed this one briefly already because this is the tool that Typekit uses to load their fonts asynchronously. It gives you a lot more control than FontFaceOnload and comes with modules to load fonts from the most popular font services like FontDeck, Typekit and Google. But all this functionality comes at the price of a 7kb payload, something worth considering.

Using a font loader

This is a simplified example of how you would use a font loader to make sure that when something goes wrong, the user gets to see a fallback font.


FontFaceOnload( "Merriweather", {
  success: function() {
    //add class to body so CSS can apply the font-family: Merriweather
    document.body.className += ' merriweather';
  },
  error: function() {
    //Report the error
    ga('send', 'event', 'Font error', document.title);
  },
  timeout: 5000 // in ms. Optional, default is 10 seconds
});

CSS

Alright. Fonts are loaded, possible errors are taken care of, let’s move on to looks. Some fonts come with open type features. These are subtle niceties that come with your font to make the combination of two letters flow better or to make the swirl on the lower case ‘g’ go underneath some of its preceding letters.

Depending on the font I’m using, these could be the CSS typography rules used on the body tag of my project:


body{
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 200;
  font-size: 100%;
  line-height: 1.65;
  color: #2b2b2b;

  -webkit-font-smoothing: antialiased;

  //no hyphenation
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  word-wrap: normal;

  //ligatures
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -webkit-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";

  text-rendering: optimizeLegibility;

  //small caps
  -moz-font-feature-settings:"smcp" 1;
  -moz-font-feature-settings:"smcp=1";
  -ms-font-feature-settings:"smcp" 1;
  -o-font-feature-settings:"smcp" 1;
  -webkit-font-feature-settings:"smcp" 1;
  font-feature-settings:"smcp" 1;

  //swashes
  -moz-font-feature-settings:"swsh" 1;
  -moz-font-feature-settings:"swsh=1";
  -ms-font-feature-settings:"swsh" 1;
  -o-font-feature-settings:"swsh" 1;
  -webkit-font-feature-settings:"swsh" 1;
  font-feature-settings:"swsh" 1;
}

Extra resources

I’d like to leave you with a bunch of extra resources that I’ve found useful. I hope you enjoyed reading this roundup.

  • Brick.im

    An initiative by Alfred Xing to deliver web fonts with opentype features fast and reliably.

  • Typecast

    A very useful tool for setting and prototyping type on the web.

  • Typetester

    An online tool to compare type in the browser

  • WordPress typography plugins

    If your site runs WordPress, you might want to consider installing one of these. They take care of quotation marks, hypenation, orphans and other typographic flare.