Typography in Web Design: Creating Hierarchy and Readability

Typography is the decision that shapes every other design decision on the page. Get it wrong — inconsistent sizes, poor contrast, lines too long to comfortably scan — and even a visually impressive layout will feel hard to read. Users won't know why they're leaving. They'll just leave.

Get it right and typography becomes invisible. Readers move through content without friction, hierarchy guides the eye from heading to subheading to body without conscious effort, and the personality encoded in the typeface choice reinforces the brand without the user noticing they noticed it.

This post covers how to build a typography system for a web product that holds up across screen sizes, creates genuine hierarchy, and makes your content easy to read — not just on a designer's 27-inch monitor, but on the phone a user is holding in one hand at 70% brightness on a Tuesday afternoon.

Why "Just Pick a Nice Font" Is Not a Typography Decision

Font selection is one part of typography. The rest of it — type scale, line height, line length, letter spacing, weight usage, hierarchy between heading levels — determines whether the design is readable and clear. A beautiful typeface with poor scale and line height will underperform a generic system font with a well-considered layout.

The specific failures that plague web typography most often:

Too many type sizes. If your design has nine different font sizes, readers cannot form a model of the hierarchy. Every heading-level decision was made independently, and the cumulative result is visual noise. A disciplined type scale constrains this.

Line length out of range. The optimal line length for comfortable reading is 45–75 characters (roughly 60–70 characters is the sweet spot). Shorter and the eye moves back too frequently. Longer and the reader loses their place when wrapping to the next line. Most web layouts run too wide on desktop — a full-width text container on a 1440px screen produces lines of 120+ characters.

Insufficient line height for body text. Body text needs more vertical breathing room than headings. A line height of 1.2 is appropriate for a large heading. The same line height on a paragraph of 16px text makes lines feel crammed and hard to track.

Weight used decoratively, not hierarchically. Bold weight carries attention. When bold is used for emphasis in five places per paragraph, it ceases to signal emphasis and starts to signal noise. The strongest signal in a type hierarchy is a single primary heading at the top, with everything else subordinated to it.

How to Build a Type Scale

A type scale is a set of predefined font sizes with a mathematical relationship between them. The most common ratios for web design are:

For most web products and marketing sites, the Major Third (1.25) or Minor Third (1.2) ratios produce a usable, legible scale without excessive contrast between levels.

Starting from a base of 16px (browser default, appropriate for body text):

Base:  16px  (body text)
sm:    14px  (captions, labels, helper text)
lg:    20px  (lead paragraphs, large body)
xl:    25px  (H3 or small section heading)
2xl:   31px  (H2 or sub-section heading)
3xl:   39px  (H1 or page heading)
4xl:   49px  (hero heading)

Implement this in CSS custom properties so scale changes propagate everywhere:

:root {
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:  1.25rem;    /* 20px */
  --text-xl:  1.563rem;   /* 25px */
  --text-2xl: 1.953rem;   /* 31px */
  --text-3xl: 2.441rem;   /* 39px */
  --text-4xl: 3.052rem;   /* 49px */
}

Every heading and text element references a variable — no hard-coded font-size: 28px scattered across component files.

Font Pairing: What Works and Why

Most web products need two typefaces at most: a heading font and a body font. Sometimes one typeface serves both roles well. Three or more typefaces on the same page almost never improve the design — they fragment the visual identity.

The principles for pairing that actually hold up:

Contrast in personality, harmony in weight. A geometric sans-serif heading paired with a humanist sans-serif body works because the structural difference is clear (geometric vs. humanist) but the weight range is compatible. A serif display font paired with a sans-serif body works for the same reason — one reads formal, one reads functional.

Match x-heights. The x-height is the height of a lowercase letter (specifically 'x'). Fonts with similar x-heights sit well together at the same size; fonts with very different x-heights create visual tension when mixed in the same line or paragraph.

Don't fight the system. For purely functional UI text (labels, input placeholders, table values, nav items), the system font stack — -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto — is fast, legible, and familiar. Adding a custom typeface for UI chrome only makes sense when brand differentiation at the component level is a design requirement.

Tested pairing combinations that work for product and marketing sites:

All of the above are available on Google Fonts and load without licensing cost.

If you want a typography system designed for your specific product — tested for readability, responsive across breakpoints, and built into a Figma design system for handoff — the StartupSphare design team builds this as part of every UI engagement.

Line Height, Letter Spacing, and Line Length

These three properties are where the actual reading experience lives. Font selection and scale get the credit, but line height, letter spacing, and line length are what make the difference between text that's comfortable to read for five minutes and text that makes you skim after one paragraph.

Line height

/* Body text — needs generous line height */
p {
  line-height: 1.6;   /* 25.6px at 16px base — comfortable for reading */
}

/* Headings — tighter, because large text is easier to track */
h1, h2 {
  line-height: 1.1;
}

h3, h4 {
  line-height: 1.25;
}

The larger the font size, the tighter the line height can be. A 48px heading at line-height: 1.6 has 76px of space between lines — so much vertical space that it looks like separate items, not a unified heading. A body paragraph at line-height: 1.2 has 19px of space between lines — not enough for the eye to comfortably track from the end of one line to the start of the next.

Letter spacing

Body text at 16px should have little to no letter-spacing modification — it was designed to be read at that size as-is. Where letter spacing matters:

• All-caps labels and UI elements — add letter-spacing: 0.05em to 0.08em to counteract the tightening effect of capitalisation
• Very small text (12–13px) — slight positive tracking (0.01em) improves legibility
• Display and hero headings at very large sizes — slight negative tracking (-0.02em to -0.03em) brings the characters visually closer together, which looks more intentional at large scale

Line length

Control line length with max-width on text containers, not on the page layout:

.prose {
  max-width: 65ch;  /* ch unit = width of '0' in current font — adapts to font size */
}

65ch produces lines of approximately 65 characters in most proportional typefaces — solidly within the comfortable reading range. For narrow columns (sidebars, pull quotes), 45ch. For wider editorial layouts with larger text, 72ch.

This is one of the most impactful single-line CSS changes in web typography and one of the least commonly applied.

Making Typography Responsive Without Breakpoint Hell

Responsive typography should not require ten separate breakpoint declarations with different font-size values for each heading at each screen width. CSS clamp() eliminates this:

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  /* Minimum: 32px | Fluid between | Maximum: 56px */
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  /* Body text scales only slightly — keeps it readable at all sizes */
}

clamp(minimum, preferred, maximum) produces a value that scales with the viewport width between the minimum and maximum bounds. On a 320px mobile screen, the heading is at or near 32px. On a 1440px desktop, it's at or near 56px. No media queries required.

The key rule: body text should scale only slightly (16px to 18px is sufficient across all viewports). Large display headings can scale aggressively. Scaling body text too aggressively on desktop is a common mistake — paragraphs at 20px on a 1440px screen read as oversized rather than comfortable.

Typography Checklist for Web Design

Before shipping a redesign or a new product, verify:

• A defined type scale exists — no ad-hoc font sizes outside the scale
• Maximum 2 typefaces in use across the product
• Body text is set at 16px minimum, with line-height 1.5–1.7
• Headings use line-height 1.1–1.25
• Text containers have max-width: 65ch or equivalent on prose content
• Responsive sizing uses clamp() — not separate breakpoint declarations per heading
• Colour contrast for body text meets WCAG AA (4.5:1 against background)
• Letter spacing applied to all-caps UI labels and very small text
• Bold weight reserved for hierarchy — not used decoratively mid-paragraph
• Typography tested at 320px (smallest common mobile) and 1440px (large desktop)
• Custom fonts loaded with font-display: swap to avoid invisible text during load
• System font stack used as fallback for all custom font declarations

FAQ: Typography for Web Designers and Founders

How many font sizes should a web product have?

Six to eight distinct sizes covers almost every use case in a digital product: small label text, body, large body or lead paragraph, three heading levels (H1–H3), and a display or hero size. Beyond eight, additional sizes are almost always redundant — two sizes that serve the same visual role but with slightly different px values. A constrained type scale is a design decision, not a limitation. The discipline is what makes the hierarchy legible.

Should we use Google Fonts or a paid typeface?

Google Fonts covers the majority of use cases for startup and growth-stage products without licensing cost. The performance gap between Google Fonts and self-hosted fonts has narrowed significantly with HTTP/2 and the font-display: swap attribute. For products where brand differentiation through typography is a strategic requirement — high-end B2C, luxury positioning, or strong brand IP — a paid typeface from a foundry like Klim, Commercial Type, or Fontsmith is worth the investment. For most products, Inter, Outfit, DM Sans, or Lato from Google Fonts are entirely appropriate.

What's the difference between typeface and font?

A typeface is the design — Inter, Playfair Display, Georgia. A font is a specific instance of that typeface — Inter Regular 16px, Playfair Display Bold 32px. In everyday use, the terms are used interchangeably and no one is wrong to do so. The distinction matters when specifying type for a design system: you are choosing a typeface, and the design system defines which fonts (specific weights and sizes) from that typeface are used and when.

How do we handle typography for multilingual products?

Latin typefaces often do not have glyphs for Devanagari, Arabic, CJK, or other scripts. For multilingual products, the approach is: use a typeface that covers your required scripts (Noto fonts from Google cover the broadest set), or use a Latin typeface with a script-specific fallback in the font-family stack. Test your type scale with your longest strings — German and Finnish strings are typically 30–40% longer than their English equivalents, which can break fixed-width layouts and cause overflow in buttons and labels.

Does typography affect SEO?

Not directly — search engines index text content, not its visual presentation. But typography affects readability, and readability affects user behaviour signals that do influence ranking: time on page, scroll depth, bounce rate, and return visits. A page that is hard to read loses readers before they finish it. A page with clear hierarchy, comfortable line length, and appropriate type scale holds attention longer. The SEO impact of good typography is indirect but real — it increases the probability that users read, share, and link to your content.

Typography is one of the design decisions with the highest leverage and the lowest visibility. When it's working, nobody talks about it. When it's broken — inconsistent sizes, text that's hard to read on mobile, no clear hierarchy between heading levels — it leaks users and damages trust in the product before they've evaluated a single feature.

If your product's typography needs a systematic overhaul — type scale, font selection, responsive sizing, and design system documentation — reach out to the StartupSphare design team. We treat typography as a design system component, not a series of one-off decisions.

Suggested internal links: UI/UX Design · Web Development · User Research for Startups · Contact Author: Abdul Rahaman Last updated: September 2026