Introduction

This series is not a typography theory course.

There is no history of the printing press, no tour of letterform anatomy, no design-school primer on the difference between a serif and a slab serif. If that is what you came for, this is not it.

What this series is about is the set of small decisions every developer makes whether they think about it or not. What font size should body text be. How wide should a paragraph run before it gets hard to read. How much space goes between lines. Which two typefaces sit together without fighting. How to load a custom font without the page jumping. And underneath all of that, which HTML element a piece of text should actually be.

Two tracks

The series runs on two tracks that are usually taught apart and then left to coexist.

The design track is the visual half. It starts with a type scale, a fixed set of sizes with a consistent ratio between them, and moves through line length, the vertical spacing that gives a page its rhythm, pairing typefaces, and the performance cost of shipping a custom font. These chapters are about making type look intentional and hold together across screen sizes.

The semantics track is the structural half. It covers the HTML elements responsible for text and what each one actually claims about the content inside it. Heading levels are a document outline, not a size menu. <em> and <strong> are not styling tools. The track ends on the distinction that runs under all of it: the element you choose says what the content is, and CSS says how it looks. Those are two different jobs.

Who this is for

You can set a font-size. You have written a line-height and picked a number that looked fine. You have probably never sat down and worked out why one number is better than another, or built a scale on purpose instead of adding sizes as you went.

That is the gap. You know the properties. You have never used them as a system. This series closes the distance between the two.

What you’ll have at the end

A type scale built on named tokens (--text-base, --text-xl, and the rest) that you can drop into any project without re-deriving the numbers. A measure that keeps lines at a readable width. A line-height that fits the type instead of a guess. A font pairing that works. And a loading strategy with a concrete shape: a <link rel="preload"> in the document head and font-display: swap on the face declaration, so the page text is visible immediately and the custom font slots in without shifting the layout.

On the semantics side, you will leave with a working vocabulary for what every text element in HTML is actually claiming, so you reach for the right one without having to look it up.

Where to start

Start with Chapter 01, type scale and anchor point. It sets the base size and the ratio that every other design decision builds on. If you are auditing existing markup rather than setting type, the semantics track stands on its own, but the design track is the more natural place to begin.