Typography is Design: How Font Choices Make or Break Your UI
Typography accounts for 95% of web design — most interface content is text. Yet developers treat fonts as afterthoughts, defaulting to system fonts or the first Google Font they find. This guide covers the typography principles that separate amateur from professional interfaces.
Information Architects, a Swiss web design agency, famously stated: "Web design is 95% typography." This isn't hyperbole — visit any website and ask what you actually see: text. Headlines, paragraphs, buttons, labels, navigation, and content. The text is the interface. Everything else — colors, images, spacing — supports the text. Yet most developer-built interfaces use: the browser default (Times New Roman or system font), a randomly selected Google Font ("Inter looked nice in the preview"), and inconsistent sizing ("this heading feels like it should be bigger, so... 28px?").
The Type Scale: Consistency Without Decisions
A type scale is a predefined set of font sizes that creates visual harmony. Instead of choosing sizes ad-hoc (14px here, 18px there, 24px somewhere else), use a mathematical ratio to generate a consistent scale. The classic major second ratio (1.125): 12px, 13.5px, 15.2px, 17.1px, 19.2px, 21.6px, 24.3px, 27.3px, 30.7px. Rounded: 12, 14, 15, 17, 19, 22, 24, 27, 31.
Assign semantic names: text-xs (12px), text-sm (14px), text-base (16px — your body text), text-lg (18px), text-xl (20px), text-2xl (24px), text-3xl (30px), text-4xl (36px). Every text element in your application uses one of these sizes. No exceptions. No "just make this one 23px." The constraint produces harmony.
Font Pairing: The Two-Font Rule
Most professional designs use exactly two fonts: one for headings and one for body text. The pairing should create contrast without conflict. Reliable pairings: Inter + Merriweather (clean sans-serif headings with readable serif body text — the "safe but excellent" choice). Outfit + Inter (geometric sans headings with humanist sans body — modern and clean). Playfair Display + Source Sans Pro (elegant serif headings with practical sans body — premium/editorial feel). Space Grotesk + DM Sans (distinctive tech headings with friendly body text — SaaS/startup aesthetic).
The anti-pattern: using three or more fonts. Every additional font reduces visual cohesion and increases cognitive load. If you need emphasis within a single font, use weight variations (regular, medium, semibold, bold) rather than introducing another font family.
Line Height, Letter Spacing, and Measure
Line height (leading): Body text needs 1.5-1.75 line height for readability (CSS: line-height: 1.6). Headings need tighter line height (1.1-1.3) because they're short bursts rather than flowing text. Insufficient line height is the single most common typography error in developer-built interfaces — it makes text feel cramped and physically difficult to read.
Letter spacing (tracking): Body text: leave at default (0). Uppercase text (all-caps labels, buttons): add slight positive tracking (letter-spacing: 0.05em-0.1em) to prevent uppercase letters from feeling cramped. Large headings: slight negative tracking (letter-spacing: -0.02em) tightens the display for a more polished, editorial look.
Line length (measure): Optimal reading line length: 45-75 characters per line. Too short (30 characters): eyes return too frequently, creating a choppy reading experience. Too long (100+ characters): eyes lose track of which line to return to. Set max-width on text containers: max-width: 65ch (the ch unit = width of the "0" character, providing a character-based constraint).
Font Loading: Performance Matters
Google Fonts are free and convenient — but they add 50-200KB and potential layout shift (FOUT/FOIT). Optimization: use font-display: swap (shows fallback font immediately, swaps to custom font when loaded), preload your primary font (link rel="preload" as="font"), and self-host fonts when possible (eliminates the round-trip to Google's CDN). For performance-critical applications, system font stacks provide instant rendering with zero download: font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.
Typography transforms "developer project" into "professional product." The investment is minimal — choosing a type scale, selecting two fonts, and setting comfortable line heights — but the visual impact is disproportionate. Users can't articulate why an interface "feels professional," but typography is usually the answer. Make it intentional, and the professionalism follows.