관리
← All articles

Beyond bigger text: building a reading order with headings, body text, and space

This article was translated from its source language with AI assistance. Please check technical terms and equations against the original.

An easy-to-read article does not make every sentence stand out. It makes the starting point, each new topic, and related explanations easy to recognise. Adjusting size, weight, and paragraph spacing together creates a reading order without requiring much decoration.

Beyond bigger text: building a reading order with headings, body text, and space — An illustration of the article’s concept
An illustration of the article’s concept

Group the content before choosing sizes

Consider a notice for a neighbourhood exhibition. Writing the exhibition name, date and venue, visiting instructions, and background explanation in one block makes it hard to know where to begin. Use the exhibition name as the title and group instructions beneath their own heading. A heading should express content structure rather than merely create a large-text effect.

W3C's heading structure guide explains how heading levels support document organisation and navigation. On the web, use the correct heading elements as well as visual sizes. A bold sentence that looks like a heading may not be recognised as one by a screen reader.

Choose between size, weight, and spacing

A subheading can be differentiated from body text through weight and spacing even when their sizes match. Conversely, an enormous subheading placed tightly against the text can make their relationship awkward. Give important headings a clear distinction and repeat the same treatment for headings at the same level so readers can learn the pattern.

One starting experiment is 18-pixel body text and 24-pixel subheadings, then adjusting the spaces around each subheading. This is neither a correct universal ratio nor a minimum rule for every website. A typeface's actual letter height, screen width, language, and readers' environments affect perceived size and appropriate spacing. Decide while reading the finished layout.

Beyond bigger text: building a reading order with headings, body text, and space — A visual comparison of the key points
A visual comparison of the key points

Reduce emphasis to reveal what matters

If the date, venue, and all instructions are bold, relative emphasis disappears. Choose what readers need to find immediately. In an announcement, you might separate a short date and venue from the longer explanation, leaving the latter as ordinary body text. Make links recognisable and do not distinguish roles through colour alone.

Tight line spacing can make sentences merge visually, while excessive spacing can weaken a paragraph's connection. W3C's visual presentation explanation addresses conditions for adapting text display to readers. Do not interpret its accessibility criteria as a claim that one fixed font size is sufficient for everyone.

Test reading in the finished layout

Scan just the title and subheadings on a phone and a wider screen. Check whether the article's order makes sense and whether the date and venue are easy to find. Then enlarge the body text and look for clipping or overlapping elements. Translated titles have different lengths, so check their wrapping too.

You do not need to fill every gap simply because space seems wasted. Keep related material close and leave breathing room before a new topic. Judge the result by whether readers recognise relationships and reach the information they need, rather than by the numerical sizes used. When the content structure changes, adjust the typography to match it.

Original illustrations created to help explain this article.