Variable Fonts on the Web
What are Variable Fonts?
The Future is Now.
A new “typographic revolution” has begun. You don’t know what we’re talking about? Let us explain: in 2016, we saw the birth of Variable Fonts, with the particular purpose of improving communication in the digital world. A variable font is an OpenType font format that includes a technology called OpenType Font Variations. This technology allows individual font files to actually behave like multiple fonts, e.g. you can adjust the weight, width and slant of typefaces from the same file.
From 2010 we saw a major boom in the use of typography for the web. This was possible with the launch of HTML5 and CSS3 but also the emergence of tools such as Google Fonts. New digital typefaces emerged for web design and have been trending since then. But it came with a catch at the performance level in websites, e.g. if you’re using two font families with 3 weights and 1 style each, that means loading 12 different font files before the user can read the text in the website (e.g. Light, Regular, Bold, Italic, Italic Light and Italic Bold for each font family).
The distinctive features of Variable fonts allow new degrees of freedom for web optimisation and sparked a wave of new possibilities for web designers and front-end developers to play with. Pretty cool, right?
One of the main advantages of Variable Fonts is that they simplify the implementation process to one single file where the different variations can be adjusted through CSS or Javascript. But there’s more: as websites became increasingly visual, iconography and animation meant loading more images, animated SVGs or GIFs, imposing higher website loading times and bandwidth usage. But what if we could generate all of these from Variable Fonts with significant performance gains for web development?
This is the beginning of a new era! Throughout this Type Experience, we will show you possible uses of variable fonts and how they can be extremely handy in the development of digital products for the web. Try and test and above all, enjoy!
Anatomy of a Variable Font & Axes Definition
How does all this fuse? Just by googling, you can find tons of information on Variable Fonts which can be useful for the general public, including type designers. If you are a web developer new to this, the following brief tip is for you: in one single OpenType variable font file (.ttf, .woff and .woff2 file), you can have multiple font styles.
That single font file includes variables resulting from interpolation from points. A variable font is basically a collection of ‘master styles’, with one central ‘default’ master and multiple registered ‘axes’. An interpolation is made between different master styles along an axis, resulting, for example in different weights. Interpolations are drawn organically and can be manipulated depending on the main action implemented by the type designer. Check the illustrative example on how a Variable Font handles interpolation of four master styles along two registered axes: Weight and Width.
Originally, there are preset interpolation parameters associated to the axes, but we can customize them from scratch. The OpenType specification specifies 5 different axes: Weight, Width, Italic, Slant and Optical Size. All of these axes share the same default master but it is the Type Designer that assigns the number and names of the available axes in a given variable font.
| Registered Axes | Axis Tag | CSS Property |
|---|---|---|
| Weight | ‘wght’ | font-weight |
| Width | ‘wdth’ | font-stretch |
| Italic | ‘ital’ | font-style |
| Slant | ‘slnt’ | font-style |
| Optical Size | ‘opsz’ | font-optical-sizing |
Applying Variable Fonts with CSS
So now that we covered the basics of Variable Fonts, how can we make the most of them to create awe-inspiring (and optimized) websites?
The flexibility that Variable Fonts introduce comes to life through their manipulation of CSS properties. As you can see in the previous table, for each registered axis (Weight, Width, Italic, Slant and Optical Size) you have a corresponding CSS property that allows for its manipulation: font-weight, font-stretch, font-style: italic, font-style: oblique + angle and font-optical-sizing. Please bear in mind that not all Variable Fonts contain the full set of registered axes of variation: many contain just two or three.
To make it even more fun, if we want to play around with user experience and add some micro-animations to websites or web applications this is incredibly easy using CSS transitions or keyframe animations.
Nevertheless, you should consider that, as we’re writing, there is not yet full browser support of some of the features we describe and test here (e.g. Internet Explorer has no support and the same is true for many older versions of Mozilla Firefox, Google Chrome and Safari). Please check caniuse.com and test thoroughly before moving your websites to production.
Loading the fonts
You can load a Variable Font to your website exactly as you would do with any other font: just use the @font-face rule at the top of your CSS stylesheet.
Example: using the @font-face rule to load a .woff2 file, specifying the font-family name and the source of the file.
@font-face {
font-family: 'Kawaru';
src: url('kawaru.woff2') format('woff2');
}Styling the Text
You have two different ways of styling text elements with a Variable font depending on its axis. You can either use the corresponding CSS property of the axis (e.g. font-weight for the Weight axis) or use the ‘font-variation-settings’ property with the axis tag followed by the value:
font-variation-settings: ‘wght’ 624;
Consider that, whenever possible, you should provide fallbacks to browsers that do not support Variable Fonts. In the case above, we could use ‘font-weight’ as a fallback to ‘font-variation-settings’.
font-weight: 624;
For more information on ‘font-variation-settings’ click here.
Example: styling an H1 heading with a Variable Font with a registered axis, Weight, using the font-variation-settings property and font-weight as fallback.
h1 {
font-variation-settings: 'wght' 624;
font-weight: 624;
}Example: styling an H1 heading with a Variable Font with two registered axes, Weight and Width, using the font-variation-settings property.
h1 {
font-variation-settings: 'wght' 624, 'wdth' 32;
}Applying a Custom Axis
We’ve seen how to style a Variable Font with Registered Axes and now we’ll move to Custom Axes. These can basically be anything the type designer wishes so there is plenty of room for creativity and exploration, e.g. ascender or descender heights, size of serifs, etc. The possibilities are endless as long as it is given a unique 4-character name for the axis.
Custom axes can be manipulated through the ‘font-variation-settings’ property listing the 4-character axis as a string followed by its value.
Please note that as shown previously, registered axis tags are identified using lower-case tags, whereas custom axes can be given upper-case tags. Type designers aren’t forced to follow this strictly but always remember that the 4-character axis tag is case-sensitive.
Example: The Kawaru free font you can download for free here has two axes: ‘wdth’ and ‘gltc’ – a registered axis and a custom axis. To style it, you should set ‘font-variation-settings’ as follows.
font-variation-settings: "wdth" 453, "gltc" 4;Enhancing Digital Experiences with Variable Fonts
Now that we know how to manipulate Variable Fonts, it’s time to bring the juicy stuff to the table!
Let’s have a look at how to include micro-interactions and animations with CSS transitions and keyframes. If we also add Javascript to this mix… imagine the potential things we can explore! In the remaining of this article, we’ll go through some examples we’ve coined, always adding a Codepen where you can check and test the code.
Please note that due to the experimental character of these examples, some of them may not work properly in your browser.
1. Functional applications
Today’s web applications and websites are full of iconography and micro-interactions that create smooth and friendly user experiences. The next examples showcase how we can resort to Variable Fonts to implement some cool features.
Icon Animations
Most animations on the web are accomplished combining images or SVGs with CSS or Javascript.
What if we could replace all these assets with a single variable font containing all the icons of the user interface?
This is exactly what we did for this example. We then use JS to control the ‘font-variation-settings’ property, changing the different axis to generate smooth animations.
Using the Kyodo™ Slab typeface (coming soon).
Variable font Mouseover Effects
Mouseover effects on text usually involve changing some traditional CSS properties to highlight a given element, e.g. color, font-weight, text-decoration, etc.
In this Menu example, we show how to use a variable font to create an exquisite glitch effect on mouseover.
Using the Kawaru™ typeface.
Carousel with Variable Font
In this example, a Variable Font is used to create a stunning visual effect that highlights a text block on a carousel – we’re using slick to create the carousel.
Using the Kawaru™ typeface.
Speech controlled Variable Font
As immersive and interactive content grows, Variable Fonts provide, once again, an interesting alternative to convey a message: using visual cues to accompany, for example, speech.
Now is the time to turn your microphone on! Here we used a Variable Font that adjusts its axis in response to the pitch of your voice. Play around with your singing abilities and watch as Rakki™ adapts to fit your pitch.
Using the Rakki™ typeface (coming soon).
2. Decorative applications
We hope that, by now, we have already convinced you that Variable Fonts are here to stay. If not, the next examples are for the pure delight of the eye! Why? Because sometimes more visually complex, fully decorative applications are a must-have for websites.
Animating Visual Messages
When brands require visually strong interactive messages, Variable Fonts can provide new ways to create fully interactive visual text elements.
In this example, we created a dotted grid that, upon mouseover, reveals a beautiful “A”.
Using the Kahen™ typeface (coming soon).
Rotating bars with mouseover effect
Want a three-dimensional interactive block of text that changes on mouseover?
Yup, we can do that. Just have a look at this stunning piece!
Using the Kawaru™ typeface.
The aim of this Type Experience is to present a state-of-the-art regarding the technology of Variable Fonts. Despite being around for 5 years now, it has been adopted relatively slowly but we believe a lot of new and great applications of it are still to come. Some of those we tried to illustrate here as they showcase the potential that is yet to be unravelled.
Shall you give it a try? We have released the Kawaru™ typeface, FREE for both personal and commercial use. Scroll down to get it!
If you find new and exciting ways to use Variable Fonts, reach out and we’ll add them to this article.
Want to start playing with Variable Fonts?
For some of the experiments of this page, we used the Kawaru typeface which you can get for FREE on the next link.
