What are variable fonts? - CSS Tutorial

- [Instructor] Variable fonts is the latest evolution of the OpenType font specification as implemented in CSS. Unlike static fonts, which provide each style typeface in dedicated font file, variable fonts enable different variations of that single typeface from a single file across what's known as an axes, which can be weight, or width, or italics, or something else. Consider this example: Here, I've added every available weight and style of the font Source Sans Pro through Google Fonts. There are 12 distinct weights and styles from Extra-Light all the way to Black Italic. And to display these weights and styles correctly, the browser has to download 12 separate typeface files, one for each variation. So on this page alone, I'm downloading 12 different fonts, which is not great. Now look at another example. Here, I've added Source Sans Pro Variable, the variable fonts version of Source Sans Pro. There are two files here: Source Sans Pro Variable at the top and Source Sans Pro Italic Variable below. So we're downloading two, instead of 12, files. Right now, the weight for each of these two lines is set to 200 which maps two Extra-Lights in the static font version. But these are variable fonts, meaning there are going to be variation axes I can use to change the appearance of these fonts. Let's take a look. In the Firefox Developer Tools, I can select one of these lines, so I'll select the Roman one at the top. And then down here in the font editor, we have the weight axis for this variable font. You can see right now it's set to 200, but I can change this to any number using the slider, and as I do, you'll see the font varies in thickness, or weight, from 200 all the up to 900, which is the Black variation. I can also do the same for Italic Variable, and this change will be independent of the previous one I did, because we are applying CSS to individual elements here. This in a nutshell is what variable fonts are all about. Once a font is loaded, you can use CSS to vary the appearance of that font to produce the output you want, and because the font is variable, you're not restricted to a predefined set of weights and styles. You can choose any value within the specified parameters. So for Source Sans Pro Variable, the font weight can be any number between 200, which equates to thin, and 900, which equates to black. Why does this matter? Well, with a variable font, you can now use a single typeface to supply thin, normal, bold, black, and any other weight in between rather than picking and choosing exactly what weights you need to download. If you've ever used Google Fonts or some other service to download web fonts, you'll know that every single weight or style you add adds load time, because you have to load down all these new font files. But, with Variable Fonts, you're just adding a single font and then varying it across whatever available axes you have to get the results you want. One file instead of many files, or in this case, two files instead of many files. And the cool thing is this is all controlled through CSS, so you're free to change your settings for individual elements to fully customize the typographical experience. And this demo here, variation across the weight axis, is just the tip of the iceberg. Different fonts have different axes available for further customization, and as you'll see when we dig deeper, this opens a previously unavailable world of typographic design and customization to you.