Variable Fonts Explained: What They Are & How to Use Them
Variable fonts are the biggest evolution in web typography since the introduction of `@font-face`. A single variable font file can contain an entire range of weights, widths, and styles that would traditionally require loading many separate font files. Here's how they work and how to start using them today.
What Are Variable Fonts?
Variable fonts are an extension of the OpenType font specification (OpenType 1.8+) that stores a continuous range of design variations within a single font file instead of requiring separate files for each weight, width, or style. A traditional font family like Roboto might need 12 separate files to cover all its weights from Thin to Black — a variable version of Roboto contains all of those weights and every value in between in just one file. The technology works by defining master designs at the extremes (for example, weight 100 and weight 900) and mathematically interpolating every value between them. Variable fonts were jointly developed by Apple, Google, Microsoft, and Adobe and are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The file format uses either TrueType (`.ttf`) or WOFF2 (`.woff2`) containers, with WOFF2 being the recommended format for web delivery due to its superior compression.
How Variable Fonts Work: Axes of Variation
Variable fonts define "axes" — dimensions of variation that can be adjusted independently. The five registered (standardized) axes are: weight (`wght`, ranging from 1 to 999), width (`wdth`, percentage of normal width), slant (`slnt`, degrees of forward lean), italic (`ital`, a binary toggle between roman and italic), and optical size (`opsz`, which adjusts letterform details based on rendered size). Weight is the most commonly implemented axis — instead of being limited to predefined steps like 400 and 700, you can set `font-weight: 450` or `font-weight: 625` for precise typographic control. Optical size is a powerful but underused axis: at small sizes the font opens up its counters and increases x-height for legibility, while at large sizes it adds fine details and tighter spacing for elegance. Beyond registered axes, font designers can create custom axes for any design variable — for example, the Recursive font includes a "Casual" axis that transitions between a traditional sans-serif and a hand-drawn style. Each axis has a minimum, default, and maximum value defined by the font designer, and you can set any value within that range.
Benefits of Variable Fonts
The most immediate benefit is file size reduction — loading a single variable font file of 50-80KB replaces what might be 6-12 individual font files totaling 150-300KB. This translates directly to faster page loads, fewer HTTP requests, and improved Core Web Vitals scores, particularly Largest Contentful Paint (LCP). Variable fonts unlock design possibilities that were previously impractical: you can use weight 350 for body text and weight 650 for emphasis, dialing in exactly the visual hierarchy you want instead of settling for the closest predefined weight. Responsive typography becomes elegant with variable fonts — you can smoothly adjust weight or width based on viewport size using CSS `clamp()` or media queries, creating text that adapts fluidly to any screen. Animation is another powerful capability: because variation axes are continuous, you can smoothly animate between weights, widths, or custom axes using CSS transitions or keyframe animations. Variable fonts also simplify your CSS by reducing the number of `@font-face` declarations and letting you use a single `font-family` name across all variations.
How to Use Variable Fonts in CSS
Load a variable font with a standard `@font-face` rule, but specify a range for variable properties: `font-weight: 100 900` tells the browser this single file covers all weights from 100 to 900. Use the standard CSS properties when the axis has a registered mapping — `font-weight` for the weight axis, `font-stretch` for width, and `font-style: oblique -12deg 0deg` for slant. For fine-grained or custom axis control, use the `font-variation-settings` property: `font-variation-settings: 'wght' 425, 'wdth' 95, 'opsz' 16` sets multiple axes simultaneously. The `font-optical-sizing: auto` property enables automatic optical size adjustment based on the computed `font-size` — this should be turned on by default in most browsers but is worth declaring explicitly. For animation, variable axes can be transitioned smoothly: `transition: font-variation-settings 0.3s ease` creates fluid weight or width changes on hover. Keep in mind that `font-variation-settings` is a low-level property that overrides values as a whole — if you set `font-variation-settings: 'wght' 700`, it resets all other axes to their defaults, so always include every axis you want to control in a single declaration.
Best Variable Fonts to Try
Inter Variable is the essential starting point — it includes weight (100-900) and optical size axes, making it the most practical variable font for general web design. Roboto Flex takes variable fonts to the extreme with 12 axes including weight, width, optical size, grade, and several custom axes for fine-tuning letterform details. Source Sans 3 Variable from Adobe offers weight and italic axes with exceptionally clean hinting, making it reliable across all operating systems and screen types. Recursive is a showcase of variable font possibilities with five axes — weight, casual, slant, cursive, and monospace — letting a single font file serve as both a sans-serif and a monospace font. Fraunces is a beautiful variable serif with weight, optical size, and a custom "wonk" axis that controls how playful or formal the letterforms appear. To explore the full range of available variable fonts, visit v-fonts.com or the Google Fonts catalog filtered by variable fonts, and use your browser's DevTools to experiment with axis values in real time.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.