Chapter 14: Typography

Font families, sizing with rem, line height, measure, and loading web fonts

Dania Rifki

Table of content

Loading web fonts
Putting color and typography together

It seems that your browser JavaScript is disabled, LibDoc is set to fallback mode with reduced features.

Typography on the web is where your eye for detail will pay off most directly. Let's look at the core properties.

font-family sets the typeface. Always provide fallbacks:

body {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

The browser tries each font in order and uses the first one available. The generic family (serif, sans-serif, monospace) should always be last.

font-size sets the text size. I'll use the rem unit throughout:

h1 {
  font-size: 2rem; /* 2 times the root font size */
}

rem stands for "root em" and is relative to the <html> element's font size (16px in most browsers by default, but users can change this). So at the default setting, 1rem = 16px, 2rem = 32px, and so on. Using rem means your entire type system scales if the user changes their default font size in their browser settings, which is an important accessibility consideration.

line-height controls the spacing between lines of text. Use unitless values:

body {
  line-height: 1.6; /* 1.6 times the font size */
}

h1, h2, h3, h4 {
  line-height: 1.1;
}

Body text generally reads well between 1.5 and 1.7. Headings, which are larger, need tighter line-height to look cohesive.

The same paragraph at three different line-height values (1.2, 1.5, 1.8) side by side.

Line height comparison

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Comparison Demo</title>
  <style>
    /*
      Page scaffolding only, not part of the demo.
    */
    body {
      font-family: system-ui, sans-serif;
      max-width: 56rem;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #1a1a2e;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      gap: 1.5rem;
      margin: 1.5rem 0;
    }

    .sample {
      background: #f8f9fa;
      padding: 1.25rem;
      border-radius: 0.5rem;
    }

    .sample h2 {
      font-size: 0.85rem;
      font-family: monospace;
      color: #6c5ce7;
      margin: 0 0 0.75rem;
    }

    .sample p {
      margin: 0;
      font-size: 1rem;
    }

    .demo-note {
      font-size: 0.875rem;
      color: #6c757d;
      font-style: italic;
      margin-block-start: 1rem;
    }
  </style>
</head>

<body>
  <main>
    <h1>Line Height Comparison</h1>
    <p>The same paragraph text at three different <code>line-height</code> values:</p>

    <div class="grid">
      <div class="sample">
        <h2>line-height: 1.2</h2>
        <p style="line-height: 1.2;">This series explores the tension between natural forms and digital artifacts. Each
          piece began as a plein air sketch before being reinterpreted in Procreate over several weeks.</p>
      </div>
      <div class="sample">
        <h2>line-height: 1.5</h2>
        <p style="line-height: 1.5;">This series explores the tension between natural forms and digital artifacts. Each
          piece began as a plein air sketch before being reinterpreted in Procreate over several weeks.</p>
      </div>
      <div class="sample">
        <h2>line-height: 1.8</h2>
        <p style="line-height: 1.8;">This series explores the tension between natural forms and digital artifacts. Each
          piece began as a plein air sketch before being reinterpreted in Procreate over several weeks.</p>
      </div>
    </div>

    <p class="demo-note">Accessibility guidelines suggest a line height of at least 1.5 for body text, and typographic
      practice often places comfortable reading in that range or slightly above. Because headings are larger and shorter,
      they are typically set with tighter line height (around 1.1-1.4) to preserve visual unity.</p>
  </main>
</body>

</html>

Enable

Open

Enable

Width: -px
Height: -px

measure (line length) is the number of characters per line. Lines that are too long are hard to read. The ideal is roughly 60 to 80 characters. You can control this with max-width using the ch unit:

p {
  max-width: 65ch; /* approximately 65 characters wide */
}

The ch unit is based on the width of the "0" character in the current font.

A paragraph at max-width: 65ch (comfortable) and another at max-width: 120ch (uncomfortably wide), showing why measure matters for readability.

The ch unit and measure demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The ch Unit and Measure Demo</title>
  <style>
    /*
      Page scaffolding only, not part of the demo.
    */
    body {
      font-family: system-ui, sans-serif;
      max-width: 70rem;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #1a1a2e;
      line-height: 1.6;
    }

    h2 {
      font-size: 1rem;
      font-family: monospace;
      color: #6c5ce7;
      margin-block-start: 2rem;
    }

    .demo {
      background: #f8f9fa;
      padding: 1.25rem;
      border-radius: 0.5rem;
      margin: 0.75rem 0;
      border-left: 3px solid;
    }

    .comfortable {
      border-left-color: #00b894;
    }

    .uncomfortable {
      border-left-color: #e17055;
    }

    .demo-note {
      font-size: 0.8rem;
      font-family: monospace;
      color: #6c757d;
      margin-block-start: 0.5rem;
    }
  </style>
</head>

<body>
  <main>
    <h1>Measure (Line Length)</h1>
    <p>Measure is the number of characters per line. Lines that are too long are hard to read. Compare these two:</p>

    <h2>max-width: 65ch (comfortable)</h2>
    <div class="demo comfortable">
      <p style="max-width: 65ch; margin: 0;">This series explores the tension between natural forms and digital
        artifacts. Each piece began as a plein air sketch before being reinterpreted in Procreate over several weeks of
        layered iteration. The process is meditative, a conversation between the spontaneity of outdoor observation and
        the precision of digital tools.</p>
    </div>
    <p class="demo-note">Roughly 65 characters per line. Easy to read.</p>

    <h2>max-width: 120ch (too wide)</h2>
    <div class="demo uncomfortable">
      <p style="max-width: 120ch; margin: 0;">This series explores the tension between natural forms and digital
        artifacts. Each piece began as a plein air sketch before being reinterpreted in Procreate over several weeks of
        layered iteration. The process is meditative, a conversation between the spontaneity of outdoor observation and
        the precision of digital tools.</p>
    </div>
    <p class="demo-note">Roughly 120 characters per line. Your eye loses its place traveling back to the start of each
      line.</p>
  </main>
</body>

</html>

Enable

Open

Enable

Width: -px
Height: -px

text-wrap is a newer property that improves how text wraps:

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

balance tries to make each line of a heading roughly equal length, avoiding the awkward single-word last line. pretty makes more subtle adjustments to paragraph text, ensuring at least two words on the final line.

Loading web fonts

Most projects use custom fonts. The simplest way to load them is with @font-face or a service like Google Fonts. Here's the @font-face approach, which gives you the most control:

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

font-display: swap tells the browser to show text in a fallback font immediately, then swap in the custom font once it's loaded. This prevents the dreaded "flash of invisible text" where visitors stare at a blank page while fonts download.

Putting color and typography together

Here's what your typography and color system might look like as a cohesive set of custom properties:

:root {
  /* Color */
  --color-ink: oklch(20% 0.02 264);
  --color-paper: oklch(97% 0.005 264);
  --color-primary: oklch(30% 0.19 268);
  --color-accent: oklch(69% 0.15 37);

  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-heading: var(--color-primary);
  --color-link: var(--color-accent);

  /* Typography */
  --font-heading: "Playfair Display", serif;
  --font-body: "Verdana", sans-serif;

  --leading-body: 1.6;
  --leading-heading: 1.1;
  --measure: 65ch;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--leading-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-link);
}

This is a working design system in about 40 lines of CSS. Everything flows from the custom properties at the top. Change a value there, and it ripples through the entire site.