Discourse

 

Font evolution
on the web

Discourse

Font evolution
on the web

Discourse

Font evolution
on the web

Home
27 May 2021
Font evolution
on the web

Nearly five years ago, the largest tech companies in the world got together to change the way we design, implement, and interact with fonts on the web.

The introduction and adoption of variable web fonts has created a revolution in typography, and we're only just beginning to see the effects.

In this post, we'll explore the origin and evolution of variable web fonts as well as the possibilities hovering just on the edge of the horizon.

Let's start with the basics.

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
What are
variable web
fonts?

A variable web font is a type of font that contains thousands of variations in one font. In the same way that vector images provided illustrators with more flexible tools for design, variable web fonts offer greater customisation in a simpler filetype.

More technically, variable web fonts allow designers and developers to edit a font through a set of sliding scales. Rather than having to choose between a few presets, designers can specify their own weight, width, optical size, italic, and slant, and they can alter these aspects of a font right across a webpage. A variable web font provides the variation of a font family in a single font file.

The world
before variable
web fonts

Before this was a possibility, web fonts were limited to preset versions. A typeface designer would need to create each variation of a font for the user, specifying different weights, slants, and styles.

After purchasing a font, the user would receive a group of files (a font family) that contained all of the available variations of that font. These are known as 'static fonts'. What you see in each font file is what you get.

Not only did this complicate the design process and limit available options, it added challenges to web implementation as well. Since each font style was treated as a separate asset, developers were forced to make compromises to preserve performance and reduce latency.

As we will see, variable web fonts have gone a long way to solving this problem of having to choose between form and function. They can enhance user experiences on the web while reducing the burden on web applications to preserve performance.

Time to dig a little deeper.

The introduction
of variable web fonts

It was these challenges that led to the creation of variable web fonts in 2016. Through collaboration between Apple, Google, Adobe, and Microsoft, a new font file type was unveiled: OpenType Font Variations.

This new file type gave typeface designers the ability to implement design axes into their fonts. They could alter the weight, width, slant and other features while working from a single font file. More options, greater flexibility, but in a smaller package.

Variable

400

900

What can we
do now?

Being able to change font weights and widths with a high degree of variation is handy enough on its own. However, these features only scratch the surface of what makes variable web fonts so powerful in our modern context.

Here are some of the key things that can be accomplished with variable web fonts today.

More options for
developers and
designers

A hurdle faced by variable web fonts at the launch in 2016 was a lack of support. The number of applications, browsers and platforms that supported variable web fonts was small.

Thankfully this problem was short-lived and the landscape today is much improved. Every major internet browser now offers support for variable fonts and many tools, not just the Adobe suite, give designers the ability to create their own variable fonts.

The result of this is an immense increase in flexibility for designers and developers. For designers, variable fonts are a way to add more levels of expression in their design while also including more features. For developers, it adds new ways to personalise their apps and web pages without adding complexity.

More efficient,
responsive web
pages

Now that every possible variation of a font can be contained in a single file, only one element needs to load when a web page is requested. In theory, a web page could use a unique font style for each level of hierarchy on a page. And this could be done by loading just one variable web font file.

Variable web fonts also have the benefit of being mathematical curves (vectors) as opposed to static images (rasters). This means that only the extreme points of a variable font axis need to be loaded. From there, the middle points on an axis can be calculated as the page loads. This means that the variable font file only needs to contain the extreme points, which reduces file size significantly.

For developers, this is crucial, as design choices are often compromised for performance. Variable web fonts keep loading times quick without limiting design choices.

Strengthening
web accessibility

Another powerful component of variable web fonts that is just beginning to be explored is its impact on web accessibility. For many online users, being able to read and navigate content is greatly affected by weights, contrast, and font size.

Because typeface designers can create custom sliders for their fonts, they can use these to improve legibility by increasing the number of words per line or removing hyphenation for different kinds of users, for example mobile users, on a variable scale.

What's
missing?

While the short history of variable web fonts demonstrates rapid improvement over time, there are many more ways that variable web fonts might impact the way we navigate the web and use our devices that haven't begun to be explored yet.

For instance, although designers can create custom axes for their fonts, this practice hasn't hit the mainstream yet. Creating custom ‘style’ axes presents some interesting possibilities, like a sliding scale between handwriting and typography. For instance, a news site might request a font with an 'urgency' axis, so that the same font can be used for urgent headlines and non-urgent headlines.

Additionally, the automation of variable web fonts has the potential to dramatically change the way we interact with typography on the web. In the same way that your device's screen automatically adjusts to the ambient light, the font might do the same to reduce eye fatigue or to cater to dyslexic readers.

With thanks
We would like to thank David Březina and the Rosetta team for their brilliant work on Handjet, which we use in this post. We would also like to credit Georg Duffner for the EB Garamond Project, an open source digitization of Garamond.

The future of variable web fonts is still unfolding.

The evolution of typography is ongoing, to be shaped largely by designers and developers. As of today, it is one of many still-evolving design trends that, if employed correctly, can open doors for imaginative minds.

To find out more about the tools that can help take your next project from good to great, reach out to us below for a collaborative and constructive conversation.

Get in touch!

What's your name?

What's your email address?

Previous Question ↲

What's your company name?

Previous Question ↲


Thank you.
We will get back to you within 12 hours.

Looks like something went wrong.
You can email us directly at hello@madebyon.com