A modern font format that contains multiple styles in a single file.
Variable fonts represent a fundamental shift in how fonts work. Instead of separate files for each weight and style, a variable font contains a continuous range of variations. This enables precise control, smaller file sizes, and new typographic possibilities.
How Variable Fonts Work
Traditional fonts are static. Regular, Bold, and Italic are separate files with fixed characteristics.
Variable fonts define axes of variation. A weight axis might range from 100 (Thin) to 900 (Black). Any value along that axis is valid—not just preset weights like 400 or 700.
The font file contains the master designs at axis extremes. The browser or application interpolates between them to render any intermediate value.
Common Axes
Registered Axes (Standard)
These axes have standardized behaviors across variable fonts:
| Axis | Tag | Range | Effect |
|---|---|---|---|
| Weight | wght | 1–999 | Thin to Black |
| Width | wdth | 50–200 | Condensed to Expanded |
| Italic | ital | 0–1 | Upright to Italic |
| Slant | slnt | -90–90 | Angle of slant |
| Optical Size | opsz | varies | Adjusts for display size |
Custom Axes
Font designers can create additional axes:
- Grade — Weight changes without affecting width
- Softness — Sharp to rounded terminals
- Ascender/Descender — Adjustable vertical proportions
- Serif — Continuous serif to sans-serif
Benefits of Variable Fonts
File Size
One variable font file often smaller than multiple static font files for the same family. A full family (8+ weights × roman + italic) in static fonts might require 16+ files. A variable font covers everything in 1-2 files.
Performance
Fewer HTTP requests. Smaller total download. Faster page loads.
Design Flexibility
Access to any point on variation axes:
- Font-weight: 456 (not just 400 or 500)
- Fine-tuned adjustments for specific contexts
- Animate between values smoothly
Responsive Typography
Adjust weight or width based on screen size. Slightly heavier on small screens for legibility. Slightly lighter on large displays for elegance.
Animation
Smooth transitions between axis values enable:
- Hover effects that shift weight
- Loading animations
- Attention-drawing motion
- Interactive typography
Using Variable Fonts
CSS Syntax
/* Load the variable font */
@font-face {
font-family: 'Inter';
src: url('Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
}
/* Use with any weight value */
h1 {
font-family: 'Inter', sans-serif;
font-weight: 720;
}
/* Use font-variation-settings for full control */
.custom {
font-variation-settings: 'wght' 450, 'wdth' 85;
}
Design Tools
- Figma — Full variable font support; adjust axes in type panel
- Adobe apps — Support varies; Illustrator and InDesign have good support
- Sketch — Limited support; improving
Considerations
Browser Support
Variable fonts are well-supported in modern browsers. IE11 and older browsers don't support them—provide static fallbacks if needed.
Font Availability
Not all typefaces have variable versions. The selection is growing but still smaller than static fonts.
File Complexity
Very large families with many axes can result in larger file sizes than loading only the specific weights needed.
Quality Across Range
Interpolation between extremes isn't always perfect. Test at the specific values you'll use, not just the extremes.
Notable Variable Fonts
Open Source
- Inter — Highly readable UI font with multiple axes
- Recursive — Monospace to sans-serif in one font
- Source Sans 3 — Adobe's variable version of Source Sans
- Roboto Flex — Google's comprehensive variable Roboto
Commercial
- Helvetica Now Variable — Modernized Helvetica with optical sizing
- Neue Haas Grotesk — Variable version of the Helvetica predecessor
- Pangram Pangram collection — Multiple variable display fonts
Variable Fonts in Brand Systems
Variable fonts offer advantages for brand typography:
- Consistency — One font file ensures everyone uses exact same typeface
- Precision — Dial in exact weights for optimal brand expression
- Flexibility — Adjust for contexts without adding font files
- Future-proofing — Add weight variations without new licenses or files
When building Type Systems, consider whether a variable version exists for chosen typefaces.