Design and Semantics for the Browser

Typography on the web splits into two problems that are usually taught separately and then left to coexist without much explanation. One is visual: how do you set type so it reads well, feels intentional, and holds together across a range of screen sizes? The other is structural: how do you mark up text so the browser, screen readers, and search engines understand what it means?

Both matter. The design decisions inform the semantic ones, and the semantic structure shapes what the design can do. A heading level is not just a size; it is a position in a document hierarchy. A line-height is not just a number; it is a decision about how much breathing room a reader gets. This series treats them together because that is how they work in practice.

The design track runs from the basics of type scale to the specifics of loading a web font without causing a layout shift. It covers measure and line length, vertical rhythm, typeface pairing, and the performance tradeoffs that come with custom fonts. These chapters assume you know some CSS but are not necessarily sure why the values you have been using work, or when they stop working.

The semantics track covers the HTML elements responsible for text: what heading levels actually signal, how paragraphs and lists behave, how to quote and cite correctly, and how to use emphasis and importance without flattening them into stylistic tools. This is not a rehash of the spec. It is about the decisions you make on a real page.

Nine chapters in total. Start with the design track if you are setting type for a project and need it to look right. Start with the semantics track if you are auditing markup or working somewhere accessibility is not optional. Reading both is what turns two separate checklists into a single mental model.