5 Reasons you should use variable fonts

Guyyyssssssss variable fonts are the fucking future! You really should be considering this when choosing typefaces for your design projects – especially when designing for web. Those pretty little fonts bought and downloaded from those font resource websites are great for static design projects to print. But for websites, you need to plan for rendering variation, load speed, manipulation by CSS and Javascript, as well as accessibility. Here are 5 reasons you should use variable fonts when designing websites.

Number 1: comprehensive weight variation

I cannot even tell you how many websites I’ve built where the designer has used some like setting or whatever on their design program to make the font weight appear thicker by increasing the stroke weight or summing¬†(I don’t know what its called, sorry). So the font weight hasn’t actually changed to be extra bold, but it appears as if it is when designing. Then when I need to reproduce that on a website for a heading or whatever, then I need to be able to use the extra bold variation of that font.

But, alas, that font does not have an extra bold option. It was literally not designed and built into the font. And unlike the design software I can’t use some clever little trick to make the strokes appear thicker. I need to be able to call the extra bold variation of that font from the font file.

So many static fonts have only like regular and bold designed and built into them.

But variable fonts allow for as much weight manipulation as is codingly (yes, that’s a word now) possible. From extra light all the way up to extra bold and from roman to italic to slanted. I can do it all on the website I’m building.

Number 2: regular and italic built in

Variable fonts come essentially “built-in” with aaaalllllllll the possible variations of that font in one neat little package. So switching between regular and italic is as easy as snacking on popcorn.

Static fonts require all variations to be downloaded separately and packaged together as a combo. so switching between regular and italic is actually switching between two different font files essentially. And that takes browser resources, quite a lot of them. Browser resources are very limited and it’s not the same for all devices.¬†

If my laptop has limited resources available then the amount of processing power allocated for the browser to use is lower than my desktop computer with much more resources. Browser resources are limited and need to be used as efficiently as possible. That way websites will load and respond quicker.

What’s worse than a slow loading website?

A slow loading laggy website!

Number 3: CSS and Javascipt friendly

Variable fonts are built in such a way as to allow manipulation by CSS and Javascript. So devs can do cool things to the fonts like slant them and create hella rad interactions or even animations!

It also means that code can be used to control the weight or whatever of the text without that weight file having to be built into the font files. And that saves on space, load time and browser resources big time!

Number 4: web fonts .woff .woff2

Font files like .otf and .ttf are not made for web. A separate piece of file is needed for all weight variations, for italic, for all the things. While that’s fine for working on design projects in design software, it means gigantic files to load on websites before the page can render fully. And this is very bad. Very bad indeed. One of the most important things for websites to do now, is to load as quickly as possible. And no matter how much character that super cute font adds to the branding, it’s just not worth the time it takes to load on a website. Especially if multiple weights, roman and italic and other fancy shit is needed.¬†

If you’re purchasing a font for a branding project, make sure it has .woff at the very least. Variable fonts are obviously the best, but as a second consideration at least choose a font that comes with these web file types. They allow browsers to compress the files and so increase page load times a lot.

Number 5: incredible compression

Teeny tiny font file sizes compared to traditional static fonts. Yet, even more options built in to be able to manipulate using CSS. This means better load times for websites – yes!

You know when you use a font, but like have light weight for subheadings, extra bold for main headings, italic for accent and regular roman for body text? Yeah that means that if you aren’t using a variable font, then each variation of that font needs to be downloaded and loaded up on the browser to render before someone can view your web page. And as we’ve already covered, slow load times for websites mean certain death.

Variable fonts are built in such a way as to allow variations to be made using CSS. That means the font file itself is very small, like much much much smaller, than static fonts.

So please please please designers, I beg thee, if you can choose a variable font for your brand design project, then please do. And if it’s a variable font found on Google fonts then I’ll send you some of my famous choc chunk cookies!

Also if you’re a typography nerd then this is a great article to read! And if you wanna know a bit more about how to make sure websites load quicker then check out my post about designing with less images.


Share on pinterest
Share on facebook
Share on linkedin
Share on whatsapp
Share on email