Variable fonts can change far more than their weight. From subtle adjustments to letter proportions to dramatic transformations of entire typefaces, here's what's possible, how it works and eight extraordinary fonts that demonstrate it.
Variable fonts: beyond weight. Font source: view the typeface.
Most people think of a variable font as simply a font that can go from bold to light, or light to bold. Move a slider left or right and the letters get fatter or thinner. But that's not all they can do.
That's fair enough, because that's what most variable font demonstrations show. Thick, thin, thick, thin, thick, thin. And everyone's supposed to go, “Wow!” And it is a wow moment, but that's not all they can do.
What if a font could completely change its personality?
What if a font could grow serifs, turn into handwriting, develop strange decorations, melt, explode or completely change its personality? And what if you could control all of that by moving a slider?
Well, you can. And some type designers have been doing wonderfully strange things with the technology.
As a type designer, I find this far more interesting than another demonstration of Regular becoming Bold. These experiments challenge what we think a font actually is.
So let's look at the variable fonts that push things further, from genuinely useful design tools to experimental typefaces that challenge what we think typography can do.
What actually makes a font variable?
Before we look at what these fonts can do, it's worth understanding how variable fonts actually work.
A traditional font family might have separate files for Light, Regular, Bold and Black. Each represents a particular design.
A variable font can contain multiple master designs and the information needed to create intermediate versions.
Those changes are controlled through axes.
An axis might control weight, width or slant. But it could just as easily control the shape of a serif, the amount of decoration or something invented specifically for that typeface.
Roboto Flex: light, regular, heavy. Font source: view the typeface.
Here's the important distinction: a variable font doesn't automatically do all these things. The type designer has to build those variations into the font.
And the more dramatic the changes, the more interesting the technical challenges become.
The familiar controls are only the beginning
OpenType defines five registered axes, but designers can create their own custom axes too.
| Axis | What it controls |
|---|---|
| Weight (wght) | Thickness of strokes |
| Width (wdth) | Narrow or wide letters |
| Optical size (opsz) | Size-specific design |
| Slant (slnt) | Angle |
| Italic (ital) | Upright or italic |
| Custom axes | Designer-defined transformations |
Take optical size, for example. At small sizes, a typeface might need stronger details and more open counters. At large sizes, it can afford delicate strokes and tighter shapes.
That's already clever.
But what happens when you stop thinking about making type more readable and start thinking about making it completely different?
What can you actually change in a variable font?
Quite a lot, as it turns out.
The familiar axes cover weight, width, optical size, slant and italic design. But custom axes allow type designers to control properties that aren't covered by those five categories.
Some are subtle. Others can make the same typeface look almost unrecognisable.
| Property | What happens | Example |
|---|---|---|
| Weight | Thicker or thinner strokes | Roboto Flex |
| Width | Condensed or extended | Roboto Flex |
| Optical size | Text or display proportions | Roboto Serif |
| Slant | Upright or angled | Recursive |
| Cursive forms | More informal construction | Recursive |
| Contrast | Thick/thin stroke difference | Roboto Flex |
| Grade | Visual darkness | Roboto Flex |
| Softness | Softer shapes | Fraunces |
| Decoration | Ornamentation | Decovar |
| Modular elements | Building-block changes | Handjet |
| Negative space | Positive/negative shapes | Invert |
| Morphing | Expressive transformations | Kablammo |
| Data | Climate-related variation | Climate Crisis |
Not every font offers these controls, of course. A font with a weight axis might have no other variation at all.
And some transformations involve several axes working together.
For example, Roboto Flex offers an unusually detailed collection of controls for manipulating stroke characteristics and letter proportions.
Roboto Flex: changing letter proportions. Font source: view the typeface.
The distinction between registered and custom axes matters here. Registered axes have standard definitions that software can recognise. Custom axes allow type designers to create their own controls, but applications may need additional support to expose them.
A font's axes can also interact. Changing the weight might produce a different visual result depending on the width or contrast setting.
That gives designers a considerable amount of control, provided the font has been designed to support it.
Okay, so that's all the introductions and explanations out of the way. Let's have a look at some of the really interesting examples. This is where it gets interesting.
1. Decovar: One font, an extraordinary number of personalities
Decovar is one of my favourite examples of how far variable fonts can go.
Designed by David Berlow, it demonstrates that variation doesn't have to be limited to the usual measurements of a typeface.
Instead of simply making letters heavier, Decovar can change the decorative construction of the characters.
One setting might produce relatively straightforward lettering. Another introduces elaborate internal structures. Move a different control and the letters take on an entirely new appearance.
Decovar: three decorative personalities. Font source: view the typeface.
Decovar: one axis, three settings. Font source: view the typeface.
What makes Decovar so interesting is that you're not simply choosing between different font styles. You're actually controlling how the letters are constructed. Move one slider and decorative details appear. Move another and the shapes change again. You can combine these adjustments to create entirely different-looking letters, all within the same font.
For a type designer, that opens up some intriguing possibilities. Imagine a display font where the user can control the thickness of an outline, the size of a serif or the amount of decorative detail.
Instead of selling a collection of related styles, you're giving designers control over how the typeface behaves.
Explore: https://variablefonts.typenetwork.com/examples/styles/decovar-editorial
2. Recursive: From sensible typography to something much more casual
Recursive is particularly interesting because its transformations aren't purely decorative.
It explores the relationship between formal, engineered typography and more informal lettering.
At one end of its Casual axis, the characters feel precise and constructed. Move towards the other end and the forms become softer, more expressive and noticeably more relaxed.
You can combine that with other axes, creating a remarkable range of different appearances.
Recursive: from linear to casual. Font source: view the typeface.
What I like about Recursive is that it demonstrates a practical idea.
A brand could use the same underlying typeface for both a formal interface and a much friendlier piece of communication.
The same font can look clean and professional in one setting, then become more relaxed and informal in another, simply by adjusting its variable controls.
That's a much more interesting use of variable technology than simply offering another twenty weights.
Explore: https://www.recursive.design/
3. Fraunces: Turning up the wonkiness
Fraunces is a lovely example of a variable font that doesn't take itself too seriously.
It's a serif typeface with a wonderfully eccentric personality. But rather than forcing every user to accept one particular level of eccentricity, it provides controls for changing aspects of the design.
Its SOFT axis adjusts the softness of the forms, while WONK controls deliberately unusual details.
This is where I think variable fonts become particularly appealing to designers.
Fraunces: turning up the softness. Font source: view the typeface.
Normally, if a typeface is a bit too quirky, you look for another one.
But what if you could simply turn the quirkiness down?
Or turn it up until the whole thing starts looking gloriously ridiculous?
Fraunces gives you some of that control.
Explore: https://fonts.google.com/specimen/Fraunces
4. Cheee: When the letters start behaving strangely
Cheee is the sort of font that makes you wonder whether the designer was enjoying themselves a little too much.
And I mean that as a compliment.
It's deliberately expressive, exaggerated and packed with character.
Rather than making small refinements to a conventional typeface, its variable axes can produce very different-looking display styles.
Cheee: variable yeast and gravity. Foundry specimen: OH no Type Co..
This is the kind of font I'd use to demonstrate the technology to somebody who's never encountered variable fonts before.
You don't need a technical explanation.
You move a slider. The letters change completely.
And suddenly the possibilities become obvious.
Explore: https://ohnotype.co/fonts/cheee
5. Climate Crisis: A typeface that changes with the climate
Climate Crisis takes the idea in a completely different direction.
Instead of giving designers more stylistic choices, it uses changing letterforms to communicate information.
The typeface was developed as a visual response to climate change. Its forms transform across a timeline associated with Arctic sea-ice conditions.
What makes this particularly interesting is the connection between the content and the typography.
Climate Crisis: 1979, 2019, 2050. Font source: view the typeface.
The letters aren't just displaying a message about climate change. Their appearance becomes part of that message.
It raises an interesting question. Could variable fonts communicate other kinds of information?
Temperature, noise, movement, financial data or even the passage of time?
Not every experiment would be useful, obviously. Nobody needs their bank statement melting while they read it.
But it's a fascinating direction for typography.
Explore: https://fonts.google.com/specimen/Climate+Crisis
6. Handjet: When letters are built from completely different shapes
Handjet approaches variable typography from another angle.
Instead of thinking about letters as continuous outlines, it explores the possibilities of modular construction.
Its characters are assembled from repeated elements. By changing the properties of those elements, the font can produce strikingly different appearances.
The results can feel mechanical, playful, digital or decorative.
Handjet: changing the building blocks. Font source: view the typeface.
It just goes to show that letters don't always have to be made from the usual curves and straight lines. Sometimes you can build them out of something completely different and still end up with a perfectly recognisable alphabet.
As long as the result remains recognisable, the individual parts can take almost any form.
And sometimes recognisability isn't even the point.
For display typography, that opens up plenty of creative possibilities.
Explore: https://fonts.google.com/specimen/Handjet
7. Invert: Turning letters inside out
Invert is one of the more unusual examples in this collection.
It explores the relationship between positive and negative space, allowing letterforms to transform through a series of increasingly abstract constructions.
At certain settings, the letters look relatively conventional. At others, the familiar relationship between the letter and its surrounding space starts to break down.
The results can be surprisingly dramatic.
Invert: form and counterform. Foundry specimen: Khorash Type.
This is the kind of experiment that makes me think differently about the construction of a typeface.
Normally, we're concerned with making letters consistent, readable and visually balanced.
Invert asks what happens when you deliberately challenge those expectations.
It's probably not a font you'd use for everyday typography, but that's not really the point. It's about experimenting with letterforms and seeing just how far you can push them.
But as an exploration of variable technology, it's fascinating.
Explore: https://khorashtype.com/lab/constructing-invert/
8. Kablammo: A font that practically explodes
Kablammo is probably one of the most entertaining examples of variable typography.
Designed by Vectro Type Foundry, it uses a custom Morph axis to transform its letterforms between dramatically different appearances.
The shapes are bold, playful and deliberately exaggerated.
What makes Kablammo particularly interesting is how well the transformations lend themselves to animation.
Instead of switching abruptly between two different font styles, you can move through the intermediate shapes.
That means the letters themselves can become animated objects.
Kablammo: let the letters change. Font source: view the typeface.
Kablammo: exploring the Morph axis. Font source: view the typeface.
For motion graphics, advertising, websites and expressive branding, that's a pretty exciting possibility.
And unlike a conventional animation where every frame needs to be drawn individually, the font contains the information needed to generate the intermediate forms.
Of course, not every font needs this level of animation or transformation. But it's interesting to see what's possible and how designers might use it in their own work.
Explore: https://fonts.google.com/specimen/Kablammo
How to experiment with variable fonts yourself
Looking at variable fonts is one thing. Actually getting your hands on the controls is another.
You don't need specialist font-design software to start experimenting. Several everyday design applications and web browsers support variable fonts, although some expose more controls than others.
Using variable fonts in Adobe Illustrator and Photoshop
Both Illustrator and Photoshop support variable fonts, making them a useful place to start.
Choose a variable typeface and look for the variable font controls in the Character panel or related typography controls.
Depending on the font and application version, you may be able to adjust weight, width, slant and other available axes.
Variable controls: try one axis at a time. Font source: view the typeface.
Here's something worth knowing: not every custom axis appears in every application.
A font might contain extraordinary possibilities, but the application you're using may not provide a way to access all of them.
Google Fonts and online specimens
Google Fonts and independent foundry websites are useful places to experiment with variable typefaces.
Try changing one axis at a time. Compare the same word at its minimum, midpoint and maximum settings.
For fonts with unusual custom axes, the type designer's own specimen website may offer more comprehensive controls.
Variable fonts on websites
CSS provides standard properties for controlling common variations, including weight and width.
For more specialised controls, developers can use font-variation-settings to address individual axes.
For example:
.variable-heading {
font-family: "Roboto Flex", sans-serif;
font-weight: 650;
font-stretch: 85%;
font-optical-sizing: auto;
}The actual result depends on the font's supported axes and their ranges.
Creating variable fonts in Glyphs
If you're designing your own variable font, Glyphs allows you to create masters, define axes and generate intermediate instances.
The important part is making sure the outlines remain compatible and that the interpolated designs work properly.
It's worth testing the extremes and the combinations between them, rather than assuming that because the masters look good, everything in between will too.
Can you animate a variable font?
Yes. And this is where things become even more interesting.
Because variable fonts contain continuous ranges of variation, compatible software can animate the values of those axes.
A font might become heavier when you hover over a word. Its width could change as the browser window changes. Or an experimental display font could gradually morph between completely different shapes.
The important distinction is that you're animating the font's actual design variations, not simply stretching or distorting a static image.
Here's a simplified example using Kablammo's custom MORF axis:
.morphing-type {
font-family: "Kablammo", sans-serif;
animation: morph 3s ease-in-out infinite alternate;
}
@keyframes morph {
from { font-variation-settings: "MORF" 0; }
to { font-variation-settings: "MORF" 60; }
}The font must be loaded correctly, and its supported axis ranges must be respected. The exact results depend on the font and the software rendering it.
For a working demonstration, try https://fonts.google.com/specimen/Kablammo
Why can't every font do this?
A variable font doesn't invent entirely new outlines as you move a slider. The type designer has to create the underlying designs.
The master outlines need compatible point structures so the intermediate shapes can be calculated reliably. More axes also introduce more combinations to test.
The transformations are designed into the font; they aren't automatic effects.
Are there any limits to what a variable font can change?
Yes. Quite a few, actually.
The most important limitation is that variable fonts don't simply invent new shapes as you move a slider.
The type designer has to create the underlying designs and ensure the outlines can interpolate correctly.
That often means maintaining compatible point structures between masters.
If the outlines aren't compatible, the interpolation can fail or produce unwanted distortions.
And while some of those distortions might look interesting, they're not necessarily what the designer intended.
There's also the question of software support.
Not every design application exposes every custom axis in the same way. Some provide comprehensive variable font controls, while others offer only the familiar weight and width options.
A font might contain extraordinary possibilities, but if your software doesn't let you access them, they're not particularly useful.
For type designers, this creates an interesting challenge.
You can build something technically remarkable, but you also need to consider whether people can actually use it.
Does every variable font need to be this complicated?
Absolutely not.
There's a danger of looking at these experiments and assuming that more axes automatically make a better font.
They don't.
A beautifully designed typeface with one carefully considered weight axis can be far more useful than a font containing twelve controls that nobody understands.
The technology should serve the design, not the other way around.
But I think it's important that type designers continue experimenting.
Without experiments like Decovar, Recursive, Invert and Kablammo, we'd probably still be talking about variable fonts as a clever way of putting twenty weights into one file.
And that would be rather a shame.
The future of variable typography
What interests me most about variable fonts isn't necessarily what they can do today.
It's what type designers might discover next.
We're already seeing fonts that can change their proportions, decoration, personality and fundamental construction.
Some respond to information. Others can become animated graphic elements.
There's no reason to assume we've exhausted the possibilities.
Perhaps the next interesting development won't be another new axis for changing weight or width.
Perhaps it'll be an entirely different way of thinking about what a letter can become.
And that's what makes variable typography exciting.
It's not simply about giving designers more fonts.
It's about giving them more possibilities within the font itself.
Frequently asked questions
Can a variable font completely change its appearance?
Yes. Some experimental variable fonts contain custom axes that substantially transform their letterforms, decoration and construction. Decovar, Cheee and Kablammo are good examples.
Can variable fonts change from serif to sans serif?
They can, provided the type designer has created compatible designs that support that transformation. It's not an automatic feature of variable fonts.
Can variable fonts be animated?
Yes. Compatible applications and web browsers can animate supported variation axes, allowing letterforms to change continuously over time.
What is a custom variable font axis?
A custom axis is a designer-defined control that changes a particular property of a variable font. Unlike registered axes such as weight and width, custom axes can represent unconventional transformations.
Do variable fonts work in Adobe Illustrator and Photoshop?
Both applications support variable fonts, although the controls available can depend on the application version and the font itself. Custom axes may not always be exposed in the same way.
Can I create my own variable font?
Yes. Font editors such as Glyphs support variable font development. You'll need compatible master designs, appropriate interpolation and careful testing.
Are variable fonts better than regular fonts?
Not automatically. Variable fonts offer more flexibility, but a well-designed static font can be equally effective for many projects.
Do variable fonts make websites faster?
Not necessarily. A variable font can replace several separate font files, but its own file may be larger.
Can you change individual letters independently?
Not through ordinary axis controls alone. Separate styling or appropriate software controls may be required.
Do variable fonts work in Canva?
Support depends on Canva's font handling and which controls it exposes.
Can variable fonts be used commercially?
Yes, provided the font's licence permits the intended use.
How can I find out which axes a variable font supports?
Check the type designer's specimen page or inspect the font with a variable-font tool.
About the author
I'm Simon Stratford, an independent type designer and lettering artist with over 20 years of experience creating original fonts. I design expressive typefaces, experiment with lettering and share what I've learned about typography, font design and the creative process.
You can explore my fonts at https://simonstratford.com/