Variable fonts – one typeface to rule them all. 

Typography variable font heroes

Hey, remember when Apple, Google, Adobe, and Microsoft all worked together to create an industry-changing innovation? No? Well, as unbelievable as it sounds, one day a group of multinational competing corporations put their differences aside and their heads together. Was it to take over commerce as we know it? Umm…maybe, but we aren’t talking about that. We are talking about what Variable Fonts are and how they can change typography.

What is a Variable font?

If you want to impress your favorite font nerd, OpenType Font Variations is the official name of Variable Fonts 1. These are typefaces that have been created to combine all their different fonts into one file. One typeface to rule them all! Maybe not that dramatic but still a great idea that might change typography as we know it. Variable fonts have one or more axes where the user can change the appearance of the typeface 2. These can be weight, width, slant, and more. There are even playful axes like goofiness or creepiness. In theory, the OpenType Font Variations can give designers the tools to adjust any visual appearance of the typeface, even color.

Acumin Variable Concept-Variable Font examples

Why use variable fonts?

This innovation replaces the need to download all the individual font files. Replacing, for example, the light, normal, medium, semi-bold, and bold files for only one Variable Font file. This reduces the load on computers and servers. In addition, this has the benefit of speeding up webpages, a great factor for SEO. Smaller file load = speed and happier visitors.

Not all screens are created equal.

Now, web designers have new options when using this technology. When creating a website, a designer must remember all the different screen sizes out there. There is a sea of different desktop monitor sizes, tablet sizes, and phones. With Variable Fonts, designers can adjust the size of the font to suit their needs. Fonts can be adjusted for each screen for maximum legibility. When this is done it makes the website more accessible. Accessibility is necessary for sites moving forward and is a terrific way to possibly raise your rank in search engines like Google. For more information on this subject, read our blog on typography in web design: choosing fonts for readability and aesthetics.

Test it on the web

A wonderful place to test variable fonts is in the Font Playground at this address: https://play.typedetail.com/. Change which typeface you want to test on the left-hand side of the screen and the variables, or axes, are on the right. Try it! It is surprisingly fun to play with the different combinations. Bonus: while you are still in Font Playground, Cheee is a fun one to check out. Or play with the typeface Spooky– it gives me chills just thinking of it!

Not all Variable Fonts are created equal

The way the typeface behaves is determined by how the type designer created them. With some fonts, like Dunbar, the whole sentence gets wider when you increase the weight of the font. 

Testing variable font weight
Dunbar – weight: 250
Testing variable font weight
Dunbar – weight: 700

By contrast, when you increase the weight of the typeface Extraordinaire, the sentence stays the same width.

Testing variable font weight
Extraordinaire– weight: 250
Testing variable font weight
Extraordinaire– weight: 700

Additional variables include gradient, inner line width, or even the ability to lower or raise the height of the ascenders and descenders.

Ascenders and decender example-tall

In conclusion

When you are about to embark on your next typography quest, explore the world of Variable Fonts. A mountain of typeface shapes and sizes is available to you. And foundries are creating more every day. Google has a decent selection that are free to use, and there are others out there that are available for free or purchase. Do a search on your browser of choice to find them. Use this power to adjust your typography precisely according to your needs, to maximize legibility and accessibility.

If you would like help with marketing, advertising, or web design, feel free to contact us. We offer a variety of services like digital marketing & analytics, marketing & brand strategy, and more to small and large companies. 

share this post:

related posts

Last Minute PR: Your Guide To Promoting An Event The Day Before 

In an ideal world, you should start promoting an event at least two weeks in advance, but we all know sometimes things don’t go as ...

A Checklist for Planning an Event or Trade Show

Planning an event from start to finish is a rewarding but demanding task. If you’re not quite sure where to start, we’ve broken the process ...
see more posts

Subscribe for our latest news, marketing tips and advice