Typography 101: Choosing Fonts That Speak Your Brand

Oliver Reichenstein, founder of iA, famously declared that "Web design is 95% typography." The claim sounds hyperbolic until you consider that the vast majority of information on the internet is written language. The typefaces you choose, how you size them, how you space them, and how you arrange them determine whether your content is read with pleasure, endured with effort, or abandoned in frustration.

Typography isn't about finding a pretty font. It's about choosing typefaces that communicate your brand's personality, creating visual hierarchy that guides readers through content, and ensuring readability across devices and contexts. Here's how.

Type Classification: Understanding the Families

Serif fonts (Times New Roman, Georgia, Garamond, Playfair Display) have small decorative strokes (serifs) at the ends of letter forms. They convey tradition, authority, elegance, and trustworthiness. Dominant in publishing, law, finance, and luxury branding. The serifs actually aid readability in long-form print text by creating a visual baseline that guides the eye.

Sans-serif fonts (Helvetica, Arial, Inter, Roboto, Open Sans) lack serifs, creating a cleaner, more modern appearance. They convey modernity, simplicity, approachability, and innovation. Dominant in technology, startups, healthcare, and digital-first brands. Sans-serif fonts are generally more legible on screens, especially at small sizes.

Display fonts (Lobster, Bebas Neue, Impact, Abril Fatface) are designed for headlines and large text. They have distinctive personalities — playful, dramatic, bold, elegant — but become unreadable at body text sizes. Use them for headlines and logos only, never for paragraphs.

Monospace fonts (Courier, Fira Code, JetBrains Mono) give equal width to every character. Originally designed for typewriters, they now signify code, technology, and technical precision. Used primarily in development environments and brands with technical identity.

Font Pairing: The Art of Combination

Most designs use 2-3 typefaces: a heading font, a body font, and optionally an accent font. The challenge is choosing fonts that contrast enough to create visual interest but share enough characteristics to feel cohesive.

The classic pairing: Serif headings + sans-serif body (or vice versa). This combination creates natural contrast between heading and body text while maintaining visual harmony. Example: Playfair Display headings + Source Sans Pro body — the serif's elegance for headlines, the sans-serif's clarity for reading.

The superfamily approach: Use fonts from the same "superfamily" — typeface families designed to include both serif and sans-serif variants that share underlying proportions. Examples: Merriweather + Merriweather Sans, Roboto + Roboto Slab, Noto Serif + Noto Sans. These pairs are guaranteed to work together because they were designed as companions.

What to avoid: Two fonts from the same classification that are too similar (two different sans-serifs that look almost identical — they create visual confusion without clear contrast). Fonts with clashing personalities (a playful handwritten font paired with a rigid geometric sans-serif). More than three typefaces in one design (every additional font adds visual noise).

Typographic Hierarchy: Guiding the Reader's Eye

Hierarchy is the system of visual differences that tells readers what to read first, second, and third. Without hierarchy, all text feels equally important — which means nothing feels important, and readers disengage.

Create hierarchy through: Size (larger text is read first). Weight (bold text draws attention before regular weight). Color (darker or higher-contrast text is read before lighter text). Position (top and left elements are read before bottom and right in Western languages). Spacing (elements with more surrounding white space receive more attention).

A typical web hierarchy: H1 (page title) — 32-48px, bold, high contrast. H2 (section headers) — 24-32px, bold or semi-bold. H3 (subsection headers) — 18-24px, semi-bold. Body text — 16-18px, regular weight. Captions and metadata — 12-14px, lighter color or weight.

Readability: The Non-Negotiable

A design can be beautiful and illegible. Readability is the non-negotiable foundation beneath all typographic choices.

Line length: Optimal line length for body text is 45-75 characters (including spaces). Shorter lines create too many line breaks, disrupting reading flow. Longer lines make it difficult to track from the end of one line to the beginning of the next. On desktop, this typically means limiting content width to 600-800px.

Line height: Body text line height should be 1.4-1.8 times the font size. Tight line spacing makes text feel cramped and difficult to scan. Generous line spacing improves readability and creates the white space that makes pages feel breathable.

Contrast: Text must have sufficient contrast against its background for accessibility. WCAG 2.1 requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. Tools like WebAIM's contrast checker validate your color combinations instantly.

Typography is the invisible architecture of design — when it works, nobody notices it. When it fails, everybody does. Master the fundamentals of classification, pairing, hierarchy, and readability, and your designs will communicate with clarity and professionalism that sets them apart from the amateur default.