Variable Fonts: What They Are, and How to Use Them

In this article, we'll take a look at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.

How We Got Here

When HTML was created, fonts and styles were controlled exclusively by the settings of each web browser. In the mid ’90s, the first typefaces for screen-based media were created: Georgia and Verdana. These, together with the system fonts — Arial, Times New Roman, and Helvetica — were the only fonts available for web browsers (not exactly the only ones, but the ones we could find in every operating system).

With the evolution of web browsers, innovations like the <font> tag on Netscape Navigator and the first CSS specification allowed web pages to control what font was displayed. However, these fonts needed to be installed on the user's computer.

In 1998, the CSS working group proposed the support of the @font-face rule to allow any typeface to be rendered on web pages. IE4 implemented the technology but the distribution of fonts to every user's browser raised licensing and piracy issues.

The early 2000s saw the rise of image replacement techniques which substituted HTML content with styled-text images. Each piece of text had to be sliced in programs like Photoshop. This technique had the major advantage of allowing designers to use any typeface available without having to deal with font licensing.

In 2008, @font-face finally made a comeback when Apple Safari and Mozilla Firefox implemented it. This came out of the necessity of providing a simple way for designers and developers to use custom fonts rather than inaccessible images.

It wasn't until the arrival of the CSS3 Fonts Module in 2012 that font downloading became viable. Once implemented, a font downloaded by a web page could only be used on that page and not copied to the operating system. Font downloading allowed remote fonts to be downloaded and used by the browser, meaning that web designers could now use fonts that were not installed on the user's computer. When web designers found the font they wished to use, they just needed to include the font file on the web server, and it would be automatically downloaded to the user when needed. These fonts were referenced using the @font-face rule.

To use the @font-face rule we have to define a font name and point to the font file:

@font-face {
  font-family: Avenir Next Variable;
  src: url(AvenirNext_Variable.woff);
}

The font file can be one of five different formats: TTF, WOFF, WOFF2, SVG or EOT. Each has its own advantages and disadvantages. Putting it simply, EOT was created by Microsoft and only is supported by Internet Explorer. TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere. SVG is based on image replacement techniques and is only suitable for the Web. Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.

Variable Fonts

Version 1.8 of OpenType (the computer scalable font format) was released in 2016. A brand new technology shipped with it: OpenType font variations, also known as variable fonts.

This technology allows a single font to behave like multiple fonts. It's done by defining variations within the font. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave. It’s not necessary to define multiple font weights because they can be interpolated between very narrow and very wide definitions. This also makes it possible to generate styles in between — for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A.

Why are Variable Fonts Relevant?

Variable fonts can bring both simplicity to our font structure and performance improvements. Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files.

Using Variable Fonts

There are currently two different ways to use variable fonts. First, we'll look at the modern way of implementing those. The CSS specification strongly prefers using font-optical-sizing, font-style, font-weight and font-stretch for controlling any of the standard axes.

font-optical-sizing

This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value none, for when the browser cannot modify the shape of glyphs, or auto for when it can. On a browser that supports font-optical-sizing, a font where the value is set to auto can vary like the font in the image below:

With the value set to none there would be no variation to the font.

The post Variable Fonts: What They Are, and How to Use Them appeared first on SitePoint.

by Claudio Ribeiro via SitePoint