A variable font is a single font file that contains multiple variations of a typeface — such as different weights, widths, slants, and optical sizes — all within one compact file. Instead of loading separate files for Regular, Bold, Light, etc., a variable font uses axes (like wght for weight or wdth for width) that can be adjusted continuously across a range. This technology, introduced in OpenType 1.8 (2016), saves bandwidth and gives designers fine-grained control over typography on the web.

Registered axes (standardized across fonts) include:
• wght — Weight (100–900, e.g. Thin to Black)
• wdth — Width (narrow to wide, often 50–200)
• slnt — Slant (oblique angle, typically -15° to 0°)
• ital — Italic (0 = off, 1 = on)
• opsz — Optical Size (designed for specific point sizes, e.g. 8–144)
• GRAD — Grade (strokes thicken without changing width)
Many fonts also expose custom axes like SOFT, WONK, CASL, or MONO for unique stylistic control.

Use the font-variation-settings property to control axes directly:
font-variation-settings: 'wght' 700, 'wdth' 85, 'slnt' -5;

For the wght axis specifically, you can also use the standard font-weight property, and for slnt you can use font-style: oblique. However, font-variation-settings gives you full control over all axes simultaneously. Always provide a fallback font-weight for older browsers. Use this tool above to generate the exact CSS you need!

Variable fonts are supported in all modern browsers: Chrome 66+, Firefox 62+, Safari 11+, Edge 17+, and Opera 53+. Mobile browsers on iOS 11+ and Android also support them. Global browser support is now over 96%. For older browsers, you can serve static font fallbacks using @supports queries.

The Optical Size axis (opsz) adjusts the design of a typeface to look its best at a particular size. At small point sizes (e.g. 8–12px), fonts with optical sizing will subtly increase x-height, open up counters, and reduce stroke contrast for better legibility. At large display sizes (e.g. 72px+), the same font will show finer details, higher stroke contrast, and more elegant proportions. Set opsz close to your actual font size for the best typographic result.

Smaller total file size: A variable font file replaces multiple static files (Regular, Bold, Italic, Bold Italic, etc.) with a single, often smaller file — especially beneficial when using many weights or styles.
Unlimited precision: Choose any weight between 100–900, not just the 9 standard increments. Need a weight of 437? Variable fonts can do that.
Creative freedom: Animate font variations smoothly with CSS transitions, create responsive typography that adapts to screen size, or fine-tune readability with axes like Grade and Optical Size.

The Grade axis (GRAD) in Roboto Flex adjusts stroke thickness without changing the glyph width or affecting line breaks. This is different from wght, which may slightly alter glyph widths. Grade is perfect for maintaining consistent layout while compensating for different rendering backgrounds (e.g., light text on dark backgrounds may appear thinner and benefit from a positive grade). Roboto Flex's GRAD range is -200 to 150.