Introducing variable fonts

Bekah McDonald Knowledge share
15 Nov’19

Somewhere between the death of David Bowie and the election of Donald Trump, we all started using our mobile phones far more than our desktops to access the internet.

In 2016, a year that many have hailed as one of the “worst years in history” for its political upheaval, terrorist attacks, natural disasters and untimely celebrity deaths, mobile internet usage overtook desktop for the first time. And according to this year’s Wolfgang Digital KPI Report, 63% of all internet traffic is now coming from mobile and tablet. With the rollout of 5G, this is likely to increase exponentially.

Three seconds

Websites need to load quickly. We all know this, but Google has done extensive research into the subject. They wanted to know how long on average a person is willing to wait for a page to load, before giving up and going elsewhere.

It turns out it’s just 3 seconds.

Websites load even more slowly on your phone, due to processing speeds, memory limits and sometimes internet connection speed. So now that people are accessing the internet primarily through their phones, it’s even more important to have a speedy site. A webpage that loads slowly can cost you customers.

Size matters

At Taylor/Thomas, we are always striving to get page load times as short as possible, using whatever tools we can get our hands on. Keeping the loading time under Google’s recommended 3 seconds can sometimes be a challenge, particularly when the site uses a wide range of font weights or styles. This is because for every variant of a font used on a page, your website has to load a separate font file.

If you’re using a couple of different weights, plus the italic versions of each, that’s going to be quite a few files for your webpage to load. And it’s going to take some time. Not only that, but if they don’t load quickly enough, your users are likely to glimpse a fallback system typeface before the preferred font file loads.

OpenType Font Variations

In an unprecedented collaborative effort between Microsoft, Google, Apple and Adobe, as well as many type designers and foundries, the OpenType Font Variations technology was created.

Known by most as simply ‘variable fonts’, this new technology allows type designers to define the limits of a typeface, and let it scale between. A variable font is one in which the equivalent of multiple individual fonts is package with a single file.

When Fontsmith approached us about their plans for a Variable Fonts microsite, we got very excited. Variable fonts are still very new, so we were keen to get our hands on the tech, but we were also keen to see how much it would improve our website loading times.

Rather than loading each font file separately, we can now load just one file which contains all of the variants. So where we might have needed four files before—let’s say regular, italic, bold and bold italic—now we have one font file that gives us access to the entire range of weights, widths and styles available. Neat, right?

How Variable Fonts work

The variants of each font are controlled along with what are known as axes. Each axis has a ‘tag’, which is a four-letter abbreviation by which it is known. There are five standardised axis names and tags­—weight (wght), width (wdth), slant (slnt), optical size (opsz) and italic (ital). Type designers can include any of these, plus build their own custom axes and tags.

Italic can either be on or off, but most axes are a scale decided by the type designer. For example, the weight scale may range from 100 to 900. Slant might be from 0 to 10.

So not only do we now have light, semi-bold, and heavy, but we have everything in between. We’re no longer restricted by predefined weights, so if bold is too bold but medium isn’t bold enough, you can find that perfect weight in between.

Some of the Fontsmith variable fonts have custom axes, which means that we can decide exactly how much we want of FS Kitty’s shadow and outline, and FS Pimlico’s glow.

“The potential for dynamic selection of custom instances within the variations design space — or design-variations space, to use its technical name — opens exciting prospects for fine tuning the typographic palette, and for new kinds of responsive typography that can adapt to best present dynamic content to a reader’s device, screen orientation, or even reading distance.”

 – John Hudson, Introducing OpenType Variable Fonts

To find out what axes and scales are available for each typeface, you’ll want to refer to that typeface’s specimen sheet. Alternatively, you can take a look at the font in Photoshop, Illustrator, Sketch, or Firefox’s Developer Tools, where you can see and manipulate the axes available.

Controlling the axes

The axes are controlled through CSS, using the font-variation-settings property*. For example, here we are setting the optical size (opsz) for FS Kim to 120, and the weight (wght) to 180.

.fs-kim {
  font-family: "FS Kim";
  font-size: 40px;
  font-variation-settings: 'opsz' 120, 'wght' 180;
}

If the typeface has custom axes, we just use the corresponding tags defined by the type designer. For example, FS Kitty Outline has an ‘Outline’ axis (OUTL) and a shadow axis (SHDW). The OpenType specification dictates that custom axis tags should be in uppercase, as below.

.fs-kitty {
  font-family: “FS Kitty Outline”;
  font-size: 40px;
  font-variation-settings: ‘OUTL’ 300, ‘SHDW’ 400;
}

*The CSS4 specification implies we will soon be able to use font-weight, font-stretch, font-style and font-optical-sizing to control the axes. While some browsers are already beginning to offer this ability, it’s still in the experimental phase and we recommend using font-variation-settings for now.

We can also animate the font variation settings, using CSS animations or transitions. This is how we achieved the homepage of the Fontsmith Variable Fonts microsite. Here’s a basic example of how you could animate FS Pele from one end of its axes to the other.

@keyframes pele {
  0% { font-variation-settings: ‘slnt’ 0, ‘wght’ 100’; }
  100% { font-variation-settings: ‘slnt’ 10, ‘wght’ 900; }
}

 The future of variable fonts

Variable fonts aren’t supported in every browser yet, and there are still some rendering issues. For example, we found that Chrome will render FS Pele and FS Kitty incorrectly when animating, unless (somewhat bizarrely) we apply text-shadow: 0 0; in the CSS!

We anticipate these rendering issues to be fixed in upcoming versions of Chrome, and browser support to increase rapidly, although legacy browsers such as IE11 will always require a fallback.

We’re always excited to work on a project with Fontsmith, but this one has been especially fun because the technology is so new and exciting.

See what we built together, at www.variable-fonts.com.

Article written by Bekah McDonald, front end developer at Taylor/Thomas.

Sign up to the TypeNotes newsletter for type news, tips and offers.

Sign up to the TypeNotes newsletter for type news, tips and offers.