Variable Fonts 2026

One font file that holds the whole weight spectrum (and optionally width, slant, optical size, and custom axes) with smooth interpolation between any value. The 2026 default for any brand that uses three or more weights, provided you subset and wire the axes correctly.

Design Position

Axes: registered vs custom

Registered axes are standardized: wght (100 to 900), wdth (50 to 200), slnt, ital, and opsz (optical size, roughly 8 to 144). Custom axes are font-specific, for example Recursive's CASL (casual) and MONO, or GRAD (grade: change weight without changing width).

Set registered axes through the high-level CSS properties (font-weight, font-stretch, font-style) because they inherit and compose correctly. Reserve font-variation-settings for custom axes only, since it does not inherit cleanly. Source: brainy.ink variable fonts in production, https://brainy.ink/paper/variable-fonts-in-production, 2026-05-31

Optical sizing

font-optical-sizing: auto lets the browser pick the right opsz from the rendered font-size: thicker strokes and looser spacing for captions, thinner strokes and tighter spacing for display. The canonical pairing is Inter Text versus Inter Display, but only if the project is actually using current Inter Font files from rsms/inter or an equivalent official distribution. A font that adds opsz as an afterthought rarely delivers a visible difference, so confirm the axis is a first-class feature before buying. Source: Kittl variable fonts 2026, https://www.kittl.com/blogs/why-variable-fonts-are-winning-fnt/, 2026-05-31; Inter Font

The performance math

A single Inter variable WOFF2 weighs about 95KB, roughly two static weights. So variable fonts win once you need three or more weights; for a single weight a static subset is smaller. Subsetting to Latin can drop a 95KB file to 30 to 40KB. Aim for under 50KB total on the critical path; if you exceed 100KB you are shipping glyphs, weights, or families you do not use. For Inter specifically, check Inter Font first: source the official release or inter-ui, then subset/self-host when the product needs performance or privacy control. Source: Web Perf Clinic font optimization 2026, https://webperfclinic.com/article/web-font-optimization-complete-guide-faster-loading-zero-layout-shift, 2026-05-31; Inter Font

Subsetting and loading

Subset with pyftsubset from fonttools. A full file may carry 3,000 glyphs; a Latin subset keeps around 250 for identical Latin output at a third the size. Ship the Latin subset by default and load language extensions only when the page contains matching characters via the unicode-range descriptor.

@font-face {
  font-family: "Inter";
  src: url("inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

Use font-display: swap (or optional), and eliminate layout shift on the fallback with the metric override descriptors ascent-override, descent-override, line-gap-override, and size-adjust so the swap causes no visible jump (protects CLS).

Responsive and brand use

The width and weight axes enable real responsive typography: headlines can thin slightly on large screens to hold visual weight, or a menu can condense width by 2 to 3 percent to fit one more character without a new file. For brand systems, do not expose the full range: constrain axis ranges to on-brand values and document which weights are allowed, the same discipline as any token. See Design System for the font triad rule, Fluid Typographic Scale for size, and tokenize allowed axes per Sigil Token Architecture.

Checklist

• Three or more weights of one family, otherwise prefer static.
• Subset to the character set you actually render.
• High-level properties for wght / wdth, font-variation-settings only for custom axes.
• font-optical-sizing: auto when the font has a real opsz axis.
• font-display: swap plus metric overrides on the fallback.
• Test on slow connections; monitor LCP and CLS.

---

Timeline

• 2026-07-01 | Design category refresh added this page to the CSS and platform primitives family, linked it to Design System Map, and kept it standalone because Variable Fonts 2026 owns a distinct design decision surface in this family. Source: User request, 2026-07-01
• 2026-06-01 | Free-font recommendations (Playwrite Tanzania, a free Inter-alternative grotesque) collected in Fonts — Picks & Free. Source: compiled from enrichment, 2026-06-01
• 2026-05-31 | Page created. Captured registered vs custom axes, high-level properties vs font-variation-settings, font-optical-sizing: auto (Inter Text/Display), the three-weight performance crossover and sub-50KB budget, pyftsubset plus unicode-range subsetting, font-display and metric-override CLS protection, and brand axis constraints. Source: Web Perf Clinic + brainy.ink + Kittl + MDN, 2026-05-31
• 2026-06-29 | Added Inter Font as the source-quality gate for Inter optical sizing and variable-font implementation: use official rsms/inter releases or inter-ui, not Google Fonts as the version authority. Source: User correction, 2026-06-29; GitHub rsms/inter