Variable Fonts: The Complete Guide for Designers and Developers

Variable fonts represent the biggest evolution in digital typography since the introduction of OpenType. A single variable font file can replace an entire font family, offering infinite variations in weight, width, slant, and more. This guide explains what variable fonts are, why they matter, and how to use them effectively.

What Are Variable Fonts?

A variable font is a single font file that contains a range of styles along one or more design axes. Instead of separate files for Thin, Light, Regular, Medium, Bold, and Black weights, one file contains all of them — and every weight in between.

Think of it like this: Traditional fonts are like a staircase (discrete steps). Variable fonts are like a ramp (smooth continuous range).

The Benefits of Variable Fonts

Performance

The most immediate benefit is file size reduction. A traditional font family might require 6-8 separate files:

• Regular.ttf (120 KB)
• Medium.ttf (120 KB)
• Bold.ttf (120 KB)
• Italic.ttf (120 KB)
• …and so on

A variable font containing the same range might be just 200-300 KB total — one file instead of six.

Design Flexibility

Variable fonts give you access to intermediate values that don’t exist in traditional families. Need a weight between Regular and Medium? With a variable font, you can use exactly 450 instead of choosing between 400 and 500.

Responsive Typography

On the web, variable fonts enable truly fluid typography. You can adjust font weight, width, and optical size based on viewport width, creating designs that feel native at every screen size.

Understanding Axes

Every variation in a variable font is controlled by an axis. There are standard registered axes and custom axes.

Standard Axes (lowercase)

Axis	Tag	Range	Description
Weight	wght	100-900	Thin to Black
Width	wdth	75-125%	Condensed to Expanded
Slant	slnt	0-20°	Upright to Slanted
Italic	ital	0 or 1	Roman to Italic
Optical Size	opsz	8-144	Caption to Display

Custom Axes (uppercase)

Font designers can define custom axes for unique variations:

• Grade (GRAD) — Changes weight without affecting text width
• XTRA — Adjusts x-height independently
• SERF — Adjusts serif length
• INFM — Adjusts informal style

Using Variable Fonts in CSS

Basic Usage

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Any value from 100 to 900 */
}

h1 {
  font-weight: 800;
  font-stretch: 85%;
}

Advanced: font-variation-settings

For custom axes, use font-variation-settings:

.hero-title {
  font-variation-settings:
    'wght' 750,
    'wdth' 110,
    'GRAD' 150;
}

Responsive Variable Typography

h1 {
  font-weight: 600;

  @media (min-width: 768px) {
    font-weight: 700;
    font-stretch: 105%;
  }

  @media (min-width: 1200px) {
    font-weight: 800;
    font-stretch: 110%;
  }
}

Fluid Typography with Clamp

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: calc(600 + (900 - 600) * ((100vw - 320px) / (1440 - 320)));
}

Best Variable Fonts Available

Free Variable Fonts

1. Inter — The most popular variable font for UI design
2. Roboto Flex — Google’s most flexible font with 10 axes
3. Source Serif 4 — Adobe’s versatile serif with optical sizing
4. Fraunces — A variable serif with playful, soft shapes
5. Outfit — A geometric sans-serif with excellent variable support

Premium Variable Fonts

1. Recursive — A variable font designed for code and UI
2. Dank Mono — A monospace font with code-friendly variable axes
3. Plex Sans — IBM’s comprehensive variable typeface family

Browser Support

Variable fonts are supported in all modern browsers:

• Chrome 62+ (2017)
• Firefox 53+ (2017)
• Safari 11+ (2017)
• Edge 17+ (2018)
• All mobile browsers (iOS 11+, Android 62+)

Browser support is essentially universal in 2026. No fallbacks are needed for variable font rendering.

Performance Tips

1. Subset your fonts: Remove unused characters to reduce file size further
2. Preload critical fonts: Use <link rel="preload"> for above-the-fold text
3. Use WOFF2: It’s 30% smaller than WOFF for variable fonts
4. Test with Lighthouse: Measure the real impact on Core Web Vitals

FAQ

Are variable fonts more expensive?

Not necessarily. Many excellent variable fonts are free (Google Fonts). Commercial variable fonts are typically priced similarly to traditional font families — but you get more flexibility per dollar.

Can I convert existing fonts to variable fonts?

Not automatically. Creating a variable font requires the original design source files and purpose-built tools. However, some foundries are updating their popular fonts to variable versions.

Do variable fonts work in Photoshop and Illustrator?

Yes. Adobe Creative Cloud applications fully support variable fonts. You’ll see axis sliders in the Character panel or Properties panel when a variable font is selected.

Should I always use variable fonts?

For web projects, variable fonts are almost always the better choice. For print projects where you only need one or two weights, a traditional font file may be simpler. The key advantage of variable fonts is flexibility and web performance.