Exploring Variable Fonts

On September 14, 2016, Adobe, Apple, Google, and Microsoft joined forces to introduce variable font at the ATypI conference in Warsaw, Poland. The power of this new OpenType font variation technology is in its ability to pack multiple fonts in one without increasing the file size, which is a huge advantage for delivering web fonts. Variable fonts solve the issue of loading individual font file to get various weights, widths, heights, styles, and other attributes. With infinite flexibility, variable fonts provide an exciting opportunity for responsive typography on the web.

Setting Variable Fonts

To set variable fonts in CSS, use the font-variation-settings property. Then apply the four-character axis tag and its numerical value. Here’s an example of setting the font weight (wght) to normal (400):

	
font-variation-settings: "wght" 400;
	

Type designers can come up with their own four-character axis names except for these five reserved tags: ital (italic), opsz (optical size), slnt (slant), wdth (width), and wght (weight).

Demo

To illustrate variable fonts, I use Pappardelle, a striking condensed slab serif designed by David Jonathan Ross for his Font of the Month Club. Pappardelle has contrast variations ranging from extra fine to fine to regular. I can choose any of its axis values from -500 to 0. Take a look:

Pappardelle

Here’s the HTML:

	
<div class="vfont-demo">Pappardelle</div>
	

Here’s the CSS:

	
@font-face {
 src: url(files/Pappardelle-VF.woff2);
 font-family: Pappardelle-Variable;
 font-style: normal;
 font-weight: normal;
 }
            
.vfont-demo {
 animation-name: vfont;
 animation-direction: alternate; 
 animation-duration: 1.5s; 
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
 font-family: Pappardelle-Variable;
 font-size: 30vw;
}

@keyframes vfont {
 from {
  font-variation-settings: "CTST" -500; 
 }
 to {
  font-variation-settings: "CTST" 0;
 }
}
	

The first block of CSS loads the font via @font-face. The second block sets animation, font family, and font size. The last block animates the axis values of the font-variation-settings using @keyframes. According to Ross, the axis tag CTST defines the contrast of the strokes, which varies from extra fine (-500) to regular (0).

More Resources

As of this writing, variable fonts have landed on the latest version of Chrome, Edge, and Safari. To stay up-to-date, keep an eye on V-Fonts, designed and built by Nick Sherman, is a promising resource for finding and trying variable fonts. Axis Praxis, developed by Laurence Penney, is a fun tool to experiment with variable fonts. The Variable Fonts Demo, put togehter by Microsoft Edge, is beautiful and useful. I also highly recommend joining the Font of the Month Club. Ross always has some new explorations of variable fonts for his members.