An Introduction to Variable Fonts

Made-Somewhere-Blog-Post-An Introduction to variable fonts - variable fonts written with a scale that shows different levels of boldness, size, scale, italics and weight to demonstrate a flexible variable font

In recent years there has been huge hype and growing collections of variable fonts, but what are variable fonts, and how are they used in graphic design?

In this article, we’ll provide an introduction to variable fonts. Firstly, we will explain what a variable font is. Secondly, we’ll provide some great examples of the latest variable fonts. Next, we’ll look at the future of variable fonts in the design industry. Lastly, we’ll share some great resources for where you can try and buy some of our favourite variable fonts.

What is a variable font?

A variable font is a single font that acts as many. All variations of width and weight, slant, and other attributes are contained in a single, highly efficient compressed font file. For example, a traditional font family may comprise of weights ranging from Thin, Light, Regular, Medium, Bold and Black. Each weight acts as its on file and is independent from each other, which means there is a lack of flexibility and file sizes are less efficient. In comparison, variable fonts only contain one file. Font variations, including width, weight, and slant can be adjusted in this one file. Furthermore, this gives designers total creative freedom. Variable fonts unlock a new realm of design and how type can be used.

Made-Somewhere-Blog-Post-An Introduction to variable fonts - the word variable is written with each letter increasing in weight from light to bold - demonstrating a variable font

Variable fonts to try

Clash Grotesk Variable by Sharptype
Neue Frutiger® Variable by Linotype
Avenir® Next Variable by Linotype
HEX Franklin Variable by Hex Projects
Roboto Flex by Google

The future of variable fonts and design

With the emergence of variable fonts, designers can work with an entire font family. Three out of the four major browsers already support variable fonts and the remainder are soon to follow. Although not yet robust, with still some teething and technical issues, we will most likely see a rapid growth of variable fonts in the future.

Made-Somewhere-Blog-Post-An Introduction to variable fonts - variable fonts written with a scale that shows different levels of boldness, size, scale, italics and weight to demonstrate a flexible variable font

Resources

Lastly – Check out the below resources to see variable fonts in action. Here you can test these fonts out and trial the various variable options:
v-fonts.com
variablefonts.io

We hope you enjoyed this blog post – An introduction to variable fonts. Additionally, you can see other fantastic blog posts on typography – Trending Typefaces and Type Styles 03 and Trending Typefaces and Type Styles 05. Without a doubt, there will be more useful information that will assist you with your next project!

*Made Somewhere has written this post to provide a personal summary of variable fonts. Lastly, We’re not paid or endorsed to write this post in any way.