Font Axis

A font axis is the lever that controls one aspect of a variable font across a continuous range. Released as part of the OpenType 1.8 spec in 2016 it lets a single file encode multiple masters and the deltas needed to interpolate between them. Set the value in CSS and the browser calculates the exact glyph shapes on the fly. The five registered axes are wght for weight, wdth for width, slnt for slant, opsz for optical size, and ital for italic. Custom axes open the door to wild expression. Recursive uses MONO to blend proportional to monospaced and CASL to shift from formal to casual construction. The voxel diagram from the variable fonts guide maps how these axes combine into complex design spaces that static fonts can never touch. One file gives you every point along those axes. Two static files give you two points and a whole lot of nothing in between. The mechanics are dead simple. The font holds a default master plus delta tables for every point on every glyph. Your runtime request tells the renderer exactly where to sit on each axis and the engine draws the result. No more six separate font downloads for Thin Regular Medium Bold Black and Italic. One payload does it all.

A font axis is not a post processing effect applied by CSS. The type designer has to draw the masters and the extremes or the axis has no data to interpolate. It is not limited to the five registered axes. Foundries create custom ones all the time to solve specific problems no generic solution can address. A font axis is not a replacement for choosing the right typeface in the first place. It cannot fix poor spacing or bad character shapes. It is not supported everywhere yet. While Safari 11, Chrome 66, Firefox 62 and Edge 17 brought broad support in 2018 very old Android WebViews still choke on them in 2026. It is not free lunch on file size. A variable font carrying four axes can be larger than a single static cut until you subset it down to exactly what you need with tools like fonttools. It is not an excuse to ignore typographic fundamentals. Dialing wght to 723 will not save you if your scale ratios are trash or your line height makes everything float.

Concrete example time. Recursive by Stephen Nixon from 2019 remains the canonical demonstration. Its MONO axis does the impossible by continuously adjusting glyph widths and spacing all the way from proportional to monospaced. Pair that with the CASL axis that modifies the stroke contrast and terminals and you have one file that can output formal marketing type, approachable body copy, and perfect code blocks that feel like they belong together. The site recursive.design lets you drag the sliders live and watch the letters morph in real time. Teams building developer tools love it because their prose and their code samples share the same DNA. Inter variable offers a more practical everyday example. Rasmus Andersson designed it specifically for UI with tight metrics at small sizes. Linear uses it for their entire interface dialing exact weights like 550 for active nav items without loading extra files. Notion does the same across dashboards and tables. Apple SF Pro leverages the opsz axis so that the same font file draws differently at caption size versus display size automatically based on the font-size you declare in CSS. No manual swapping. IBM Plex variable does the heavy lifting for their sprawling design system so a single brand appearance holds from 11 pixel table text in their cloud console all the way to 72 point headlines on conference stages. In CSS it looks like font-variation-settings: 'wght' 620, 'opsz' 32. The performance table in the main article shows the real win. One variable request plus the full axis range beats two or more static files every time once you factor in design flexibility and the ability to hit exact values instead of rounding to the nearest static stop.

Pull the trigger on font axes for any project that uses more than two styles or plans to live longer than six months. They cut your font related HTTP requests immediately and give you design precision no static font can match. Use the six question framework. Is your brand typeface already variable? Start there. Building a SaaS UI? Grab Inter variable and never look back. Need code that matches your prose? Recursive and its MONO axis are built exactly for that job. Need automatic optical adjustments like Apple ships in SF Pro? Any opsz enabled font gets you there. File size tight? Subset it to the exact axis ranges and glyphs you need using the Google Fonts API or fonttools. Long lived design system like IBM Plex? Commission variable from day one. In CSS you have two paths. The font-weight property maps automatically to wght on supporting fonts. Everything else lives in font-variation-settings with the four letter tags. Check v-fonts.com to audition axes before you commit any license dollars. Skip them only when you have one weight forever or your analytics show meaningful traffic from browsers that predate 2018 support. Never use an axis value the designer did not intend. Never assume they will fix bad typographic decisions upstream. Test at real sizes on real hardware because some interpolated values create strange counters or spacing at certain points.

Font axes give one variable font file more range than six static files ever could.