Fun with variable fonts!
Tags: typography, css, javascript, tutorial
Published: 2020-01-05 14:31:31

---
title: Fun with variable fonts!
published: true
description: Interactions and animations with variable fonts
tags: typography, css, javascript, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x8iqemhqsscezsfu7x97.jpg
---

**[Variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) 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-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](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)).

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.
{% codepen https://codepen.io/Sidstumple/pen/yLypNwg %}

#### 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:
{% link https://dev.to/cydstumpel/using-css-variables-to-create-smooth-animations-5164 %}

#### The fun stuff
I love creating animations on scroll or mouse position and variable fonts are great for that:

{% codepen https://codepen.io/Sidstumple/pen/wvBpKwK %}

#### 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!