Variable fonts: The end of web typography as we know it

14 May 2017
featured image

At the end of last year typographers and designers worldwide received an early christmas present taking the shape of what we call “variable fonts”. The term itself is pretty descriptive but the benefits of this new kind of font mechanism is massively understated. This post goes over the most exciting features and advantages of this typographic revolution.

What are variable fonts?

Until now fonts have been the source of great frustration for designers and web developers. They come in different weights and widths, called styles, that have been arbitrarily created by their respective designer. The set of all the styles is called a family. Each font family can hold between 1 and 25+ styles. You’ve probably come across them when picking a font for your presentation, design or document. These style have names like “regular”, “book”, “bold”, “black” which characterise their weight (read thickness), or “italic”, “oblique” (tilt), or even “condensed”, “ultra condensed”, “narrow” (which describes their width), to name only a few…

Each font style equals one file that you can install on your computer through your system’s native font library software. That is all well, until you need to move these fonts from a computer to another, or install them on your website, which are particularly sensitive to file loading times. Today, when a website needs to display text in a font that isn’t installed on the visitor’s computer, it needs to download each style file – which for some fonts can be fairly heavy– especially when you apply 3-5 different styles to the overall site. Good practice dictates that a website shouldn’t include more that a couple font styles unless you’d like to be penalised by Google’s robots for the sluggishness of your page loads.

Enter variable fonts

A few small companies, known under the names of Google, Microsoft, Apple and Adobe have been aware of the shortcomings explained above. They jointly worked on a solution called variable fonts. They describe it as “a single font file that behaves like multiple fonts”.

Instead of having six files, each one for a different weight for instance; you would have only a single file that can be stretched and modified as you like through different parameters. That means that when you previously had 6 possible thicknesses, you know have over a million, virtually. The beautiful thing is that the file doens’t get any heavier because its appearance is defined by the parameters you will choose, and different font styles won’t repeat redundant data.

What does it mean for Designers

It means that we will be able to have an infinite number of controls over the way type looks on our site, prints and other designs. We will be able to optimise texts for legibility, and fix problems with existing fonts more easily. It will also mean easier and quicker font management throughout our design devices. Having more typographic options also translates into more unique designs.

On the other hand, it could become quite overwhelming for some and it represent a trap for more inexperienced typographers as they might overdo some of the customization.

Ultimately, designers won’t be getting headaches with font management. This hasn’t been completely solved with third party API’s such as Typekit or manual cloud-based solutions. Hopefully variable fonts will.

What does it mean for Developers

It means that front-end developers will be able to create quicker sites while increasing possibilities in terms of text appearance. Integration will probably be much smoother and rely less on third-party API’s. Since appearance will be controlled through CSS attributes, my assumption is that we will be able to use ready-made CSS snippets from various online design resources, which means quicker development times.

What does it mean for everyone else

Mainly, it means that pages and softwares using variable fonts will load faster, improving ranking and user experience. On the other hand, having too much latitude could potentially mean untrained typesetters could make some truly awful mistakes. But there is an answer to that problem. Just like they do now, font designers will create presets equivalent to the style sets we use today. Ultimately the mass won’t see as much of a difference aside form the improved display performances.

How do variable fonts work?

It is yet too early to know exactly how variable fonts will be used and customised. But the team leading the development of that technology have said that controlling the appearance of type will rely on CSS attributes. At the moment browser load entire font sets and displays their weight depending on the font-weight attribute, with a scale using ascending 100 increments. In other words, 300 = light, 400 = regular, 500= book, 600 = semi-bold etc. The available styles depend on the font family’s availabilities, and you can switch other characteristics like “tilting” through the font-style attribute.
Using variable fonts, instead of having increments of 100 for font-weight, you will probably be able to use numbers like 566, or set different angles of italics, letter-widths, x-height, etc.

When will I be able to use them?

Two main factors will influence how soon this technology will be available for everyone. The good news is that the first one is how much progress the inventors make on the integration. All the inner workings, which involve complex rendering engines and calculations, need to be worked out so that it could be released. Thankfully and extraordinarily, the five companies stated earlier are putting their efforts together to come up with a solution that will be compatible to a huge portion of the devices as soon as it is released. Normally, you would see one of the companies putting forward a solution and the rest of the market trying to come up with theirs, which has the consequence of making our work of designing and programming so much harder. Experts seem optimistic that such a technology could be available before 2020.

The second factor is the adoption rate from software companies and web developers. It will likely take years for all the software we use and cherish to build that mechanism into their applications. Thankfully again, Adobe is part of the development process, and so is Google who’s mission has been to facilitate web development through optimisation resources and proprietary tools like Google webfonts.

    Comments

Leave a Reply

Your browser is out-of-date!

Update your browser to view this website correctly.Update my browser now

×