Typography definition
Typography is the craft of choosing and arranging type so text is easy to read and its hierarchy is obvious. It covers typeface, size, line height, line length and spacing. On a website it also covers how fonts load and how text scales between screen sizes.
Typography decides how text looks and how easily it reads: which typeface you use, how big it is, how much space sits between lines and letters, and how long each line runs. Most of a website's content is text, so typography does a large share of the design work before a single image has loaded.
What does typography include?
- Typeface and font. A typeface is the design, such as Inter. A font is one specific weight or style of it, such as Inter Semibold. In everyday use people swap the two words, and nobody minds.
- Size and hierarchy. Headings, body text and captions need sizes far enough apart that a reader sees the structure at a glance.
- Line height, also called leading. Body text usually reads well at roughly 1.4 to 1.6 times the font size. Large headings need much less.
- Line length, or measure. Robert Bringhurst's often quoted range is 45 to 75 characters per line for body text. In CSS, max-width: 65ch gets you close.
- Tracking and kerning. Tracking changes the spacing across a whole run of text, kerning the spacing between specific letter pairs.
How does typography work on a website?
Fonts on the web are files the browser has to download. If they arrive late, the page renders in a fallback font first and the text jumps when the real one swaps in. Self-hosting WOFF2 files, preloading the one or two fonts the first screen needs and setting font-display keep that jump small. A variable font puts several weights in one file, which pays off once a design uses more than a couple of weights.
Text also has to work from a phone to a wide monitor. Instead of setting a heading size at every breakpoint, CSS clamp() lets it grow with the viewport between a minimum and a maximum, for example font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem). Keeping rem in the formula means the visitor's own browser font size setting still has an effect.
Is typography the same as choosing a font?
Choosing the typeface is one decision out of many. Two sites set in the same font can read completely differently because of their size steps, spacing and line length. When body text feels tiring to read, check the line length and line height before you start shopping for a new font.
Related terms
- BreakpointA breakpoint in web design is a screen or container width at which a responsive layout changes, for example from one column to three. Breakpoints are set in CSS with media queries or container queries. In programming, a breakpoint is also a marker that pauses code in a debugger.
- Web accessibilityWeb accessibility means building websites that people with disabilities can perceive and operate, whether they listen to the page through a screen reader or navigate it by keyboard alone. It is measured against the WCAG guidelines, usually at level AA.
- KeyframeA keyframe is a point in an animation where you define exactly how something looks, such as its position, scale or opacity. The software or browser calculates the frames in between. In CSS, the @keyframes rule lists those points for an animation.