Variable Font Playground

A variable font is an OpenType font file that encodes multiple design variations—such as weight, width, optical size, and italics—in a single binary using the variable font specification introduced in OpenType 1.8 (2016). Instead of loading separate font files for Regular, Bold, and SemiBold, a variable font exposes numeric axes that interpolate between master designs. The CSS property font-variation-settings provides low-level axis control (e.g. font-variation-settings: 'wght' 625) while higher-level properties like font-weight: 625 are mapped automatically in supporting browsers.

The OpenType specification registers five standard axes using lowercase four-letter tags: wght (weight, range typically 100–900), wdth (width, percentage of normal where 100 = normal), ital (italic, binary 0 or 1 in most fonts), slnt (slant in degrees, negative = forward lean), and opsz (optical size, the point size the design is intended for). Custom axes use UPPERCASE tags and can encode anything the type designer chooses—CASL for casualness in Recursive, MONO for monospace grade in Recursive, or SOFT for corner softness in Raleway. Google Fonts exposes all supported axes for each variable family in its metadata API.

A variable font file is typically larger than a single static weight file but smaller than multiple static weight files combined. For example, loading Regular + Bold + SemiBold + Light as four separate static files might total 240 KB, while a single variable font covering the same range might be 180 KB. The performance advantage grows with the number of weights used. Variable fonts also enable smooth CSS transitions between font weights—animating font-weight from 400 to 700 produces a smooth typographic transition that was impossible with static fonts. Browser support for variable fonts covers all modern browsers as of Chrome 66, Firefox 62, Safari 11, and Edge 17.

Optical sizing is the practice of adjusting a typeface's design based on its intended display size. At small sizes (6–10 pt), type traditionally has thicker strokes, wider letter-spacing, and simplified details to maintain legibility. At large display sizes (48 pt+), strokes are thinner and details more refined because the eye has more resolution to work with. Variable fonts with the opsz axis encode separate masters for text and display sizes and interpolate between them. Setting font-variation-settings: 'opsz' 14 for body text and 'opsz' 72 for display text—or using the CSS font-optical-sizing: auto property—lets the browser choose the optimal design for the rendered size automatically.

Yes. The CSS font-variation-settings property is animatable and compositable, meaning you can transition or animate any axis value using CSS transitions or @keyframes animations. For example, transitioning from font-variation-settings: 'wght' 400 to font-variation-settings: 'wght' 700 on :hover produces a smooth weight change. The animation is computed entirely in the browser's compositor thread for fonts with hardware-accelerated text rendering, making it as performant as opacity or transform animations. Accessibility best practices recommend respecting prefers-reduced-motion and avoiding animations that cause significant layout shifts.