Static vs Variable Fonts: File Size, Flexibility, and Performance Compared

Variable Fonts: Continuous Design Space

A variable font encodes multiple design masters and the interpolation rules between them. The font file contains glyph outlines at the extremes of each axis (for example, weight 100 and weight 900), plus delta values describing how each glyph changes across the design space. The rendering engine interpolates between these masters at runtime to produce any intermediate value.

Inter-Variable.woff2      (font-weight: 100 900, font-style: oblique 0deg 10deg)
                           // replaces all 11 files above

The OpenType specification defines several standard variation axes, each identified by a 4-character tag:

Font designers can also define custom axes with any 4-character tag (lowercase = private, uppercase = registered). Examples include GRAD (grade, which adjusts weight without changing width), XHGT (x-height), and CASL (casual axis in Recursive).

Break-Even Point: The 3-Weight Rule

The break-even point depends on the specific font, but the general pattern holds: at 3 or more weights, a variable font is smaller than the equivalent static collection.

Static approach (12 files: 9 weights + 3 italics):
  Inter-Thin.woff2         24 KB
  Inter-Light.woff2        25 KB
  Inter-Regular.woff2      26 KB
  Inter-Medium.woff2       26 KB
  Inter-SemiBold.woff2     27 KB
  Inter-Bold.woff2         27 KB
  Inter-ExtraBold.woff2    27 KB
  Inter-Black.woff2        27 KB
  Inter-Italic.woff2       28 KB
  Inter-BoldItalic.woff2   29 KB
  Inter-LightItalic.woff2  27 KB
  Inter-MediumItalic.woff2 28 KB
  ─────────────────────────────
  Total:                  321 KB

Variable approach (1 file):
  Inter-Variable.woff2    ~95 KB

Saving: 226 KB (70% reduction)

However, browsers only download static files that are actually referenced in @font-face declarations and used on the page. If you only use Regular (400) and Bold (700), you download just 53 KB in static files versus 95 KB for the variable font. In that scenario, static fonts are more efficient.

Variable Fonts: Continuous Design Space

With a variable font that includes the weight axis, any value from 100 to 900 is valid, including 450, 550, 375, or any other intermediate value. The browser requests the exact value from the font engine, which interpolates between the design masters to produce a unique glyph at that precise weight.

/* Standard CSS property (recommended) */
.heading { font-weight: 650; }

/* font-variation-settings (low-level override) */
.heading { font-variation-settings: 'wght' 650; }

/* Multiple axes */
.hero-text {
  font-variation-settings:
    'wght' 550,
    'wdth' 85,
    'opsz' 32;
}

/* Optical size with fallback */
@supports (font-variation-settings: 'opsz' 24) {
  h1 { font-variation-settings: 'opsz' 48; }
  p  { font-variation-settings: 'opsz' 16; }
}

The CSS font-weight, font-stretch, and font-style properties map automatically to the corresponding variation axes when a variable font is loaded. You only need font-variation-settings for axes that do not have a corresponding CSS property (optical size, grade, custom axes).

@supports Fallback Strategy

If your audience includes users on browsers that predate variable font support (extremely unlikely for most projects), you can use the CSS @supports query to serve static fonts as a fallback:

/* Static fallback: loads for browsers without variable font support */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Variable font: only loads when supported */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Variable.woff2') format('woff2 supports variations'),
         url('/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
  }
}

In practice, this level of fallback complexity is rarely warranted. For most projects launched in 2024 or later, shipping only the variable font is the correct choice.

Transfer Size and Parse Time

Total transfer size determines download time on constrained connections (mobile, slow 4G). Variable fonts win on transfer size when replacing 3+ static files.

The parse time penalty is nearly always outweighed by the transfer size savings when using 3+ weights. A 200 KB variable font parsed once is faster than four 40 KB static fonts parsed sequentially.

Keyframe Animations

Variable font axes can be used in CSS @keyframes for more complex animation sequences:

/* Loading state animation */
@keyframes font-pulse {
  0%   { font-variation-settings: 'wght' 300; }
  50%  { font-variation-settings: 'wght' 700; }
  100% { font-variation-settings: 'wght' 300; }
}

.loading-text {
  animation: font-pulse 1.5s ease-in-out infinite;
}

/* Scroll-driven weight animation (modern CSS) */
@keyframes weight-increase {
  from { font-weight: 300; }
  to   { font-weight: 800; }
}

.hero-title {
  animation: weight-increase linear;
  animation-timeline: scroll();
  animation-range: 0 300px;
}

Weight animation is GPU-composited in most modern browser implementations, meaning it does not trigger layout reflow. However, some browsers may still trigger composite-only repaints. Test on target devices before using extensive weight animations on low-end mobile.

Choose Variable Fonts When

• You use 3 or more weights. The file size math favors variable at this threshold. The more weights you use, the greater the saving.
• You need animation or smooth transitions. Any requirement for animated weight, width, or slant requires a variable font. There is no alternative with static files.
• You are building a design system. Variable fonts allow designers to specify fine-grained weight values (450, 550, 625) that express precisely the intended visual weight without forcing developers to choose between adjacent static weights.
• Optical size matters for your content. Long-form reading content, editorial layouts, and body text at small sizes benefit from optical size axis support, which only a handful of static families emulate with separate optical size variants.
• Responsive or adaptive interfaces. If typography needs to respond fluidly to container width, scroll position, or user interaction, variable fonts are the correct tool.
• You want a single file to maintain. One file, one cache entry, one preload declaration, one place to update when the font is revised.

Using Variable Fonts in CSS

/* Use font-weight normally; it maps to wght axis automatically */
body    { font-weight: 400; }
h2      { font-weight: 600; }
h1      { font-weight: 750; }  /* Non-standard value, only works with variable font */
.label  { font-weight: 500; }

/* font-stretch maps to wdth axis */
.condensed { font-stretch: 85%; }
.extended  { font-stretch: 115%; }

/* Optical size: no CSS property exists for opsz */
body { font-variation-settings: 'opsz' 16; }
h1   { font-variation-settings: 'opsz' 48; }

/* Grade axis: adjusts weight without changing character width */
@media (prefers-color-scheme: dark) {
  body {
    /* Reduce grade slightly in dark mode: dark text appears heavier */
    font-variation-settings: 'GRAD' -25;
  }
}

/* WARNING: font-variation-settings does not inherit well.
   Setting it on a parent overrides ALL axes on children.
   Prefer standard CSS properties where available. */