---
title: "The Invisible Art of Typography"
description: "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…"
date: 2026-05-15
canonical_url: "https://christofersandin.com/texts/the-invisible-art-of-typography"
section: "Texts"
---

#  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](/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](https://practicaltypography.com/) by Matthew Butterick
- [The Elements of Typographic Style Applied to the Web](http://webtypography.net/) by Richard Rutter
- [OpenType font features guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide) by MDN
- [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/)
- [Caring about OpenType features](http://practice.typekit.com/lesson/caring-about-opentype-features) by Typekit Practice
- [Problems solved by OpenType](https://youtu.be/TreBK-EyACQ) by Roel Nieskens, CSS Day 2024
- [Features of your font you had no idea about](https://sinja.io/blog/get-maximum-out-of-your-font) by OlegWock
- [Web Typography: Designing Tables to be Read, Not Looked At](https://alistapart.com/article/web-typography-tables/) by Richard Rutter, A List Apart
- [Introducing TODS – a typographic and OpenType default stylesheet](https://clagnut.com/blog/2433) by Richard Rutter
- [Wakamai Fondue](https://wakamaifondue.com/) – see which features a font actually supports

**Font loading and fallbacks**

- [Improved font fallbacks](https://developer.chrome.com/blog/font-fallbacks) by Katie Hempenius, Chrome Developers
- [Fallback Font Generator](https://screenspan.net/fallback) by Brian Louis Ramirez
- [Capsize](https://seek-oss.github.io/capsize/) – metric-matched fallbacks and predictable text sizing
- [CSS font-size-adjust is now in Baseline](https://web.dev/blog/font-size-adjust) by web.dev
- [Modern Font Stacks](https://modernfontstacks.com/)
- [Fast & Smooth Third-Party Web Fonts](https://scottjehl.com/posts/async-fonts-foit/) by Scott Jehl
- [The Ultimate Guide to Font Performance Optimization](https://www.debugbear.com/blog/website-font-performance) by DebugBear
- [Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) by Vincent De Oliveira

---

## Metadata

  [\#article](/writing/article)

 Published .  
 Last modified .

 1 18 7 358