What is #VariableFonts?

#VariableFonts are a single font file that behaves like multiple fonts—containing all variations of weight, width, slant, and other attributes along customizable axes.

Origins

Variable fonts were announced at the ATypI conference in Warsaw (September 2016) as a collaboration between Adobe, Apple, Google, and Microsoft—rivals united to create OpenType Font Variations (OpenType 1.8).

The first demos showed fonts smoothly transitioning from thin to black weights, narrow to wide widths, without loading separate font files.

How They Work

Traditional Fonts:

• Separate files for each style (Regular, Bold, Italic, etc.)
• 8-10 files for a full family
• Large file size, limited flexibility

Variable Fonts:

• Single file contains all variations
• Axes define ranges (weight: 100-900, width: 75-125)
• Interpolation: Smooth transitions between extremes
• Custom instances at any point on the axis

Common Axes:

• wght (weight): Thin to Black
• wdth (width): Condensed to Extended
• slnt (slant): Upright to Italic
• opsz (optical size): Display to Text sizing

Custom Axes:

• Type designers can create unique axes (Grade, Softness, Flare)
• Recursive has Mono, Casual, Cursive axes
• Decovar has decorative terminal variations

Cultural Impact

Technical Benefits:

• Performance: One file vs. many (faster web loading)
• File size: Often smaller than loading multiple weights
• Flexibility: Infinite variations without new files
• Responsive typography: Adjust weight based on screen size

Creative Applications:

• Animations: Smoothly morph typography
• Interactive typography: Respond to mouse/scroll
• Micro-adjustments: Perfect optical sizing
• Branding: Unique custom axes for brand expression

Early Adoption:

• GitHub used variable fonts for interface (2018)
• Google Fonts added variable fonts (2019)
• Adobe Fonts launched variable font support (2018)

Notable Variable Fonts:

• Inter: UI font with weight, slant axes
• Recursive: Code + display with Mono/Casual axes
• Source Sans Variable: Adobe’s open-source variable
• Roboto Flex: Google’s highly flexible variable font

Industry Evolution

Browser Support:

• Chrome/Edge: September 2017
• Safari: March 2018 (macOS High Sierra, iOS 11)
• Firefox: October 2018

Design Tool Support:

• Figma: Variable fonts support (2022)
• Sketch: Limited support (2021+)
• Adobe XD: Variable fonts (2021)
• Illustrator/Photoshop: Full support (2018+)

Challenges

Adoption Barriers:

• Complexity for designers unfamiliar with axes
• Not all platforms support all axes
• Older browsers require fallbacks
• File size can balloon with many axes

Learning Curve:

• Type designers need new skills
• Traditional font production workflows disrupted

Legacy

Variable fonts represent the biggest typography innovation since OpenType. They made responsive typography truly flexible and proved competitors could collaborate on open standards. While adoption was slower than predicted, they’re now standard in modern web and app design.

Related: #Typography, #WebDesign, #TypeDesign, #ResponsiveDesign

Sources:

• Variable Fonts intro (v-fonts.com): https://v-fonts.com/
• Axis-Praxis playground: https://www.axis-praxis.org/
• MDN Variable Fonts guide: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide