Font Converter

Variable Fonts: Complete Guide to Modern Typography

Master variable fonts with comprehensive coverage of how they work, benefits, CSS implementation, browser support, and best practices

TL;DR

In Simple Terms

Variable fonts contain all weights/widths in one file, replacing 4-16 static font files. One 82KB variable font replaces 223KB of static fonts (63% smaller).Use CSS font-weight with any value (100-900) and font-variation-settings for advanced control. Browser support is 97%+ (all modern browsers).Best for sites using 3+ font weights/styles. Stick with static fonts for simple sites (1-2 weights) or when you need maximum legacy browser support.

Share this page to:

LinkedInReddit
Convert Font InstantlyExplore Font ConvertersUnderstand Font Formats

Variable fonts represent the most significant advancement in web typography since webfont formats emerged. Unlike traditional static fonts requiring separate files for each weight and style (Regular, Medium, Bold, Italic = 4+ files), variable fonts contain all variations in a single file. One variable font replaces 4-16 static font files, reducing HTTP requests, simplifying font management, and enabling infinite weight/width variations through continuous axes. This dramatic simplification, combined with file size reduction and typographic flexibility, makes variable fonts the future of web typography.

Variable fonts work through variation axes defining ranges of change. The most common axis is weight (wght) spanning 100-900, allowing any weight from Thin to Black in a single file. Width (wdth) controls font proportions from condensed to extended. Italic (ital) toggles italic style. Slant (slnt) controls oblique angle. Beyond these standard axes, custom axes enable unique design features like optical sizing, grade adjustments, or stylistic variations. Designers set axis values with CSS, and browsers interpolate between masters to render any combination smoothly.

This comprehensive guide covers variable fonts from fundamentals to production use. You'll learn what variable fonts are and how they differ from static fonts, technical details of variation axes and interpolation, concrete benefits including file size comparisons, complete CSS implementation with font-variation-settings, current browser support and fallback strategies, sources for finding and using variable fonts, and production best practices including when to use variable fonts versus static fonts. Whether exploring variable fonts or implementing them in production, this guide provides essential knowledge for modern web typography.

Variable Fonts Overview

Static Fonts vs Variable Fonts

Static Fonts (Traditional):

  • • One file per weight/style
  • • Regular: 53 KB
  • • Bold: 54 KB
  • • Italic: 52 KB
  • • Bold Italic: 55 KB
  • • Total: 214 KB (4 files)
  • • Fixed weights only (400, 700)
  • • 4 HTTP requests

Variable Font:

  • • Single file, all variations
  • • Total: 82 KB (1 file)
  • • Infinite weights (100-900)
  • • All styles included
  • • 1 HTTP request
  • • 62% smaller
  • • 75% fewer requests
  • • Continuous weight axis

What Are Variable Fonts?

Variable fonts are OpenType fonts containing multiple variations in a single file through variation axes. Instead of discrete weights (Regular 400, Bold 700), variable fonts define ranges (100-900) allowing any value in between. This is achieved through interpolation between master designs.

Key Characteristics:

  • • Single file contains all variations
  • • Continuous axes for smooth transitions
  • • Smaller total file size than multiple static fonts
  • • Fewer HTTP requests improves performance
  • • Infinite design possibilities within defined axes

Common Variation Axes

AxisTagRangeDescription
Weightwght100-900Thin to Black
Widthwdth75-125%Condensed to Extended
Italicital0-1Roman to Italic
Slantslnt-15° to 0°Oblique angle
Optical Sizeopsz6-72ptOptimized for size

How Variable Fonts Work

Interpolation Technology

Variable fonts use interpolation to generate any weight or style from master designs. For example, a weight axis might have two masters: Thin (100) and Black (900). The font file contains instructions for interpolating between these masters.

Example: Weight 450

  • • Browser calculates: 450 is 43.75% between 100-900
  • • Interpolates glyph outlines 43.75% from Thin toward Black
  • • Result: Smooth, mathematically precise weight
  • • No pre-generated weight needed in font file

This allows infinite variations (450, 451, 452...) from just 2-4 master designs, dramatically reducing file size while providing unlimited flexibility.

Master Designs

Single Weight Axis Variable Font:

  • • 2 masters: Thin (100) + Black (900)
  • • Generates: Any weight 100-900
  • • Replaces: 9 static weights

Multi-Axis Variable Font:

  • • 4 masters: Thin/Condensed, Thin/Extended, Black/Condensed, Black/Extended
  • • Generates: Any weight 100-900 + any width 75-125%
  • • Replaces: 81+ static fonts (9 weights × 9 widths)

File Size Efficiency

Why Variable Fonts Are Smaller:

  • • Stores 2-4 masters instead of 9-16 complete fonts
  • • Interpolation instructions are tiny (few KB)
  • • Shared glyph data across all variations
  • • Single set of OpenType features and tables
  • • Result: 1 variable font (82 KB) vs 4 static fonts (214 KB)

Benefits and Use Cases

Performance Benefits

  • Smaller total size: One 82 KB variable font vs four 53 KB static fonts (214 KB total) = 62% reduction
  • Fewer HTTP requests: 1 request vs 4+ requests = 75% fewer round trips
  • Faster page loads: Less bandwidth, fewer requests = 0.5-2s faster on mobile
  • Better Core Web Vitals: Improved FCP and LCP from reduced font loading time
  • Simplified management: One file to upload, cache, maintain

Design Benefits

  • Infinite precision: Use weight 450 for perfect hierarchy, not limited to 400/700
  • Smooth animations: Animate font-weight from 300 to 700 smoothly
  • Responsive typography: Adjust weight/width based on viewport size
  • Micro-adjustments: Fine-tune weights for optical balance
  • Creative effects: Interactive typography responding to scroll, hover, time

Real-World Use Cases

1. Large Sites with Multiple Weights

Need 6+ weights (Thin, Light, Regular, Medium, Semibold, Bold). Variable font saves 300-500 KB.

2. Responsive Typography

Increase weight on mobile for better legibility, decrease on desktop for elegance.

3. Interactive Applications

Animate font properties based on user interaction (hover effects, scroll progress).

4. Brand Consistency

Use exact brand weight (e.g., 525) instead of compromising with 400 or 700.

When NOT to Use Variable Fonts

  • • Need only 1-2 weights (static fonts likely smaller)
  • • Need IE11 support (no variable font support)
  • • Limited browser compatibility requirements
  • • Variable font significantly larger than needed static fonts
  • • Simple project where performance optimization isn't critical

CSS Implementation

Basic @font-face Declaration

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/font-variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Full weight range */
  font-style: normal;
  font-display: swap;
}

Key difference: font-weight accepts a range (100 900) instead of single value

Using Variable Fonts in CSS

Method 1: Standard Properties (Recommended)

body {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 400; /* Uses wght axis */
}

h1 {
  font-weight: 750; /* Any value 100-900 */
}

.light {
  font-weight: 300;
}

.heavy {
  font-weight: 850;
}

Method 2: font-variation-settings (Custom Axes)

.custom {
  /* Multiple axes at once */
  font-variation-settings: 
    'wght' 450,
    'wdth' 110,
    'slnt' -5;
}

/* Optical size axis */
.small-text {
  font-variation-settings: 'opsz' 10;
}

.large-text {
  font-variation-settings: 'opsz' 72;
}

Animations and Transitions

/* Smooth weight transition */
.button {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.button:hover {
  font-weight: 700;
}

/* Animate weight on scroll */
@keyframes weight-pulse {
  0%, 100% { font-variation-settings: 'wght' 300; }
  50% { font-variation-settings: 'wght' 700; }
}

.animated-text {
  animation: weight-pulse 2s infinite;
}

Responsive Typography

/* Increase weight on small screens for legibility */
body {
  font-weight: 400;
}

@media (max-width: 768px) {
  body {
    font-weight: 450; /* Slightly heavier on mobile */
  }
}

/* Adjust width based on container */
.responsive-text {
  font-variation-settings: 'wdth' 100;
}

@container (max-width: 400px) {
  .responsive-text {
    font-variation-settings: 'wdth' 85; /* Narrower in small containers */
  }
}

Browser Support and Compatibility

Current Browser Support (2025)

BrowserVersionSupportNotes
Chrome62+✓ FullSince 2017
Safari11+✓ FullSince 2017
Firefox62+✓ FullSince 2018
Edge17+✓ FullSince 2018
IE11-✗ NoneNo support

Coverage: 97%+ of global users support variable fonts

Fallback Strategy

Progressive Enhancement Approach:

/* Static fonts for old browsers */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/font-bold.woff2') format('woff2');
  font-weight: 700;
}

/* Variable font for modern browsers */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'MyFont';
    src: url('/fonts/font-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
  }
}

Feature Detection

/* JavaScript detection */
if ('fontVariationSettings' in document.body.style) {
  // Variable fonts supported
  console.log('Variable fonts available');
} else {
  // Use static fonts
  console.log('Fallback to static fonts');
}

Finding and Using Variable Fonts

Free Variable Fonts

Google Fonts

Growing collection of variable fonts. Filter by "Variable" in font properties.

Examples: Roboto Flex, Inter, Recursive, Crimson Pro

GitHub Variable Fonts Repository

Curated collection of open-source variable fonts

v-fonts.com

Showcase and testing site for variable fonts

Commercial Variable Fonts

Adobe Fonts

Included with Creative Cloud subscription

MyFonts / Fonts.com

Large selection of commercial variable fonts

Type Network

High-quality variable font foundry

Inspecting Variable Fonts

Before using a variable font, inspect its axes:

  • • Use Wakamaifondue.com - upload font to see all axes and ranges
  • • Check font specimen page for axis details
  • • Test in v-fonts.com playground
  • • Read font documentation for recommended values

Best Practices and Considerations

Implementation Checklist

  • ☐ Compare variable font size to static fonts you need
  • ☐ Test in all target browsers
  • ☐ Provide static font fallback for IE11 if needed
  • ☐ Use font-weight range in @font-face (100 900)
  • ☐ Include font-display: swap
  • ☐ Document which axes are available
  • ☐ Test performance with PageSpeed Insights
  • ☐ Configure proper cache headers (1 year)
  • ☐ Consider preloading for critical fonts

Performance Recommendations

  • • Use variable fonts when you need 4+ weights/styles
  • • Self-host for best performance (no CDN latency)
  • • Subset if you don't need all characters
  • • Preload variable font if used above-the-fold
  • • Monitor file size - some variable fonts are larger than expected

Common Pitfalls

Pitfall: Assuming smaller file size

Some variable fonts are larger than 2-3 static fonts. Always compare sizes.

Pitfall: Overusing animation

Animating font properties can be distracting. Use sparingly for effect.

Pitfall: Forgetting fallbacks

IE11 and very old browsers need static font fallbacks.

Future of Variable Fonts

Variable fonts are becoming the standard for web typography:

  • • More fonts being released as variable-first
  • • Browser support now universal (except IE11)
  • • Design tools adding better variable font support
  • • New axes being standardized (GRAD, XTRA, XOPQ, YOPQ)
  • • Expect variable fonts to replace static fonts for new projects

Summary: Variable Fonts

Variable fonts revolutionize web typography by storing all weight/width variations in a single file through interpolation technology. One 82 KB variable font replaces four 53 KB static fonts, reducing file size by 62% and HTTP requests by 75%. Combined with infinite design precision and smooth animations, variable fonts offer compelling advantages for modern web projects.

With 97%+ browser support, variable fonts are production-ready for most projects. Use them when you need 4+ weights, implement with font-weight ranges and font-variation-settings, provide static font fallbacks for IE11 if needed, and always test file sizes against static alternatives. Variable fonts represent the future of web typography—embrace them for performance, flexibility, and creative possibilities.

Sarah Mitchell

Written & Verified by

Sarah Mitchell

Product Designer, Font Specialist