20 Sat Jun 2026
Optical sizing in variable fonts
Notes on how the `opsz` axis changes letterforms at different sizes, and why Newsreader and Fraunces look so good in long-form.
Quick notes while researching blog fonts.
What opsz does
Optical sizing adjusts contrast and detail based on the rendered size. Small text gets sturdier strokes and more open spacing; large text gets finer detail and tighter spacing. Fonts like Newsreader and Fraunces expose an opsz axis you can drive with font-optical-sizing: auto or manually via font-variation-settings.
Why it matters for a blog
- Body copy stays legible at 16–18px.
- Headings get the expressive, high-contrast look without a second font file.
Takeaway: a single variable serif can cover both body and display roles if it has an optical-size axis.
Written by
Dubem Izuorah
Design Engineer
With over 10 years of experience in design and software engineering, I build tools for startups across various industries, with a special focus on marketing tools that support businesses around the world. Lately I'm focused on the Human ↔ AI work loop, helping people collaborate with AI to do great work.