Variable fonts have been around since 2016, but slowly this technology is becoming more popular. Therefore, it is no surprise that Figma introduced a new feature to support variable fonts at the Figma conference, Config 2022. This technology came to my attention two years ago, but I did not investigate it deeply. Because of Config 2002 and the new feature that Figma launched, I spent time learning deeply about this in the past two weeks. In this article, I want to share some basic knowledge about it.

What are variable fonts?

The concept of variable fonts refers to a technology that enables the use of typography with several variations in one file. In the static fonts system, the designer would need to download a separate file for every weight (Light, regular, bold, etc.). Variable fonts allow designers to use one font family file that includes all weights. Additionally, this technology gives us more choices when designing since it offers more options than in the past.

How variable fonts work

Variable fonts have five types of axes that determine the variants.

Weight

This axis determines the font’s weight. Today, we have a max of 9 weights available for each font, such as regular, medium bold, etc. The new approach gives the designer more options to choose from. We can pick from 1 to 999. That’s right, 990 more weights, and you as a designer are given many more options.

Weight Axis

Width

Here the designer can control the width of the letters.

Width Axis

Slant

This axis controls the slant of the letters.

Slant Axis

Italic

This axis controls if the font will be in Italic style or not

Italic Axis

Optical size

In a small text size, this variable is responsible for controlling the issue of optical distortion that occurs. It increases the X-height and the thickness of the text (in that case the optical size will be low). When adjusting display fonts that normally use big sizes to small sizes, it helps to show the details of the display typography (in this case, the optical size will be large).

Optical Size Axis

Custom axes

There are fonts that have more axes that control additional aspects, such as the font Recursive, which has an axis called casual that makes the visual design of the font more rounded with a more casual style.

Recursive casual axis

Last thing, if you wonder why five axes, it is because these five axes are compatible with the standard CSS attributes.

The benefits of using variable fonts

One font file

A single font file controls all axes. This file contains all the variations (no need to open the font folder and copy each style separately).

Fast loading

It will take less time to load the website or app since there will only be one font file to load, and the text will render faster. In all honesty, I am not certain how much a user will notice it. Perhaps in places where the Internet connection is poor, the user will notice it more.

More control for the designer

Since the font comes with much more options, the designer can control the font much more precisely. Besides improving the style of the design, the designer can also make it more accessible.

With variable fonts, designers have more control over typography

Are variable fonts the future?

Since it provides many advantages for the user interface, this technology is adopted by many software like Adobe Photoshop, adobe illustrator, and Figma allowing designers to add variable fonts to their designs. In my opinion, more designers will become aware of this technology and begin to implement it, and I believe this is the future of fonts.

Will I be able to use font styles like regular bold?

The default font styles like regular bold, etc. will be available by default, and it will help designers to select the sizes when no need to be very precise.

You will still be able to use the default font styles (Example from Figma)

What font variable fonts are available today?

Today, you can choose from a variety of variable fonts. Using the Google fonts page, you can choose from many different variable fonts and adapt them to your design. Open sans, Roboto Flex, Montserrat, Raleway, and Inter are some examples.

Are variable fonts supported by all browsers?

Variable fonts are supported by most browsers today, including Firefox, Chrome, Safari, and Opera. However, it is not supported by all browsers, so the developers will have to add static fonts as a backup.

Here’s how you can experiment with variable fonts

You can play with the variable font on many pages to feel and understand them. Here is a list of some websites where you can test the technology:

Where variable fonts are useful for designers

Variable fonts will prove useful for some types of designers, while for others, it seems that it is not something they will need to use every day.

UI designers

UI designers will have the ability to use variable fonts to precise the visual design of the interface. It will be notable when they want to adopt the font styles for a white or dark theme, font styles more accessible, and create a better hierarchy.

Product designers/UX designers

In my opinion, I do not see frequent usage of variable fonts for product designers and UX designers. The reason for this is that most companies have a design system, and the product designers/UX designers focus more on solutions than visual details.

Graphic designers, marketing designers, and motion designers

Designers of this type will appreciate this feature since they will have more options to choose from. They will be able to create more precise designs and play with typography to create interesting visuals.

To summarize, I believe that the designers who will be able to derive real value from it will be those who focus on the visual side of the interface where the variable fonts can support their expertise and professionalism.

How do you use variable fonts in Figma?

Choose a variable font from the font list

The first step is to select a variable font on Figma. You can use Inter or Open Sans if you do not know what font to use. If you’re interested in seeing what variable fonts are available in the world, you can open Google Fonts and check the box to only see variable fonts. Now you will have a list of options. Select a font you like, and import it into Figma.

Open the variable fonts panel

Click on the 3 dots next to the align buttons and select variable fonts in the panel. Now you can play around with all the options. Additionally, you can open it by selecting the last option from the weight list.

Open the variable fonts panel in Figma

Protips

• Any font weight you choose in the slider will be added to the weight list.

Font weight selector in Figma

• Tick marks represent font weights (light, regular, medium, bold, etc.). If you would like to select a font weight between regular and medium, it can assist you with understanding the range of font weights.

Variable font panel in Figma

• When you change the font size to a custom weight, its number will appear on the select list.

Font weight selector in Figma

More options and variants

Apart from using font variants to adapt the precise size of the font to the design, there are some other interesting fonts that use variants to get some interesting visuals.

Some of these fonts aren’t intended to be read, and I consider them more as illustrations. Here are some examples:

• Line font by Dmitry IV: A font with two axes for controlling the width and weight that looks like a wave. Try it here
• Wave font by Dmitry IV: This variable font resembles a voice wave when the designer uses its three axes for controlling the weight, alignment, and radius. Try it here
• Adobe Blank VF & Friends by Adobe: A font that looks like Blocks when the designer can control the Weight and Height using its two axes. Try it here

Resources

The following resources helped me to understand and write this article.
I would recommend you review them.