Variable fonts are a (r)evolution on OpenType fonts. They are animatable from one font style to another and require only one file to load!
You can read about what they are, or go straight to the fun stuff
The what and how
If you haven't heard about variable fonts yet, here's the gist:
Normal/static fonts have a couple of predefined widths or even styles (like italic or narrow) it's not crazy to load a Graphik-Bold, Graphik-Medium and Graphik-Regular version of a font in your website. Sometimes you even need a Graphik-BoldItalic, to add emphasis for example. This means a lot of HTTP requests, which means your website will be slow to load or in the worst case slow to show any typography at all (always try to use the font-display css property).
Variable fonts only need one file to load all weights and styles. This file is going to be bigger than a single font weight file, but about as big as loading 3 or 4 font weight files. A big plus in my opinion is that you can transition smoothly between these styles and weights, allowing for fun interactions.
The variation axis
Variable fonts have introduced the variation axis, this is the amount in which you can change the style of a variable font. It works similar to font-weight: 0 - 999, but can also be binary as in 0 or 1. In static fonts you would declare the regular font on 400, medium on 500 etc. In variable fonts the entire range can be available.
There are both registered- and custom axes, the registered ones are: italic (font-style), slant (font-style), optical-sizing (font-optical-sizing), width (font-stretch) and weight (font-weight). The custom ones are limitless, they are set by the font creator and need to be 4 capitalised letters.
You can add them all in one shorthand font-variation-settings: 'ital' var(--italic), 'slnt' var(--slant), 'opsz' var(--optical-size), 'wght' var(--weight), 'wdth' var(--width);, or as separate css properties.
I added the values as css variables, if you haven't heard about those yet, you can read this article I wrote:
The fun stuff
I love creating animations on scroll or mouse position and variable fonts are great for that:
Where to get them or see them
- https://codepen.io/nlwilliams/pen/JjPJewp
- https://v-fonts.com/ (a lot of fonts here are paid but some have a trial version you can play with)
- https://www.axis-praxis.org/
- https://speckyboy.com/variable-font-examples/ (some other examples)
- https://www.variable-fonts.com/
Good luck, I'm exited to see what you create!
Top comments (0)