From the author: I recently worked on a project that brought up the topic of variable fonts when discussing shape recognition. I’ve heard this term before, but I didn’t quite understand what a variable font is. I did some research on the web and was thrilled to discover all the possibilities that variable fonts provide us with.
What is a variable font?
Most websites use multiple fonts that belong to the same font family. Each font is stored in a separate file and has a unique set of properties such as width, thickness, and style. Variable fonts store all of these variations in a single font file. Unlike static fonts, variable fonts provide access to the entire range of widths, weights, and other properties. For example, most font families include a specified number of fonts with varying weights, available in incremental values from 100 to 900. Variable fonts provide the ability to use any weight within a specified range. So if font-weight: 470 is perfect for your site, you can use it.
Variable fonts in action
The demo below provides an example of the full range of styles that are possible with a single variable font. Sliders can be used to adjust thickness, width, and slope.
Sounds cool, but …
If you’re like me and haven’t heard of variable fonts before, you might wonder how useful they are. There are several key reasons why you should use variable fonts.
As you might have guessed, being able to access the entire font family from a single file can improve performance. Variable fonts reduce the number of HTTP requests for the font file and the amount of data that needs to be retrieved. Although the variable font files are larger, they are usually smaller than several static font files. However, there are exceptions. If your site only uses one font weight or style, you may not get the same performance gains as sites using multiple fonts.
Screen size often dictates typographic decisions such as thickness, size, and so on. Variable fonts give you better control over these properties. Properties such as height x, optical size can be adjusted according to the screen size to improve readability. The demo below uses Amstelvar variable font to show the transition from low to high optical size. At larger sizes, the contrast increases.
All letters are scaled to the same size for comparison
How do variable fonts work?
Now that you’ve seen what variable fonts can do, let’s see how they work. Variable fonts store one outline for each character. The points that make up the path provide instructions on how they should move to create other styles. Individual styles are interpolated using these instructions. Changes are made along different axes, such as the thickness axis.
Axes of variation
The axes of variation describe which properties are variable and what the valid range for those properties is. Variable fonts can have two types of axes: registered axes and custom axes.
Registered axles are the most common and are explicitly defined. There are five registered axes: weight, width, italic, slant and optical size. Each registered axis has a corresponding four-letter tag and can be mapped to existing CSS properties.
Please note that registered axes are optional. It is up to the font designer to decide which axes to include.
In addition to registered axes, font designers can include custom axes. Custom axes open up a lot of creative possibilities because there is no limit to the scope, definition, or number of custom axes allowed. Like registered axes, custom axes have a corresponding four-letter tag. However, custom axis tags must be in uppercase. For example, a common custom axis is level, usually represented by the four-letter GRAD tag.
A closer look at tags
I’ve mentioned tags a few times, so you might be wondering how to use them. CSS specs prefer to use font-weight, font-stretch, font-style, and font-optical-sizing to control registered axes where possible. Custom axes can be accessed using the font-variation-settings property. In the example below, GRAD is a custom axis.
font-variation-settings: ‘GRAD’ 120;
Variable fonts create new possibilities for transforming typography. From practical use cases like improving readability to more creative uses like these illustrative fonts from Typearture. If you want to do your own research, there are some great places to look for variable fonts: Axis-Praxis and V-fonts.
Author: Danielle romo
A source: //cloudfour.com
Editorial staff: Webformyself team.
CSS3. The basics
Learn CSS3 from scratch right now!