Variable fonts are a relatively new way of styling and displaying fonts on the web. This article will give you an overview of the technology, discussing pros and cons as well as use cases.
It will also discuss the difference between normal and variable fonts and cover related questions like browser support and where to find variable fonts.
IMPORTANT: To try the demo below you need to use a modern and updated web browser!
What are Variable Fonts?
Variable fonts are a joint effort from Apple, Google, Microsoft, and Adobe to make it possible to derive an unlimited number of font variants from one single font file.
Because the initiative is being backed by large companies, the rate of adaptation and implementation in browsers has been relatively fast.
Normal vs. Variable
Normal Fonts
Fonts can come in different variants. For example, the Roboto family below consists of 12 different variants. There is also a condensed version that consists of 6 variants.
Each variant usually has its own name, like “Light” or “Bold”. These names describe the font variant but also determines, for example, the font’s width (a value between 1 and 999) and weight (a percentage value between 50 and 200). Using a normal font, the user only has access to each pre-defined variant.
To use a font variant on a website, it has to be added to the website. Adding a font variant to a website will increase the weight of the website since the font variant is a file that has to be downloaded by website visitors. Increasing the weight of a website will be negative for its performance (how fast the website loads). Therefore, only a couple of font variants are generally added to a website. For example, adding all 12 different variants of the Roboto font above would be very negative for a website’s loading time.
Only having access to a couple of font variants instead of the full set is sometimes hindering or constricting web designers’ creativity.
Variable Fonts
Variable fonts contain information for all font variants in one single file. Instead of clamping a font variant’s values to those corresponding to certain weights (like the values for “Light” or “Bold”), a variable font allows the user to have access to all weight values (within the defined range for the specific font).
A variable font can also include variations on multiple properties. For example, a variable version of Roboto could include every possible weight between the 12 predefined variants, as well as every possible width between the 6 defined versions of Roboto Condensed.
A variable font hence gives access to more font styles which in turn means broader design variety. It makes it easier to fine-tune and tweak the typography to fit each purpose and situation since designers are not constricted to specific predefined styles/variations.
Performance
Even if the variable font file would be quite large in terms of weight, it would be lighter compared to loading all separate font variant files (as in the previous example with Roboto and Roboto Condensed).
Using variable fonts will improve performance for websites that use a lot of different font variants. However, it is recommended to make sure the font file is as small as possible since the amount of data contained in the variable font file inevitably tend to make it rather heavy.
Performance improvements can also be had in the form of perceived performance. That means the webpage seems to load faster, for example, because all font variants in a variable font load at the same time. Hence, there will not be any sudden “jump” from when the browser renders a faux bold to when the real font variant has loaded.
Optical-sizing
Apart from performance improvements, variable fonts also can contain variations of the font that changes slightly to improve readability depending on font-size. The variable font file can be adjusted to render differently depending on viewing conditions, like the type of device, viewport size, orientation and other design constraints. This feature is called optical-sizing. At the moment of writing, this feature is only fully supported in the latest version of Firefox.
Custom Axes
A variable font can also have custom feature axes, that are up to the font designer to invent. For example, a custom axis could control how thick lines are in an outlined font.
Browser support
Variable fonts are supported in the latest versions of the major browsers: Edge, Firefox, Chrome, Safari iOS, Safari, Android and Opera. Note that MacOS 10.13 or above is needed for some platforms.
At the moment, the feature is available in most modern browsers and is supported for approximately 78% of all users.
Fallbacks
For non-supporting browsers, consider loading a fallback font. For more info on how to implement variable fonts on the web, head over to our Tech Blog and have a look at the post “How to Implement Variable Fonts on the Web”.
Where can I find Variable Fonts?
There are still not that many variable fonts around, but their number will probably increase as the technology is getting more and more widespread.
- Axis-praxis is a website for showcasing and playing around with variable fonts.
- v-fonts.com is another online resource dedicated to finding and trying out variable fonts.
- This is a Google doc listing available variable fonts and info about them.
Pricing
Just like normal font families, variable fonts can be released under different licensing. Because variable fonts contain information for creating all imaginable variations of a font, the pricing will probably be similar to the price of a whole font family.
Originally published at redonion.se.
Top comments (9)
I really like the idea, as I've been dealing with people with varying eye-sight and I can see quite a few applications of this concept that will make it easy for people to customise how they read online.
I was totally unaware of this concept. Thanks a lot for the post!
Same. This is awesome!
Wow, totally didn't know they existed.
Do you know if Google Fonts has variable fonts?
That is a good question!
Did some digging and found fonts.google.com/earlyaccess (it's quite a long list, but search on the webpage for "variable"). I found 3 this way:
Cabin VF Beta, a sans-serif font.
github.com/impallari/Cabin
@import url(fonts.googleapis.com/earlyaccess/c...);
font-family: 'Cabin VF Beta', sans-serif;
Amstelvar Alpha, a serif font.
github.com/TypeNetwork/fb-Amstelvar
@import url(fonts.googleapis.com/earlyaccess/a...);
font-family: 'Amstelvar Alpha', serif;
Nunito VF Beta, a sans-serif font.
github.com/googlefonts/NunitoFont
@import url(fonts.googleapis.com/earlyaccess/n...);
font-family: 'Nunito VF Beta', sans-serif;
Thank you!
Variable fonts are so cool!
I went to an awesome, awesome talk about them by Scott Kellum. I think his slides might not be working from it, but here's an interview with him.
I also love Mandy Michael's work on them, her Codepen collection is totally worth a bookmark.
I was completely unaware of this. This is awesome! I'll be sure to be checking these out.
Wow great tip for performance. Thanks.