The Invisible Art of Typography
There are many books and articles on typography, but I think many still fail to take full advantage of all the features available to create great type on the web.
To illustrate how much difference good typography makes, I’ve put together a little demo site where you can toggle the crafted typography on and off, along with the OpenType features that control how typefaces display specific things like lining numbers, small caps, and stylistic effects.
You can also simulate slow loading and ensure that the fallback fonts are as close as possible to the final experience to minimize cumulative layout shifts (CLS) and content jumping during load.
Take a look at christofersandin.com/typography – toggle things on and off and see if you can both see and feel the difference.
Please note, the article itself is quite informative and includes a few great resources. But it’s not written by me — rather, it’s generated from the typography articles I’ve collected over many years, since the main point of this exercise was to display great typography, not the article content itself.
Resources
Craft and OpenType features
- Butterick’s Practical Typography by Matthew Butterick
- The Elements of Typographic Style Applied to the Web by Richard Rutter
- OpenType font features guide by MDN
- The Complete CSS Demo for OpenType Features
- Caring about OpenType features by Typekit Practice
- Problems solved by OpenType by Roel Nieskens, CSS Day 2024
- Features of your font you had no idea about by OlegWock
- Web Typography: Designing Tables to be Read, Not Looked At by Richard Rutter, A List Apart
- Introducing TODS – a typographic and OpenType default stylesheet by Richard Rutter
- Wakamai Fondue – see which features a font actually supports
Font loading and fallbacks
- Improved font fallbacks by Katie Hempenius, Chrome Developers
- Fallback Font Generator by Brian Louis Ramirez
- Capsize – metric-matched fallbacks and predictable text sizing
- CSS font-size-adjust is now in Baseline by web.dev
- Modern Font Stacks
- Fast & Smooth Third-Party Web Fonts by Scott Jehl
- The Ultimate Guide to Font Performance Optimization by DebugBear
- Deep dive CSS: font metrics, line-height and vertical-align by Vincent De Oliveira