CSS
Practical CSS Typography Examples
Copy-ready CSS patterns for web typography: a type system with custom properties, fluid headings, readable articles, tabular numbers and more.
Learn
Typography guides
Practical, no-nonsense articles on choosing fonts, pairing typefaces and setting type for the web, each linked to a tool so you can try the idea straight away.
Performance
Improving Web Font Loading Performance
How to load web fonts quickly and without layout shifts: fewer files, WOFF2, font-display, preloading, subsetting, self-hosting and fallback tuning.
Principles
Website Typography Design Principles
Eight principles that make website typography clear, consistent and pleasant to read, from hierarchy and rhythm to contrast and restraint.
Readability
Line Height and Letter Spacing Explained
How line height, letter spacing and line length affect reading comfort, with sensible starting values and the CSS to apply them.
Readability
Choosing Readable Font Sizes for the Web
How large should body text be? A practical guide to base sizes, heading scales, rem units and responsive type.
Choosing fonts
Serif vs Sans-Serif Fonts: What Actually Matters on Screens
The old rule says sans-serif for screens and serif for print. Modern displays have changed that. Here is what to consider instead.
Pairing fonts
Heading and Body Font Combinations: Best Practices
Why some font pairings work and others clash, with practical rules for combining a heading font and a body font.
Choosing fonts
How to Choose Fonts for a Website
A practical, step-by-step process for choosing website fonts that are readable, fit your brand and load quickly.