Typography Handbook

Web Style Guide

Relative units

Use relative units whenever possible.

html { font-size: 100% }
p { font-size: 1em }

@media (min-width: 64em) {
  html { font-size: 112.5%; }
}

• font-size: 100% listens to the browser’s font size settings. By default in most browsers, this places 1em at 16px.
• Changing the font-size of the html element also affects every em and rem element – useful for responsive web design.
• User preference is important – do not stray too far from font-size: 100% and 1em.
• Use rem and em for font-size; use rem, em, or % for positioning; use em for media queries.

Further Reading

• REM vs EM – The Great Debate
• PX, EM or REM Media Queries?

Containers

The container, also known as the wrapper, encloses one or more other elements. It allows for grouping elements semantically, cosmetically, or in layout.

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.container {
  max-width: 67rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

• It is strongly recommended to use box-sizing: border-box. Click here for more information.
• Using max-width with left and right padding is an easy way to create a mobile-friendly container.
• Choose a suitable width that isn’t too long (causes the eye to have a hard time tracking) or too short (causes the eye to travel back too often).

Further Reading

• * { Box-sizing: Border-box } FTW
• Ideal Column Width For Paragraphs Online

Reading measure

The measure is the length of a line of text. It is one of the most important – and most overlooked – factors in readability. A line that is too long causes the eye to struggle to find the start of the next line; too short and the constant returns become fatiguing.

The classical typographic guideline is 45–75 characters per line (CPL) for a single-column body text, with 66 characters often cited as the ideal. For multi-column layouts, 40–50 CPL per column is more appropriate.

/* A practical measure using ch units */
/* 1ch ≈ the width of the "0" character */

.content {
  max-width: 65ch;  /* approximately 65 characters wide */
  padding-inline: 1.5rem;
}

• The ch unit is based on the width of the 0 character in the current font. It’s not a perfect measure of average character width – but it’s a reliable and practical approximation.
• Line length and line height are interdependent. Longer lines need more leading to help the eye track back to the start of the next line. A rough guide: increase line-height by roughly 0.1 for every 10 characters above 65 CPL.
• Measure affects different content types differently. Narrative body text benefits from the full 45–75 CPL range. UI text, captions, and footnotes often work better at 35–50 CPL.
• On narrow viewports, let the measure reduce naturally with the viewport rather than enforcing a minimum – a short line is preferable to horizontal scrolling.

Further Reading

• ch unit – MDN
• Choose a comfortable measure – The Elements of Typographic Style Applied to the Web

Font sizing

Use a modular scale to establish the proportional relationships between your type sizes – the principle is unchanged from 2016. What has changed is how you implement it responsively.

Fluid typography with clamp()

The clamp() function – now universally supported – replaces the responsive modular scale approach. Instead of defining separate type sizes at different breakpoints, you define a minimum size, a maximum size, and a fluid value that scales between them based on viewport width. This eliminates the jarring jumps at breakpoints entirely.

/* clamp(minimum, preferred, maximum) */

h1 {
  /* 2rem at small viewports, scales up to 4rem, fluid in between */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

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

p {
  /* Body text: 1rem minimum, never exceeds 1.25rem */
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}

• The middle value (5vw + 1rem) is the fluid part – it grows with the viewport. Adding a rem component ensures it doesn’t become too small on narrow screens.
• Use Utopia to generate harmonious fluid type scales visually – it calculates the correct clamp() values for an entire scale at once.
• The modular scale is still useful for establishing the ratios between sizes – use it to determine your minimum and maximum values, then let clamp() handle the in-between.
• Always set a rem minimum, never a viewport-only minimum – this ensures accessibility for users who have increased their browser’s base font size.

Further Reading

• Utopia – fluid type scale generator
• Linearly Scale Font-size with CSS clamp() – CSS-Tricks
• clamp() – MDN

Vertical spacing

Vertical spacing is created by line-height, margin, and padding. line-height should be unitless. Apply margins in a single direction on textual elements, preferably margin-bottom. Adhere to the Law of proximity.

Vertical rhythm

Vertical rhythm keeps vertical spaces between elements consistent, creating a visually relaxing experience and a feeling of familiarity.

body { line-height: 1.4; }

p {
  font-size: 1.25em;
  margin-bottom: 1.75rem; /* 1.4 × 1.25 */
}

h1 { font-size: 3em; margin-bottom: 3.5rem; }
h2 { font-size: 2em; margin-bottom: 1.75rem; }
h3 { font-size: 1.5em; margin-bottom: 1.75rem; }

.page-container { padding: 3.5rem 2rem; }

Bottom aligned baseline grid

The bottom aligned baseline grid is a stricter implementation of vertical rhythm. In web, text is vertically aligned to the center of the line-height. In print, text is aligned to the bottom of the baseline grid instead.

In modern CSS, the lh unit – equal to the current element’s line-height – makes baseline-relative spacing much simpler without needing a preprocessor library. Remember that vertical rhythm is a guideline, not a rule. It does not need to be pixel perfect.

Further Reading

• Why is Vertical Rhythm an Important Typography Practice?
• Aligning type to baseline the right way using SASS
• Is Web Typography Completely Broken?
• Single-direction Margin Declarations

Colour

Color provides a huge visual distinction and is an important part of typography.

• Don’t pick colours arbitrarily; use a colour palette instead. Material Design colors and Flat UI colors are good palettes to start with.
• Do not overuse a colour too many times, or it may lose its unique distinction.
• Adhere to the Law of similarity.
• It is recommended to not use pitch black #000 as your body text color. Instead, use a very dark gray such as #333.
• Make sure there is enough contrast between text and background. Use this contrast checker tool to verify.

Further Reading

• Magic Of CSS: Color
• Google Style – Color

Underlining

In a printed document, don’t underline. Ever. It’s ugly and it makes text harder to read. Practical Typography

On the web, underlines serve a specific purpose: indicating hyperlinks. The browser default underline sits too close to the baseline, cuts through descenders, and carries a fixed weight regardless of font size. Modern CSS gives you precise control over all three.

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
}

Optical underline weight

Using em units for text-decoration-thickness means the underline scales proportionally with the font size. 0.08em is roughly 1–2px at body sizes but naturally heavier at display sizes where a hairline would look too light.

Skip-ink

text-decoration-skip-ink: auto tells the browser to interrupt the underline where it passes through descender strokes on letters like g, j, p, q, and y. This is the single most important underline improvement – without it, descenders appear to cut through the line at any size.

Underline offset

Moving the underline below the baseline with text-underline-offset creates breathing room between text and line. 0.12em is a comfortable starting point – enough separation to be legible, close enough to remain clearly associated with the text.

Contrast and hover

Softening the underline colour creates a quieter default state, with a stronger underline on hover:

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
  text-decoration-color: rgba(0, 0, 0, 0.35);
  color: inherit;
}

a:hover {
  text-decoration-color: currentColor;
}

Editorial link styling

For body copy where you want links to blend into the text without disappearing entirely, combining a muted underline colour with color: inherit is the most readable approach. Reserve underlines for hyperlinks only – using them for decorative emphasis causes confusion.

Further Reading

• text-decoration-skip-ink – MDN
• text-underline-offset – MDN
• Crafting Link Underlines On Medium

Text wrapping

CSS now offers native control over how text wraps – solving two long-standing typographic problems that previously required JavaScript or manual intervention.

text-wrap: balance

Balanced wrapping distributes text evenly across lines, eliminating the single short word – the “widow” – that often appears alone on the last line of a heading.

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

• Only apply to short text – headings, captions, pull quotes. The browser performs multiple layout calculations to find the optimal balance point, which becomes expensive on long passages.
• Do not use on body text.
• Browser support is now good across modern browsers. Use it freely with no fallback needed – unsupported browsers simply wrap as normal.

text-wrap: pretty

Pretty wrapping is designed for body copy. Rather than balancing the whole block, it focuses specifically on the last few lines – avoiding orphaned words at the end of paragraphs without the performance cost of full balance.

p, li {
  text-wrap: pretty;
}

• This is a newer property with more limited support than balance – check current compatibility before relying on it.
• The combination of balance on headings and pretty on paragraphs replaces most cases where you would previously have manually inserted   or <wbr> to fix wrapping.

Further Reading

• text-wrap – MDN
• CSS text-wrap: balance – Chrome Developers

Colour and accessibility

Colour contrast between text and background is a legal and ethical requirement in most contexts, not an optional consideration. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios, and meeting them is expected in professional work.

WCAG contrast requirements

• AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt / 14pt bold and above).
• AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Required for some public sector work.
• Use WebAIM Contrast Checker or Who Can Use to verify your combinations.

Beyond contrast ratios

• Don’t rely on colour alone to convey meaning – link underlines, icons, and patterns all reinforce distinctions for colour-blind users.
• Dark mode – if your site supports it, check contrast in both modes. A combination that passes in light mode may fail in dark mode if you simply invert the colours.
• Text on images – always add a scrim, overlay, or text-shadow to ensure legibility. Background images shift unpredictably across devices and screen sizes.
• Avoid pure black on white – #000 on #fff creates uncomfortable contrast for users with dyslexia or visual sensitivity. A dark grey like #161616 or #333 is easier to read at length with no accessibility cost.

The APCA model

The Advanced Perceptual Contrast Algorithm (APCA) is a newer contrast model that better reflects how human vision actually perceives contrast, accounting for font size, weight, and polarity (light-on-dark vs dark-on-light). It is proposed for WCAG 3.0. While not yet a formal standard, it is worth understanding – particularly for light-weight or small type where WCAG 2.x can be misleading in both directions.

Further Reading

• WebAIM Contrast Checker
• Who Can Use – contrast and accessibility simulator
• WCAG 2.1 – Understanding Contrast (Minimum)

Dark mode typography

Dark mode is not simply an inverted colour scheme – it requires deliberate typographic adjustments. Text that reads well on a white background often becomes uncomfortable in dark mode if you simply swap the colours.

Contrast softening

Pure white text on a pure black background creates an extreme contrast that causes halation – a perceived glow or bloom around the letterforms that makes extended reading fatiguing. Soften both ends of the scale.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;  /* not pure black */
    color: #e8e8e8;             /* not pure white */
  }
}

• A background of #121212–#1a1a1a and a text colour of #e0e0e0–#f0f0f0 provides comfortable contrast without halation.
• Aim for a contrast ratio of around 10:1 rather than the maximum possible. WCAG requires 4.5:1, but in dark mode higher ratios can become uncomfortable.

Font weight compensation

Light text on a dark background appears thinner and lighter than the same text on a white background – a perceptual effect caused by how the eye processes light. To maintain visual consistency across modes, you may need to increase font weight slightly in dark mode.

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 400;
  }

  /* If using a variable font, fine-tune the weight axis */
  body {
    font-variation-settings: 'wght' 420;
  }
}

• The difference is subtle – typically a shift of 20–50 units on a variable font weight axis, or one step up in a fixed weight scale.
• This is particularly noticeable at smaller sizes and lighter weights. Body text at 300 or 350 weight may feel too thin in dark mode.

Spacing adjustments

Dark backgrounds can make text feel more compressed. Slightly increased line-height or paragraph spacing can improve readability, though this is a minor consideration compared to contrast and weight.

@media (prefers-color-scheme: dark) {
  p {
    line-height: 1.6; /* vs 1.5 in light mode */
  }
}

Implementing dark mode

Use the prefers-color-scheme media query to detect the user’s system preference. Define your colour tokens as CSS custom properties so they can be swapped cleanly.

:root {
  --bg: #ffffff;
  --text: #161616;
  --text-muted: #525252;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e8e8e8;
    --text-muted: #a0a0a0;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
}

Further Reading

• prefers-color-scheme – MDN
• prefers-color-scheme: Hello darkness, my old friend – web.dev