# Variable Font

> OpenType variable fonts expose typographic axes — weight, width, optical size, slant — that can be animated or tuned continuously via CSS.

- Category: Typography-led
- Era: 2016–present
- Origin: OpenType 1.8 variable font specification, published September 2016
- Lesson: https://design.dawit.dev/styles/variable-font
- Try it: https://design.dawit.dev/styles/variable-font?style=variable-font

## Where it came from

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

## Strengths

- One network request for the entire type system
- Smooth animated interpolation impossible with static fonts
- Exact per-breakpoint weight tuning without extra files

## Weaknesses

- Variable files are larger than a single static weight
- Not all axes are available in every font
- 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.

## Related styles
[Kinetic Type](https://design.dawit.dev/styles/kinetic-type.md), [Big Type](https://design.dawit.dev/styles/big-type.md), [Swiss Punk](https://design.dawit.dev/styles/swiss-punk.md)