Typography is the practice of arranging and styling text so that it is legible, readable, and visually coherent within a design. In web design, typography goes far beyond simply choosing a font - it encompasses every decision that governs how text appears on screen, from the size and weight of headings to the spacing between lines of body copy.
Font Selection
The foundation of any typographic system is font selection. Web designers typically distinguish between typefaces - the overall design family, such as Georgia or Inter - and fonts, which refer to specific variations within that family, such as bold or italic. Choosing a typeface involves balancing aesthetic intent with practical concerns: a serif typeface like Times New Roman can convey authority and tradition, while a sans-serif typeface like Helvetica tends to read as clean and modern. For web use, designers also consider whether a font is available as a web font through services like Google Fonts or Adobe Fonts, or whether it must be self-hosted to ensure consistent rendering across devices and browsers.
Typographic Scale
A typographic scale is a structured set of font sizes used consistently throughout an interface. Rather than assigning arbitrary sizes to headings and body text, designers derive sizes from a mathematical ratio - common choices include a major third (1.25) or a perfect fourth (1.333). This creates a visual hierarchy that guides the reader's eye from the most important content to the least, and it forms a core part of any well-structured Design System. Consistent use of a scale prevents the visual noise that results from too many competing text sizes on a single page.
Line Height and Readability
Line height, also called leading, is the vertical space between lines of text. It has a direct and measurable impact on readability. Body text set too tightly feels cramped and fatigues the reader quickly, while text set too loosely loses the visual connection between lines, making it harder to follow. A line height of roughly 1.4 to 1.6 times the font size is a widely accepted starting point for body copy on the web. Closely related to line height is line length, or measure - lines that are too long force the eye to travel a great distance before returning to the start of the next line, while lines that are too short create a choppy, interrupted reading experience. A measure of 60 to 80 characters per line is generally considered comfortable for sustained reading.
Typography and White Space
Typography does not exist in isolation. It works in direct relationship with White Space - the empty areas surrounding and between text elements. Generous spacing around headings, paragraphs, and captions allows the typographic hierarchy to breathe and become legible at a glance. Neglecting this relationship, even with a well-chosen typeface and scale, tends to produce interfaces that feel dense and difficult to navigate. Thoughtful typography is therefore one of the most consequential decisions in web design, shaping how users perceive, trust, and engage with content.