Insight
In Parts 1 and 2, we discussed how variable fonts work, along with their advantages and limitations. In this third part, we’ll look at which programs and web environments support variable fonts, and how to use them in practice.
How to Use Variable Fonts
Variable fonts were first introduced in 2016. Since it has not yet been a full decade, many programs still do not support them. Most notably, Adobe Premiere Pro, After Effects, and XD do not offer native support. Microsoft Office applications also do not officially support variable fonts. Although a variable font file contains a wide range of weights—allowing you to select preset instances—you cannot access the core benefit of variable fonts: freely adjusting values between those weights. In practical terms, this means variable fonts cannot be fully utilized in these environments.
To take full advantage of variable fonts, it is important to know which programs actually support them. In Part 2, we introduced “Variable Fonts (Link),” where you can find a list of supported operating systems and programs. Below is a simplified summary chart of major applications, intended to help you choose the right environment for working with variable fonts.
Using a variable font within a program is not difficult. As with any other font, you simply select the font and adjust a few settings. In Adobe Illustrator and InDesign, selecting a variable font in the Type panel reveals a variable-font settings icon next to the style list. Clicking this icon displays sliders for each axis, which you can adjust freely.
Photoshop works slightly differently. After selecting a variable font in the Character panel, select the text layer and open the Properties panel, where you will find the variable-font controls. In Figma, selecting a text layer and clicking the meatball button (⋯) in the Type panel reveals a tab with sliders for each axis.
Variable fonts can also be used in Adobe Premiere Pro, After Effects, and Cinema 4D through third-party plugins and scripts. The usage is similar to the methods described above. If you want to use variable fonts across more applications, we recommend the following plugins:
VariFont plugin for Premiere Pro / After Effects (Link) (Paid)
VariText plugin for Cinema 4D (Link) (Paid)
Adobe official script for After Effects (Link) (Free)
How Variable Fonts Are Used on the Web
As shown in the examples above, variable fonts can add vitality and energy to the web. With slightly more effort than static fonts, they can create strong visual impact. Below are three simple use cases.
1. Hover-based style changes
With static fonts, buttons typically rely on bold styles or underlines to indicate interaction. Variable fonts allow for smoother and more expressive transitions, guiding user behavior through subtle animation.
Axis-value animation on mouse hover
2. Style changes based on pointer position
This approach can be used on landing pages or key messages to create responsive, dynamic typography. Beyond mouse movement, font axes can also be linked to microphone input or camera motion.
Animation where axis values change based on mouse position
3. User-controlled axis sliders
This approach can be used on landing pages or key messages to create responsive, dynamic typography. Beyond mouse movement, font axes can also be linked to microphone input or camera motion.
Adjusting axis values using sliders
Web Design Examples
Variable fonts are especially effective in responsive web design. The Glyphs homepage (Link) uses ABC Dinamo’s Arizona font throughout the site, featuring smooth weight transitions on hover. The Symphosizer site (Link), which showcases the custom font SF Symphony, transforms the font in real time using human voice input or other sound sources, and also provides a mouse-based mode for quiet environments.
Glyphs Homepage
GT Flexa Homepage
Symphosizer
There are also websites where you can test variable fonts on the web. Font Gauntlet (Link), provided by ABC Dinamo, allows users to try out their own variable font files as well as variable fonts produced by ABC Dinamo. AXIS PRAXIS (Link), created by Laurence Penney, enables testing multiple variable fonts simultaneously across a wider range of scenarios. On Variable Fonts (Link), you can explore 377 variable fonts, including color fonts and dingbat fonts. Samsa (Link) allows you to intuitively see how individual glyphs in a variable font change across different axes.
Variable Fonts That Capture More Attention
Although there may be slight differences depending on the font, a single variable font file is generally comparable in size to three to five static font files. Therefore, if you only need one or two font styles, using static fonts may actually be more efficient. However, variable fonts enable a wide range of styles and animations, allowing for more expressive designs. They can also draw users into the design by offering interactive experiences. If you are looking to create designs that capture attention and encourage longer engagement, why not consider using variable fonts?
Insight
In Parts 1 and 2, we discussed how variable fonts work, along with their advantages and limitations. In this third part, we’ll look at which programs and web environments support variable fonts, and how to use them in practice.
How to Use Variable Fonts
Variable fonts were first introduced in 2016. Since it has not yet been a full decade, many programs still do not support them. Most notably, Adobe Premiere Pro, After Effects, and XD do not offer native support. Microsoft Office applications also do not officially support variable fonts. Although a variable font file contains a wide range of weights—allowing you to select preset instances—you cannot access the core benefit of variable fonts: freely adjusting values between those weights. In practical terms, this means variable fonts cannot be fully utilized in these environments.
To take full advantage of variable fonts, it is important to know which programs actually support them. In Part 2, we introduced “Variable Fonts (Link),” where you can find a list of supported operating systems and programs. Below is a simplified summary chart of major applications, intended to help you choose the right environment for working with variable fonts.
Using a variable font within a program is not difficult. As with any other font, you simply select the font and adjust a few settings. In Adobe Illustrator and InDesign, selecting a variable font in the Type panel reveals a variable-font settings icon next to the style list. Clicking this icon displays sliders for each axis, which you can adjust freely.
Photoshop works slightly differently. After selecting a variable font in the Character panel, select the text layer and open the Properties panel, where you will find the variable-font controls. In Figma, selecting a text layer and clicking the meatball button (⋯) in the Type panel reveals a tab with sliders for each axis.
Variable fonts can also be used in Adobe Premiere Pro, After Effects, and Cinema 4D through third-party plugins and scripts. The usage is similar to the methods described above. If you want to use variable fonts across more applications, we recommend the following plugins:
VariFont plugin for Premiere Pro / After Effects (Link) (Paid)
VariText plugin for Cinema 4D (Link) (Paid)
Adobe official script for After Effects (Link) (Free)
How Variable Fonts Are Used on the Web
As shown in the examples above, variable fonts can add vitality and energy to the web. With slightly more effort than static fonts, they can create strong visual impact. Below are three simple use cases.
1. Hover-based style changes
With static fonts, buttons typically rely on bold styles or underlines to indicate interaction. Variable fonts allow for smoother and more expressive transitions, guiding user behavior through subtle animation.
Axis-value animation on mouse hover
2. Style changes based on pointer position
This approach can be used on landing pages or key messages to create responsive, dynamic typography. Beyond mouse movement, font axes can also be linked to microphone input or camera motion.
Animation where axis values change based on mouse position
3. User-controlled axis sliders
This approach can be used on landing pages or key messages to create responsive, dynamic typography. Beyond mouse movement, font axes can also be linked to microphone input or camera motion.
Adjusting axis values using sliders
Web Design Examples
Variable fonts are especially effective in responsive web design. The Glyphs homepage (Link) uses ABC Dinamo’s Arizona font throughout the site, featuring smooth weight transitions on hover. The Symphosizer site (Link), which showcases the custom font SF Symphony, transforms the font in real time using human voice input or other sound sources, and also provides a mouse-based mode for quiet environments.
Glyphs Homepage
GT Flexa Homepage
Symphosizer
There are also websites where you can test variable fonts on the web. Font Gauntlet (Link), provided by ABC Dinamo, allows users to try out their own variable font files as well as variable fonts produced by ABC Dinamo. AXIS PRAXIS (Link), created by Laurence Penney, enables testing multiple variable fonts simultaneously across a wider range of scenarios. On Variable Fonts (Link), you can explore 377 variable fonts, including color fonts and dingbat fonts. Samsa (Link) allows you to intuitively see how individual glyphs in a variable font change across different axes.
Variable Fonts That Capture More Attention
Although there may be slight differences depending on the font, a single variable font file is generally comparable in size to three to five static font files. Therefore, if you only need one or two font styles, using static fonts may actually be more efficient. However, variable fonts enable a wide range of styles and animations, allowing for more expressive designs. They can also draw users into the design by offering interactive experiences. If you are looking to create designs that capture attention and encourage longer engagement, why not consider using variable fonts?