What is typography and why does it matter in web design?

Typography is the craft of arranging text so that it is readable, clear and appropriate for its purpose. It covers the typefaces you choose, but also the size of the text, the space between lines and letters, the length of each line, the contrast between text and background, and the way headings, paragraphs and other elements relate to each other. On the web, typography is set with CSS and has to work across screens of every size, different operating systems and a wide range of readers. Because most websites are mostly text, typography does more to shape how a site feels and how easy it is to use than almost any other design decision.

Good typography goes unnoticed: people simply read, understand and move on. Poor typography makes them work harder, skim less effectively, trust the site less and leave sooner. In this article you'll learn what typography actually includes, how it differs on the web compared with print, why it matters for usability, accessibility, performance and brand, and how to set up a sensible typographic baseline in CSS that you can build on.

What Typography Actually Covers

People often use "typography" to mean "picking a font", but the font is only one part of it. Typography is the whole system of decisions that turns raw text into something people can read comfortably.

The main areas are:

• Typeface selection: Choosing the design of the letters, such as a serif, a sans-serif or a monospace face, and deciding how many to use.
• Size: Setting the base size for body text and a range of larger sizes for headings.
• Line height (leading): The vertical space between lines of text.
• Line length (measure): How many characters fit on one line before the text wraps.
• Spacing: Letter spacing, word spacing and the space between paragraphs and sections.
• Weight and style: Using bold, regular, light, italic and so on to create emphasis.
• Hierarchy: Making it obvious what is a heading, what is body text and what is secondary information.
• Alignment: Left-aligned, centred, right-aligned or justified text.
• Colour and contrast: Ensuring text stands out clearly from its background.

Each of these interacts with the others. A larger font size usually needs a slightly tighter line height in proportion. A longer line needs more line height so the eye can find the start of the next line. A light weight needs more contrast or a larger size to stay legible.

Typography vs Type Design

It helps to separate two jobs. Type design is the creation of typefaces: drawing each letter, spacing them and producing font files. Typography is the use of those typefaces to set text. As a web designer or developer you are almost always doing typography, not type design. You pick from existing typefaces and decide how they're set. For the vocabulary behind this, see the difference between a typeface and a font.

How Web Typography Differs From Print

Typography has a long history in print, and most of its principles carry over to screens. But the web adds some constraints that print designers never faced.

You Don't Control the Final Layout

A printed page has fixed dimensions. A web page might be displayed on a 360-pixel-wide phone, a 27-inch monitor or anything in between. Readers can also zoom, change their default font size, or override your styles entirely. Web typography has to be flexible: it should look good across a range of sizes rather than perfect at one.

Fonts Have to Be Delivered

In print, the fonts are embedded in the output. On the web, every custom font is a file the browser has to download before it can render text in that face. That affects page speed, and it means you need a fallback for the moment before the font arrives and for when it fails to load.

Rendering Varies

Windows, macOS, Android and iOS each rasterise text slightly differently. The same font at the same size can look heavier on one system and lighter on another. High-density screens make text much sharper than older low-resolution displays did, which has made thinner weights and finer serifs more practical, but you still need to test on real devices.

Text Is Live

Web text is real text. It can be selected, copied, translated, read aloud by a screen reader, indexed by search engines and resized by the reader. That's a huge advantage over text baked into images, and it's why you should almost always set text with HTML and CSS rather than as part of a graphic.

Why Typography Matters in Web Design

Readability and Comprehension

The primary job of text is to be read. Comfortable body size, sensible line length and adequate line spacing let people read for longer without fatigue. When any of these is off, readers slow down, lose their place between lines or give up. On content-heavy sites, such as blogs, documentation and news, this has a direct effect on whether people finish what they started.

Scanning and Navigation

Most people scan web pages before they read them. A clear typographic hierarchy, with headings that look distinctly different from body text and consistent styles for lists, captions and labels, helps them find what they're looking for. If every piece of text looks the same, there's nothing for the eye to latch onto.

Accessibility

Typography is central to accessibility. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at Level AA. They also require that text can be resized up to 200% without loss of content or function, and that content still works when users increase line height, paragraph spacing, letter spacing and word spacing. Choices that seem purely aesthetic, such as very light grey text or fixed pixel line heights, can make a site unusable for some readers.

Trust and Brand

Type carries tone. A geometric sans-serif can feel modern and neutral, a classic serif can feel established and literary, a rounded face can feel friendly. Readers form impressions quickly, and typography is a big part of that first impression. Inconsistent or clumsy typography makes a site feel unfinished, even if the content is excellent.

Performance

Every font file adds weight to a page. Loading four families in six weights each can add hundreds of kilobytes and delay the moment text appears. Thoughtful typography means choosing fonts that do the job with as few files as possible, using modern formats such as WOFF2, and planning how text renders while fonts load.

The Building Blocks of a Typographic System

Rather than styling each element in isolation, it's better to define a small system that every page follows. A typical system includes:

1. A base font size for body text, usually the browser default of 16px or slightly larger.
2. A base line height, often between 1.4 and 1.7 for body text.
3. A type scale, a set of sizes for headings and smaller text that relate to each other in a consistent ratio.
4. One or two typeface families, with a defined set of weights.
5. A maximum line length for running text, commonly around 60 to 75 characters.
6. A spacing rhythm for the gaps between paragraphs, headings and sections.

CSS custom properties make this kind of system easy to maintain. Here's a minimal example:

:root {
  /* Typefaces */
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Sizes, based on a 1.25 ratio */
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;

  /* Rhythm */
  --leading-body: 1.6;
  --leading-heading: 1.2;
  --space: 1.5rem;
  --measure: 68ch;
}

Every other rule then refers to these tokens instead of hard-coded values, so a change to the scale or the typefaces updates the whole site at once.

Setting Up a Solid Baseline in CSS

The following stylesheet gives you readable defaults for an article page. It uses relative units so it respects the reader's browser settings, and it limits line length so text stays comfortable on wide screens.

html {
  /* Respect the user's default size; don't set a pixel value here */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: #1f2328;
  background-color: #ffffff;
}

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1rem;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: var(--leading-heading);
  font-weight: 700;
  margin-block: calc(var(--space) * 1.5) calc(var(--space) * 0.5);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p,
ul,
ol {
  margin-block: 0 var(--space);
}

small,
figcaption {
  font-size: var(--text-sm);
  color: #57606a;
}

a {
  color: #0b5cad;
  text-underline-offset: 0.15em;
}

A few details are worth calling out:

• font-size: 100% on html: This keeps the reader's chosen default size. If someone has set their browser to 20px, your 1rem becomes 20px and everything scales with it.
• Unitless line height: A value such as 1.6 scales with the font size of each element. A fixed value like 24px would be inherited unchanged and would cramp larger headings.
• The ch unit for measure: 68ch is roughly 68 characters of the current font, which keeps line length tied to the text rather than the screen.
• text-wrap: balance: Supported in current versions of Chrome, Edge, Firefox and Safari, it evens out the line lengths of short multi-line headings. Older browsers simply ignore it.
• Contrast: #1f2328 on white and #57606a on white both comfortably exceed the 4.5:1 WCAG AA ratio for normal text.

The HTML to go with it is plain and semantic:

<main>
  <article>
    <h1>Planning a kitchen renovation</h1>
    <p>Start with how you actually use the room, not with the cabinets.</p>
    <h2>Measure everything twice</h2>
    <p>Note the positions of windows, doors, pipes and sockets.</p>
    <figure>
      <img src="/images/kitchen-plan.png" alt="Floor plan of a galley kitchen" />
      <figcaption>A typical galley layout with the sink under the window.</figcaption>
    </figure>
  </article>
</main>

Using real heading elements in the right order matters as much as how they look. Screen reader users often navigate by headings, and search engines use them to understand the structure of the page.

Common Signs of Weak Typography

You can often spot typographic problems in a few seconds. Watch for:

• Lines that run the full width of a large monitor: Readers lose their place when jumping back to the start of the next line.
• Body text that's too small: Anything below about 16px for long-form reading forces many people to zoom.
• Cramped line spacing: A line height close to 1.0 on body text makes paragraphs feel like a solid block.
• Low contrast: Pale grey text on white might look elegant in a mockup but fails readers in bright light or with low vision.
• Too many typefaces: Three or more families competing on one page usually looks chaotic.
• Weak hierarchy: Headings that are barely bigger or bolder than body text don't help people scan.
• Long passages in all caps or centred text: Both are harder to read over more than a line or two.

Fixing these doesn't require a new font. Most improvements come from adjusting size, spacing, measure and contrast.

How to Test Your Typography

Typography decisions should be checked in the browser, not just in a design tool.

1. Read a real article on your site: Use real content, not placeholder text. Long words, headings that wrap and lists all reveal problems that lorem ipsum hides.
2. Test at several widths: Resize the browser from phone to wide desktop and look at line length, heading wrapping and spacing.
3. Zoom to 200%: Make sure nothing overlaps, gets cut off or forces horizontal scrolling.
4. Change the browser's default font size: If your text doesn't grow, you've probably used fixed pixel sizes somewhere.
5. Check contrast: Browser developer tools in Chrome, Edge and Firefox show the contrast ratio for text when you inspect it.
6. Throttle the network: Watch what happens while fonts load, and confirm the fallback looks acceptable.

---

FAQ: Typography in Web Design

---

Conclusion

Typography is the set of decisions that turns text into something people can read, scan and trust. It includes the typefaces you choose, but just as importantly the size, spacing, line length, hierarchy and contrast of your text. On the web it also has to be flexible across devices, respectful of readers' settings, accessible and light enough to load quickly.

Start with a small system: a base size in rem, a unitless line height, a type scale, a limited set of fonts and a maximum line length. Apply it consistently, test it with real content at real sizes, and adjust from there. Most typographic improvements come from getting these fundamentals right rather than from finding the perfect font.