Font Variation Settings

Font variation settings is the CSS property that unlocks every axis inside a variable font file at runtime. You load a single OpenType 1.8 font that contains a default master and a set of delta tables. The font variation settings property then tells the browser exactly which coordinates to interpolate inside that design space. Write it like this: font-variation-settings: "wght" 475, "wdth" 105, "opsz" 16;. The browser does the math and draws the letterforms. Registered axes get four lowercase letter tags. wght controls weight from thin 100 to black 900. wdth changes width from condensed to extended. slnt sets slant usually in negative degrees for oblique. opsz adjusts optical size so glyphs actually change construction for 12 pixel captions versus 72 pixel headlines. ital moves continuously from roman to italic. Custom axes created by type designers use four uppercase letters. Recursive ships MONO that slides glyphs from proportional to monospaced and CASL that moves the stroke from formal to casual. These custom axes turn the font into multiple personalities inside one file. The entire system has been production ready since Safari 11 shipped in 2017. Chrome 66 Firefox 62 and Edge 17 followed quickly. In 2026 the only remaining edge cases sit in ancient Android WebViews. Teams still shipping four static cuts of their brand font in 2026 pay an invisible tax in requests and lost design range.

Font variation settings is not a font format on its own. It is not a replacement for choosing the right typeface for the job. It is not something every project needs. Drop the property on a static font and the browser ignores it because no variable data exists to interpolate. It is not the same as font-feature-settings. One controls axes. The other controls OpenType features like swashes or ligatures. Do not confuse them. The property is also not a magic performance bullet. A variable font that contains five custom axes can weigh more than three static files combined. You must audit and subset using tools like Fonttools. It is not required for simple marketing sites that ship two weights and never change them. Static files remain simpler in those cases. The property does not animate by itself. You still wrap it in CSS transitions or keyframes if you want smooth changes on hover or scroll. It does not solve bad type. A poorly hinted variable font looks bad at every axis setting.

Linear leaned hard on font variation settings during their 2025 interface overhaul. The entire product runs on Inter variable. Sidebar navigation sits at weight 510 with a -7 degree slant. That combination renders crisply at 12 pixels on every laptop screen the team tested. When an item becomes selected the CSS updates to weight 650 on the same element with zero additional network requests and no layout shift because the file was already loaded. The numbers come from design tokens so every engineer uses the exact same values across the app. Notion followed a similar path for their database views in 2024. Property labels use a lighter setting while column headers use a heavier precise value pulled from the variable file. The Recursive specimen page at arrowtype.com shows even more ambition. Drag the MONO slider and watch letters shift from nice kerning to fixed width character alignment in real time. The underlying CSS writes font variation settings values live to a style attribute. One file delivers marketing headlines, body copy and code blocks with brand coherence that static fonts cannot match. Apple built the opsz axis into SF Pro and ships it as the default across every iPhone iPad and Mac in 2026. Open a settings panel on iOS 18. The small text uses a different optical size master than the big toggle labels even though both come from the same variable font. The changes happen automatically based on size but you can force specific values in web projects that license similar fonts with opsz support. IBM took the corporate route with Plex. Their design system documentation lists exact font variation settings for every component level from microcopy at 11 pixels to hero statements at 80 pixels. Every IBM cloud product marketing page and internal tool respects those same axis values. The brand never fractures across surfaces.

Use font variation settings any time you have committed to a variable font and need control beyond what font weight and font style tags provide. The six question framework from the variable fonts guide helps you decide. First ask if your brand typeface already ships variable. If yes expose the key axes through CSS custom properties immediately. Second if you run a SaaS product start with Inter and tune it with specific wght and slnt values for different UI densities. Third if your code blocks need to feel like they belong to the same family as your prose then load Recursive and set the MONO and CASL axes where needed. Fourth always check what axes the font actually ships before you write a single line of CSS. Most Google Fonts variable versions only expose weight and italic. Fifth measure your performance budget. If you sit under 100 kilobytes for all fonts then subset aggressively with Fonttools or the Google Fonts API dropping unused glyphs and axis ranges you do not need. Sixth for any design system that lasts longer than one year commission or license a family built for variable from day one. Use the property to create hover states that ease between weights using transition: font-variation-settings 0.2s. Use it to match brand guidelines that specify exactly 425 for body copy instead of the closest static cut. Use it inside scroll animations where text gains weight as it enters the viewport using modern scroll driven animation specs. The v fonts.com catalog lets you test every axis before you commit to a license so you never buy blind. Pair it with container queries so a component can adjust its own axis values based on available space.

Avoid font variation settings when your traffic includes more than five percent ancient browsers that lack support. Test those users separately with your analytics. Avoid it when your variable font file size after subsetting still exceeds the combined weight of the three static files you actually use by a large margin. Avoid it on campaigns that have fixed creative and ship in three weeks or less. The setup cost outweighs the benefit there. Static fonts work fine when you only ever need Regular and Bold. They work fine when the brand voice never requires intermediate stops or custom parameters the designer never intended. They work when your team lacks the design system maturity to maintain axis values across dozens of components and screen sizes. Audit your current font stack first. Count the requests in the network tab. Measure the bytes transferred. Look at the design moments where you wished you could land between two weights or adjust the optical size for better readability. Those moments tell you whether the property earns its place in your codebase this year.

Font variation settings turns one variable font file into every precise typographic choice your interfaces and brand need without the drag of multiple requests and fractured consistency.