To design a typographic system, you need a font family with different weights, widths, styles, and optical sizes. Serving up a handful of font files to accommodate all the use case yields a negative impact on performance. In contrast, a variable font is a single file holding multiple fonts. In addition to performance, a variable font provides flexibility and precise control. For example, you can set a font weight in any number between 100 to 900. Instead of font-weight:400, you can set font-weight:413 to get a slightly thicker text if that increases readability.

Variation Axis

Axis of variation is the power behind variable fonts. Axes give you control of the display of your webfont. You can change a variable font’s weight (wght), width (wdth), italic (ital), slant (slnt), and optical size (opsz) through the font-variation-settings property.

Weight

Weight (wght) is one of variable font’s registered axes. It streamlines the need to include multiple font files for each weight. To illustrate the flexibility of variable font in specifying weights, let’s take a look at Tyler Finck’s ETC Trispace:

	
@font-face {
  font-family: 'ETC Trispace';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: 
   url('ETCTrispaceVariable.woff2') format('woff2');
}
	

Now that you have defined ETC Trispace variable font, you can use the font-variation-settings property to define specific weights (wght) anywhere between 100 to 900:

	
p {
 font-family: 'ETC Trispace', sans-serif;
 font-variation-settings: 'wght' 400;
}	
  	

Width

Width (wdth) is another one of variable font’s registered axes. It allows you to control how narrow or wide you would like to set the letterforms. With ETC Trispace, you can choose any value between 50 to 200. For example:

	
h1 {
 font-family: 'ETC Trispace', sans-serif;
 font-variation-settings: 'wdth' 50;
}	
  	

Combining Width and Weight

In addition to Finck’s suggested weight and width, ETC Trispace allows you to set the weight and width for your specific needs. The combination of weights (100 to 900) and widths (50 to 200) gives you tremendous flexibility for your typographic system.

	
h1 {
 font-variation-settings: 'wght' 812, 'wdth' 54;
}

h2 {
 font-variation-settings: 'wght' 718, 'wdth' 77;
}

h3 {
 font-variation-settings: 'wght' 611, 'wdth' 81;
}

p {
 font-variation-settings: 'wght' 412, 'wdth' 101;
}