A variable font is a single font that acts as many: all the variations of width and weight, slant, and other attributes can be 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 and all variations from the width, weight, and slant can be adjusted in one highly efficient font file. This gives designers total creative freedom and unlocks a new realm of design and how typography can be used and expressed.
Some 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
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.
Check out the below resources to see variable fonts in action: