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
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.
Make the grade
CTA
Fit your type to a T
Get things moving
Variable Icons
Express yourself
Shop
Credits and Typefaces
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.
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.
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.
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.
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.
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.
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.
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.