the future of the font is variable

Fleur de Kroon
front-end developer
In 2016 the foundation was laid out for variable fonts as successor to the Open Type Format. These fonts were the result of a collaboration of Adobe, Apple, Google, Microsoft and font experts. Because of that unique collaboration, the developments has gone very fast. Most browsers are now updated to support variable fonts. That offers benefits for designers, developers and website visitors.

what is a variable font?

Until recently, websites used regular fonts. To use a normal, bold or italic representation, a separate font had to be loaded into the website. Variable fonts open up the possibility to load a single font into the website and represent that font in various ways in the webbrowser. This speeds up loading a website considerably. With the variance settings you can represent a single font in over a million ways.

consistent design

Traditional fonts can be presented bold or italic using the browser. But the interpretation of that alteration is different for every browser, leading to differences in representation: Faux variations. This leads to an inconsistency in the design of the font. Variable fonts eliminate this problem.

To top that, variable fonts offer a flexibility that is unparallelled. Using variations, you can display a font wider, bolder, light or italic. You can even adjust individual letters to fit them into a design better. You can also differentiate for various devices to make text easier to read. Even moving fonts and fonts that interact to mousclicks or sound are an option.
uniformity between browser views
variable fonts example
an example of the use of a single variable font that would otherwise need the upload of four traditional fonts

better performance

With this variable fonts end a recurring conflict between design and development. By loading just a single font you can display a beautiful design without any negative impact on website performance. With over a million variations, they offer entire new opportunities when it comes to customer engagement.

"Variable fonts have an equally big impact on typography as responsive design had on webdesign" – Fleur de Kroon, We are you Tuil