Typography

Typography is the art and science of type design — the deliberate choice, arrangement, and application of type to convey content legibly, hierarchically, and aesthetically. In digital products, typography decides reading speed, comprehension, conversion, and brand perception — often more than colors or images. Good typography goes unnoticed; bad typography is immediately felt. Core elements: font family (serif for classic-authoritative feel, sans-serif for modern-clean, monospace for code), font size (16 px body text as mobile minimum, 18 px for good desktop readability), line height (1.5–1.7 for body text, 1.1–1.3 for headlines), letter spacing (tight for display, normal for body), text width (45–75 characters per line for optimal readability), contrast (WCAG 2.2 AA requires at least 4.5:1 for regular text, 3:1 for large text). Typographic hierarchy emerges from size, weight, color, and spacing. A clear hierarchy (H1 > H2 > H3 > body) automatically guides the eye through the content. Modern web projects use typography scales based on the modular-scale method (e.g., factor 1.25 or 1.333 per step) or fluid typography (clamp(min, ideal, max)) for responsive scaling without breakpoints. Technically: web fonts via Google Fonts, Adobe Fonts, or self-hosted. Performance rule of thumb: maximum 2–3 font families with 2–3 weights each (400, 600, 700 usually suffice). Font-display: swap prevents FOIT (flash of invisible text). Preload of critical fonts in the HTML head lifts LCP. Variable fonts (OpenType variations) deliver multiple weights in one file — 30–60% smaller total load time at the same flexibility. The most common mistakes: too many fonts, body text too small on mobile, lines too tight, poor contrast — all directly accessibility and conversion killers.