Get Versatile With Variable Fonts

Variable fonts offer practical and creative opportunities for web design. Mandy Michael explores how, when combined with preexisting technologies, they can be used to improve performance and usability while exploring creative solutions for storytelling, design and expression

- Mandy Michael

You may have heard the joke about the two types of website, each with a slightly different layout that is represented all over the web. As web designers and developers we have often been limited by the technologies available to us. As someone who loves experimenting with CSS on the web, I like to push the boundaries of what we think is possible with design in code; it was because of this I started creating Photoshop-like text effects with just fonts and CSS. During my experiments I started incorporating variable fonts and it became clear to me that they present many unique opportunities that are simply not possible with standard font files. Today we’ll cover what variable fonts are, how we can use them and the creative opportunities they provide.

Variable fonts were first announced in 2016 and since then support for them on the web and in software has grown quickly. Google Chrome, Firefox, Microsoft Edge and Safari all provide support for variable fonts in their latest versions on the most recent operating systems. Given this level of support, there is every reason for developers to start experimenting and working with variable fonts right now.

What are variable fonts?

Variable fonts enable font designers to define type variations within the font itself, enabling one font file to act like multiple fonts. Standard fonts are grouped into font families that contain multiple separate font files each representing a different style, for example a light weight or a bold weight. Variable fonts contain all this same information in a single font file.