Use website spacing to connect headings, copy, and captions and distinguish sections. Check semantic structure, longer content, and spacing overrides.
Decide which text and images belong together. Use distances that associate a heading with its explanation and a photograph with its caption, while marking a new topic. Spacing alone provides insufficient grounds for claims about luxury or trust.
Below a price table, distinguish supporting notes from the contact action. Choose spacing according to those relationships instead of increasing every gap equally.
Try closer spacing within an explanation and a larger gap between topics. Check the result with real copy after choosing the values.
A caption closer to the following photograph can become ambiguous. Keep each image and caption in one group and use a separate gap between cases.
| Pair | Purpose of the distance |
|---|---|
| Heading and copy | Indicate what the heading describes |
| Image and caption | Identify the image being explained |
| Different sections | Mark a change of topic |
| FAQ and article navigation | Distinguish answers from the next action |
Use H2 and H3 headings as well as visual separation. W3C describes nesting headings according to content relationships. Blank lines and enlarged text alone leave that structure unavailable to heading-based navigation. (W3C page structure)
Readers may adjust line height and character spacing. WCAG's text-spacing criterion requires content and functionality to remain available at its specified adjustments. It specifies compatibility with overrides, rather than identical default settings. Review a fixed-height panel if expanded text becomes clipped. (W3C text spacing)
Check multi-line headings, changed image proportions, and expanded FAQ answers. Move an isolated caption back into its image group. Adjust gaps or headings when a section boundary is ambiguous.
Review duplicated explanations and decoration before removing useful pricing or contact information to create room. See Font and text-display design for type settings.
SpreadSite is a no-code website builder that lets you create, publish, and update a website from Google Sheets using ready-made templates.
To build a website while checking spacing and content relationships, give SpreadSite a try!
A: A large gap can separate an image from its caption. Compare within-topic and between-topic distances and adjust their relationships.
A: Photographs, wording, and typography also affect appearance. Use spacing to clarify relationships and section boundaries.
A: Use appropriate section and paragraph elements with spacing settings. Line-break appearance changes with width and text size.
A: The criterion concerns preserving content and functionality when readers apply its specified adjustments. It does not impose one default spacing design.
Assess Unrealistic Deadlines and Discounts through Scope, Cost, and Alternatives
Reconsider Blame Labels through Ownership, Authority, and Actual Causes
Review Multiple Outcomes from One Activity with Reuse and Effort Records
Explain product quality and usefulness through concrete evidence
Accounting Firm Websites: Explain Service Scope and Fee Basis
