AtoZ CSS Quick Tip: Using OpenType for Text

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for Text and Typography here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on using OpenType features to style text.

T is for Text and OpenType

This week’s CSS tips are all about text and typography. In the original screencast video we looked at all sorts of different CSS properties to do with text styling. But what we’ve yet to cover in-depth in this series is OpenType features.

This family of properties adds all sorts of typographic goodness to your text and, as long as you have access to fonts that offer these features, they really give the reading experience a boost for your users.

Let’s start with where you might find these fancy fonts.

Use a premium font service

With the @font-face directive in CSS, we can load up any custom font into our projects. This may come from a service like Google Fonts or you may create a webfont of your own using a generator like Font Squirel. Both these services offer a load of great, free fonts but sometimes you may want some more professional, premium typefaces from a paid service like Adobe Typekit, Fonts.com or one of the may others.

Not only do these premium services provide top quality fonts, they do a lot of magic behind the scenes to improve the legibility, the delivery, and performance of loading the fonts themselves. I’d love to go into depth on this at some point in the future but it kinda goes over my head at the moment!

I currently use Adobe Typekit for delivering fonts for client projects and have been pretty happy with the service so far. My only complaint is that I can’t download all their fonts for local usage which is a bit of a pain when needing to design with these fonts in Sketch or Adobe Photoshop.

But one of the major benefits is that they offer a number of fonts with OpenType features. Having a font that supports OpenType features is the first step in being able to work through the following handful of tips.

Turn on ligatures

Ligatures are an OpenType feature that replaces common sequences of multiple characters with a single character for improved legibility and more elegant visual appearance. Examples of ligatures can be found here.

Classic examples are combinations of letters like ff or fi, fl, ffi or th. When viewed as multiple characters, the letters can seem as though there’s too much space between them. Ligatures just flow better. It’s a micro-optimisation but it looks classy and you’ll impress all your type nerd friends.

To use ligatures in CSS (if your typeface supports them) you can use the following snippet:

body {
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga", "clig"; /* for IE */
}

There is an alternate syntax for setting font-feature-settings instead which allows a comma separated list of OpenType features to be set in one go – a bit like shorthand for margin or padding.

Ligatures are turned on by default if you use Safari but to ensure Firefox, Opera, Chrome and IE (10+) get the best reading experience, you’ll need to set this explicitly.

Use swashes to add flourish

If you’re working on a project that requires that little extra typographic flourish, you can use the swashes OpenType feature. This will take key characters in your text and replace them with swash glyphs; these are the same letters but much more extravagant.

For a list of OpenType features in CSS, check out this useful resource.

To turn on swashes, use the following snippet:

.fancy-title {
  font-feature-settings: "swsh";
}

Improve letter-spacing with kerning

In the text screencast we discussed properties like letter-spacing and word-spacing for controlling the space between characters and words. But for extra control and better legibility, we can use the OpenType feature of font-kerning.

Kerning is the process of adjusting the space between certain combinations of characters so that they are the most appropriate for the reader. This is something that designers may obsess over, by hand, in graphics packages like Illustrator or Photoshop but has often had to relinquish control of as soon as text gets to the browser.

This feature can be enabled by setting the font-kerning or font-feature-settings property as follows:

body {
  font-kerning: normal;
  font-feature-settings: "kern";
}

Set multiple OpenType features at once

We’ve looked at three of the most common and most impressive OpenType features but there are much more. If you want to leverage these powerful features, it’s likely that you’ll want to set many of them all at once. And we can do that with the font-variant or font-feature-settings shorthands.

The reason for discussing both of these properties is due to browser support issues. At the time of writing, IE10 supports font-feature-settings but doesn’t support the other OpenType properties like font-kerning or font-variant properties. Safari does support the individual properties like font-kerning but doesn’t recognise font-feature-settings.

So, to turn on all the features just discussed, we need to use the following set of properties to cover our bases:

body {
  font-variant: common-ligatures;
  font-kerning: "kern";
  font-feature-settings: "liga", "clig", "swsh", "kern";
}

Use a boilerplate to kick start your OpenType experience

If all this feels like a bit too much to get your head around and you’d like something quick and easy to get you up and running, I totally understand and fortunately, there’s something to help you out

You may be familiar with normalize.css which is a CSS “reset” used to normalise user agent stylesheets across browsers.

I recently stumbled across normalise-opentype.css which adds OpenType features with all the necessary properties and fallbacks for deep browser support whilst giving you all the OpenType goodness. The normalise-opentype project is on
github and using it is as simple as downloading and linking up an additional stylesheet or adding it to your set of pre-processor @imports if using one of those.

It’s a great looking tool and I’ll be experimenting with it on my next project for sure!