Typography-led · 2016–present
Variable Font
OpenType variable fonts expose typographic axes — weight, width, optical size, slant — that can be animated or tuned continuously via CSS.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(97% 0 0) - --fg
oklch(10% 0 0) - --muted
oklch(46% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(94% 0 0) - --border
oklch(88% 0 0) - --accent
oklch(40% 0.24 264) - --accent-fg
oklch(99% 0 0) - --focus
oklch(44% 0.24 264)
| Token | Value |
|---|---|
| --font-body | 'Fraunces', Georgia, serif |
| --font-display | 'Fraunces', Georgia, serif |
| --font-mono | 'Fraunces', Georgia, serif |
| --radius | 8px |
| --radius-sm | 5px |
| --shadow | 0 1px 3px oklch(10% 0 0 / 0.07) |
| --shadow-lg | 0 12px 36px -6px oklch(10% 0 0 / 0.14) |
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
:root {
--bg: oklch(97% 0 0);
--fg: oklch(10% 0 0);
--muted: oklch(46% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(94% 0 0);
--border: oklch(88% 0 0);
--accent: oklch(40% 0.24 264);
--accent-fg: oklch(99% 0 0);
--focus: oklch(44% 0.24 264);
--font-body: 'Fraunces', Georgia, serif;
--font-display: 'Fraunces', Georgia, serif;
--font-mono: 'Fraunces', Georgia, serif;
--radius: 8px;
--radius-sm: 5px;
--shadow: 0 1px 3px oklch(10% 0 0 / 0.07);
--shadow-lg: 0 12px 36px -6px oklch(10% 0 0 / 0.14);
}Where it came from
Origin: OpenType 1.8 variable font specification, published September 2016
The OpenType variable font specification was published in September 2016 as a joint effort by Apple, Google, Microsoft, and Adobe. A single file replaces an entire font family. Major browsers shipped font-variation-settings support across 2017–2018. Designers quickly began using the weight and width axes for hover effects, responsive sizing, and scroll-driven animations that static fonts cannot achieve.
How to spot it
- font-variation-settings to set any axis continuously, not in steps
- Weight or width shifts on hover, scroll, or input focus
- A single font file covering the full family range
- Optical size axis (opsz) for readable small sizes and elegant large display
Trade-offs
| Strengths | Weaknesses |
|---|---|
| One network request for the entire type system | Variable files are larger than a single static weight |
| Smooth animated interpolation impossible with static fonts | Not all axes are available in every font |
| Exact per-breakpoint weight tuning without extra files | Without careful design intent the variation reads as a technical demo |
In the wild
- Hover effects that thicken from light to black
- Responsive headlines that narrow on small screens
- Kinetic typography installations and interactive posters
Use it when
Typography is a live, interactive part of the experience — not just static text setting.