Traditionally, font weights and styles were separated into different font files, forcing designers to upload individual files for every style — until now. With variable fonts, all variations of a single font are combined into 1 file, improving site performance and allowing designers to customize font styles with greater control and flexibility.
In this lesson, you’ll learn:
What are variable fonts?
A variable font is a font that encompasses its entire font family (e.g., Open Sans, Roboto Flex, etc.), not just one style or instance. In the past, designers needed multiple font files to access multiple font weights (e.g., Light 100, Bold 700, etc.), an approach which supports only limited granularity in designs and can decrease site performance. Variable fonts include all weights in a font family’s range, which allows designers to customize font styles with more detail and precision.
How to use variable fonts and font variations
To use a variable font and create font variations:
- Select the typography element (e.g., heading, text link, etc.) you’d like to style on the Designer canvas
- Go to Style panel > Typography > Font dropdown and select your variable font under Custom fonts
- Click the text box next to Variations to open the font variation menu
- Set your desired font variation(s) (e.g., weight, width, etc.) by dragging the sliders or manually entering values next to each variation
You can quickly identify variable fonts by the “dot” that appears next to them in the font picker. You can also check how many variations they support right from the font picker by hovering over the “dot.”