Variable fonts are way cooler than static fonts! They offer greater precision in print work and easy options for adaptable and animatable typography on the web. From control over font weight to being able to grow serifs out of a sans serif font, type designers are just getting started with this font format.
If you have installed fonts on your computer, you probably know that each font style is a separate file. You may have CoolFontRegular.otf and CoolFontBold.otf that you need to install—we call these the static font files and they contain all the information for that specific set of shapes with no way to change them other than switching to using a different font file. For example, changing from using Regular to Bold in your font menu.
When you install a variable font it will be called CoolFontVariable.otf (or something similar), and it will contain all the information to display Cool Font Regular, Cool Font Bold, and all the possible letter shapes in between. The information is recorded as numbers along an axis. So Cool Font Regular may correspond to 400 and Cool Font Bold may correspond to 600 along the axis. In design programs, you can either directly input the numbers, or use a slider to choose what version of the shapes you are displaying. On the web, you can reference the number on the axis that you want to display within the CSS.
Variable fonts are a font format that contains all the styles in one file. These different styles are plotted along an axis of numbers and can be accessed through sliders in most software. The user can fine tune the shapes of the letterforms using axes like weight, width, slant, optical size or even design details like size of the serifs or height of the crossbars.
This new format for the font file was announced in 2016 and has been supported in most major operating systems, browsers and programs since around 2020. As of the writing of this article in 2025, they work almost everywhere, with only a few outliers. This means that they are pretty safe to use in daily work but expect that there may be a few hiccups when working with outdated software, or software that doesn’t get updated frequently. You can check software support here.
Typography in print design is often about having precision control over many aspects of the letters and spacing. Variable fonts give even more precision than before.
Type Designers have long been in charge of choosing which weights to include with their type family but it doesn’t always fit the project perfectly. A regular weight for text may feel slightly too dark or too light for a particular project. With a Variable font, the typeface user has more control over exactly how dark or light those letterforms are. This also helps to solve the issue of light text on a dark background appearing heavier than dark text on a light background. With a variable font, we can lighten the weight of the light-coloured letterforms slightly so they don’t seem overly bold—this can be useful in branding work where you don’t want the light coloured logo to appear heavier than the dark coloured one. I know we are talking about print but this happens with dark mode on devices as well!
Perhaps we are working with a set of icons or line weights and we want to match the letter stems to them. We can make these very slight adjustments with variable fonts. This also comes in handy when we are working with lines of text that may be different sizes but we are looking for the same stem widths.
In addition to adjusting the weight of typefaces, some variable fonts will come with other axes, and one of the more common ones is the width axis. This can help line up multiple words across multiple lines or even help reduce rivers when justifying text by slightly increasing or decreasing the letter-widths in the line to compensate for awkward word-spacing.
Some variable fonts play around with unique axes. There are some really creative axes ideas like being able to control the crossbar height, or how large the serifs are. These fonts can melt like ice caps, or rotate, or go from straight sided to wiggly sided—there are many interesting options (check out the Unusual Variation filter on v-fonts.com).
Digital designs are a great place to start using Variable fonts. From a technical perspective, every time you load a font file on a website, requests get sent between servers and data gets sent and downloaded. Too many of these requests and too much data slows down the load time of the website. When we started using webfonts, best practice was to use only a few font styles (like 2-4) and shrink the file size as much as possible. One variable font can be the same size as 2-4 static fonts but it only makes one request so in most cases it offers an improvement to site performance.
And along with the performance benefits, you gain access to many more styles than just 2-4. The design of the website can incorporate more styles and fine-tuning of the typography. Also, if we can access the axes in design software, you can bet we can access those axes with code as well. Variable fonts can allow the typography to become adaptable and animated. We can animate smoothly between styles—think of letters that get wider when you mouseover, or letters that get thinner as you scroll past them, or letters that grow serifs over time. We can also adjust the style on different screen sizes for a better reading experience like making the letters more condensed on a phone screen where there is less horizontal space.
I hope you now agree that variable fonts are way cooler than static fonts! If you haven’t tried them out yet, they are easy to find on Google Fonts, Adobe Fonts, and here (many of my fonts have a variable font version).