Practical guide · AI & interfaces
5 min read
Updated
Make titles and body text easy to follow
Organize a page with meaningful headings, readable text and spacing that survives user adjustments.
Direct answer
Typographic hierarchy shows what the page is about, which sections belong together and what to read next. Give headings meaningful structure, then use size, weight and spacing consistently. A large bold paragraph can look like a heading without offering heading navigation.
01
1. Decide what each text block does
For a workshop page, sort the text into page title, section headings, descriptions and action labels. Use headings for actual sections, not merely to make a price prominent. Before styling, ask someone to read only the section titles and describe the page’s promise.
This approach is useful when a page feels like one undifferentiated wall of text. It does not fix a confusing offer or missing explanation. Rewrite vague headings such as “More” into a useful description before adding a more elaborate type scale.
02
2. Match the visible structure to headings
Use HTML heading levels to represent section relationships. The workshop title can be h1, “What you will practice” h2, and a subsection within it h3. Choose visual styling separately. Avoid choosing h4 just because its browser default happens to look right.
Check the heading outline as well as the rendered page. A new h2 after an h3 can close that subsection; every change in level is not automatically an error. Keep the document relationships understandable rather than treating a descending font-size sequence as semantic proof.
03
3. Compare two versions of the workshop page
Create a small working example with a title, introduction, agenda, requirements and booking action. In version one, give every block the same treatment. In version two, apply a consistent section-heading style and separate paragraphs from headings. Ask a reader to find prerequisites and the next action in each version; record the result without claiming a universal improvement.
Use the same real copy in both versions. Include the longest French heading and a long requirement. Check whether an isolated line looks like a separate section when it is actually part of the paragraph. Adjust the grouping, then repeat the reading task. The chosen values are design decisions, not accessibility certification.
- Find the requirements using only section headings.
- Identify the booking action without mistaking a prominent price for a heading.
- Repeat with the longest translated heading and record any changed answer.
04
4. Let readers adjust the presentation
For applicable markup and scripts, WCAG 2.2 Text Spacing at AA tests that user overrides can set line height to 1.5 times font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times without losing content or function. These are override conditions, not mandatory author defaults.
Apply the spacing settings together and inspect headings, labels and cards for clipping or overlap. Separately verify text enlargement to 200% without lost content or functionality under Resize Text, whose stated exceptions include captions and images of text. A fixed-height title box that cuts off the enlarged second line needs correction even if the initial screenshot looked balanced.
05
5. Verify reading and navigation separately
On the workshop page, navigate its headings with a screen reader and compare the announced structure with the visual sections. Then enlarge text and apply spacing overrides. Confirm that requirements and booking instructions remain complete and the action still works. Record the browser and assistive technology used, or state that this combination was not tested.
There is no single font or numerical scale that proves a page readable for everyone. This guide does not establish contrast, complete WCAG conformance or comprehension by real users. Keep a short reading task alongside the structural checks, and use the accessibility verification guide for the other interface responsibilities.
Keep this
Verify the result
- 01Section headings describe their content and reflect nesting.
- 02Visual styling does not substitute for HTML heading structure.
- 03EN and FR long text remains complete after spacing overrides.
- 04Text can reach 200% enlargement without losing the tested task.
- 05The report separates a structural check from observed reader comprehension.
- 06The heading-navigation check records the screen reader used or explicitly remains untested.
Primary sources
Technical claims in this guide connect to first-party specifications and documentation.
- Headings (opens in a new tab)W3C WAI · Primary guidance for the relevant layout checks; the working example is original and does not certify conformance.
- Understanding SC 1.4.12: Text Spacing (opens in a new tab)W3C WAI · Primary guidance for the relevant layout checks; the working example is original and does not certify conformance.
- Understanding SC 1.4.4: Resize Text (opens in a new tab)W3C WAI · Primary guidance for the relevant layout checks; the working example is original and does not certify conformance.
Continue
Related guides and tools
Understand → Recognize → Choose → Compare
Pack for your agent
Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.
Implement correctly
Apply “Make titles and body text easy to follow” step by step
# Apply the “Make titles and body text easy to follow” guide in your agent ## Objective Typographic hierarchy shows what the page is about, which sections belong together and what to read next. Give headings meaningful structure, then use size, weight and spacing consistently. A large bold paragraph can look like a heading without offering heading navigation. ## Prerequisites - Inspect the repository, documentation, and existing conventions. - Confirm the need matches the guide scope: Organize a page with meaningful headings, readable text and spacing that survives user adjustments. - Preserve the correct decisions already in place. ## Guide steps - 1. 1. Decide what each text block does — For a workshop page, sort the text into page title, section headings, descriptions and action labels. Use headings for actual sections, not merely to make a price prominent. Before styling, ask someone to read only the section titles and describe the page’s promise. - 2. 2. Match the visible structure to headings — Use HTML heading levels to represent section relationships. The workshop title can be h1, “What you will practice” h2, and a subsection within it h3. Choose visual styling separately. Avoid choosing h4 just because its browser default happens to look right. - 3. 3. Compare two versions of the workshop page — Create a small working example with a title, introduction, agenda, requirements and booking action. In version one, give every block the same treatment. In version two, apply a consistent section-heading style and separate paragraphs from headings. Ask a reader to find prerequisites and the next action in each version; record the result without claiming a universal improvement. - 4. 4. Let readers adjust the presentation — For applicable markup and scripts, WCAG 2.2 Text Spacing at AA tests that user overrides can set line height to 1.5 times font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times without losing content or function. These are override conditions, not mandatory author defaults. - 5. 5. Verify reading and navigation separately — On the workshop page, navigate its headings with a screen reader and compare the announced structure with the visual sections. Then enlarge text and apply spacing overrides. Confirm that requirements and booking instructions remain complete and the action still works. Record the browser and assistive technology used, or state that this combination was not tested. ## Acceptance criteria — Verify the result - Section headings describe their content and reflect nesting. - Visual styling does not substitute for HTML heading structure. - EN and FR long text remains complete after spacing overrides. - Text can reach 200% enlargement without losing the tested task. - The report separates a structural check from observed reader comprehension. - The heading-navigation check records the screen reader used or explicitly remains untested. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
- Requires · The real project context: repository, documentation, and existing constraints
Why it works
- The steps come from a published, sourced guide, not improvisation.
- The checklist turns advice into verifiable criteria.
- The declared scope keeps the guide within its evidence.
Try next
Anchor the guide in the project
# Anchor the guide in the project ## Objective Turn the applied steps into durable repository conventions. ## Checks - Link each decision made to the guide step that justifies it. - Add the checklist to the relevant reviews. - Record out-of-scope cases for the neighboring guides. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:cb5b689195f4bfa1c446690ddbf3563d93dc7f432063a32107cfe30fac7e0434
Diagnose a problem
Diagnose a “Make titles and body text easy to follow” guide gap
# Diagnose a failed application of the “Make titles and body text easy to follow” guide ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## Observable checks - Replay the steps in order and note the first one that diverges: - 1. 1. Decide what each text block does — For a workshop page, sort the text into page title, section headings, descriptions and action labels. Use headings for actual sections, not merely to make a price prominent. Before styling, ask someone to read only the section titles and describe the page’s promise. - 2. 2. Match the visible structure to headings — Use HTML heading levels to represent section relationships. The workshop title can be h1, “What you will practice” h2, and a subsection within it h3. Choose visual styling separately. Avoid choosing h4 just because its browser default happens to look right. - 3. 3. Compare two versions of the workshop page — Create a small working example with a title, introduction, agenda, requirements and booking action. In version one, give every block the same treatment. In version two, apply a consistent section-heading style and separate paragraphs from headings. Ask a reader to find prerequisites and the next action in each version; record the result without claiming a universal improvement. - 4. 4. Let readers adjust the presentation — For applicable markup and scripts, WCAG 2.2 Text Spacing at AA tests that user overrides can set line height to 1.5 times font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times without losing content or function. These are override conditions, not mandatory author defaults. - 5. 5. Verify reading and navigation separately — On the workshop page, navigate its headings with a screen reader and compare the announced structure with the visual sections. Then enlarge text and apply spacing overrides. Confirm that requirements and booking instructions remain complete and the action still works. Record the browser and assistive technology used, or state that this combination was not tested. ## Possible causes - A step was skipped or executed out of order. - The actual need falls outside the guide scope. - A checklist criterion was never verified. ## Bounded fixes - Redo only the diverging step and what depends on it. - Document the gap if the guide scope does not cover the need. ## Final verification — Verify the result - Section headings describe their content and reflect nesting. - Visual styling does not substitute for HTML heading structure. - EN and FR long text remains complete after spacing overrides. - Text can reach 200% enlargement without losing the tested task. - The report separates a structural check from observed reader comprehension. - The heading-navigation check records the screen reader used or explicitly remains untested. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
- Requires · The real project context: repository, documentation, and existing constraints
Why it works
- The diagnosis replays ordered steps instead of searching at random.
- Fixes stay bounded to the first real divergence.
- The checklist serves as a reproducible final verification.
Try next
Prevent the next drift
# Prevent the next drift ## Objective Turn the first diverging step into an explicit project check. ## Checks - Add a focused check on the step that diverged. - Verify the checklist on a second real case. - Document the scope limit you hit. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:ee4b5b61191617085d69572165c4ae61b5bd21ad996fd6cec6526fd5133e212e
Pack digest: sha256:a67c1817b29b5ba91dca291e58ac9a0da2c1f0bbc039066dfae2133abb374fd7