Yelp Facebook LinkedIn YouTube Twitter Instagram

Noble Blog

Variable Fonts: Exciting for Designers & Developers

What are Variable Fonts?

Variable fonts are a new kind of font that allows for amazing new levels of flexibility. With just one font file you can alter thickness, width, or just about any attribute you can think of... all while keeping the file-size small (important for websites).

Do not limit your thinking to the standard options that you’ve seen before (bold, italic, extended, condensed, etc.). Font designers can make variable fonts do all sorts of cool things!

example of adjusting a variable font

Why Variable Fonts are Good for Designers

Being able to control more aspects of typography, gives designers more freedom to create amazing designs. Instead of being limited to a specific number of pre-made fonts and styles, having a single font that has settings you can control with fine-tuned accuracy, will enable designers to create better looking and more unique designs.

The ability to animate variable fonts also brings exciting new opportunities!

Why Variable Fonts are Good for Developers & Users

Currently web developers must know which weights and styles of a font to load into a webpage or app. They don’t want to include any that are not used, as that will needlessly increase the download time. Variable fonts offer more flexibility in a single font file. That means a bit less code for develoeprs (only loading one font file), and most importantly... fewer assets to download (which means faster loading). That’s a win-win for users and developers.

How do I use these in my design app?

Your design app must support variable fonts for you to take full advantage of them.

For example, Photoshop and Illustrator support variables fonts. Sketch (version 59) added support. Unfortuntely not all apps have added variable font support. For example, Adobe XD does not currently have a way to access the settings to customize variable fonts.

Play with Some Variable Fonts

Here are some sites where you can find and test out some variable fonts. Have fun playing with them!

Learn Design & Coding at Noble Desktop

Sketch Web Design Web Development UI Design Adobe Photoshop Illustrator Adobe XD

Back to Blog