Any
Way
You
Introducing variable fonts support in Figma
Font It
Introducing variable fonts support in Figma

Variable fonts: the basics

Variable fonts open up a range of styles within a single typeface, giving designers more control and expressive possibilities.

What’s the difference between static and variable fonts?

Static fonts are fixed to one specific style as part of a “font family”, and normally have fixed options, like ‘bold’ or ‘italic’. Variable fonts use one or more axes to offer a much wider range of styles.

What is an axis?

An axis is an expression of a single aspect of a typeface’s design. For example, ‘width’ determines how narrow or wide a character can be. ‘Weight’ describes how light or bold it is.

What type of axes are there?

Most axes allow for a continuous range within the design space—however, some are binary. Binary is a toggle, meaning there are only two options: off or on—in this case, italic or non-italic. A range axis gives more choices to increase or decrease an attribute, like slant.

What do variable fonts mean for development?

While static fonts need their own individual files for every width, weight, or style, variable fonts give you access to the entire range of a font—all within a single file—which can mean less time waiting for a webpage to load, and more time reading that beautiful typography.

See variable fonts in action

Toggle the variable font axes below to see how they finesse your product designs for a more optimal and expressive experience.

Get a better read on things

Fine-tune a better reading experience with optical sizing. Use the optical size axis to render a version of a typeface that is optimized for legibility at your selected point size.
Size 144pt
Size 100pt
Size 72pt
Size 48pt
Size 36pt
Size 84pt
Size 72pt
Size 48pt
Size 36pt
Size 24pt

Size 16pt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis faucibus turpis. Maecenas vel tortor sit amet nisi cursus gravida et sed augue. Suspendisse vulputate mi gravida risus sagittis, eu fermentum tortor faucibus. Vestibulum porta est sed urna luctus, non efficitur nunc pretium. Fusce elementum posuere libero, eu luctus sapien vehicula at. Sed sed mi erat. Cras mollis aliquam leo, ut iaculis ante tristique sed. Vivamus sed magna suscipit orci gravida tempus. Quisque vel lacus non nibh.

Vestibulum porta est sed urna luctus, non efficitur nunc pretium. Fusce elementum posuere libero, eu luctus sapien vehicula at. Sed sed mi erat. Cras mollis aliquam leo, ut iaculis ante tristique sed. Vivamus sed magna suscipit orci gravida tempus. Quisque vel lacus non nibh.

Fraunces
Axis
16
Typeface: Fraunces by Undercase Type

Make the grade

Create more elegant interactions between states. Use the grade axis to change the font’s perceived weight without affecting its width.
Roboto Flex
Axis
-200
Typeface: Roboto Flex by Google Fonts

Fit your type to a T

Whether you’re localizing a design or having to fit many characters within tight constraints, you can use the width axis to adjust the spacing of text strings.
Noto Sans Display
Axis
100
Typeface: Noto Sans Display by Google Fonts

Get things moving

Use icon fonts to add animation into your designs without relying on other technology. Use the time axis to alter the appearance of vector shapes, adding movement and motion to your icons.
?
0
c
9
m
t
L
i
Anicons
Axis
0
Typeface: Anicons by Wenting Zhang and Hua Shu

Express yourself

Explore a world of possibilities and use variable fonts to add even more character to your characters.
Shop
WT Zaft²
Axis
0
Typeface: WT Zaft² by WiseType
Colophon

Credits and Typefaces

  1. ABC Whyte and Whyte Inktrap by Dinamo

    ABC Whyte has smooth and sharp transitions, while Inktrap has curt yet also curvy ink traps at its joints.

  2. GT Ultra by Grillitype

    The versatile typographic system combines the centuries-old context of serif type with the dynamism of modern sans; challenging its own definition and questioning contemporary typographic expectation.

  3. Cheee by OH no Type Co.

    Named after a toddler's pronunciation of the word “cheese” it is as weird and delightful as you might expect.

  4. Fraunces by Undercase Type

    Fraunces is not an Old Style typeface, but an “Old Style” typeface. It’s a genre of type that is less concerned with the sober and sensible construction of letterforms, and where personality is always paramount.

  5. Roboto Flex by Google Fonts

    This open source project upgrades Roboto to become a more powerful typeface system, allowing you to do more to express and finesse your text.

  6. Noto Sans Display by Google Fonts

    An unmodulated design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts.

  7. Anicons by Wenting Zhang and Hua Shu

    The world’s first animated color icon font, based on Material Design Icons. Anicons is an experiment that combines two cutting edge font technologies: variable fonts and color fonts.

  8. WT Zaft² by WiseType

    Zaft² comes in 3 separate variable fonts which each offer a unique axis of control as well as providing stark differences in shape.