THE HUMAN SIDE OF DESIGN
The quiet work of whitespace
Move the space between service cards and see how grouping, rhythm, and useful content can work together.
Whitespace is the space that lets one thing finish before another begins. It can appear between lines, around a photograph, or between two services. Its job is relational: it helps us show which details belong together and where a new idea starts.
A page can have a generous outer margin and still feel crowded inside every card. It can also be so spread out that related information feels disconnected. We look for a rhythm that supports the content at both scales, from the space around the whole section to the small gap between a heading and its description.
01 / Start with what belongs together
Imagine three service descriptions. Each has a title, a short explanation, and a link. If the gap after the title is larger than the gap before the next service, the visual grouping becomes harder to follow. Bring each title closer to its own description, then create a clearer separation between services.
W3C’s supplemental guidance on understandable content recommends short text blocks, whitespace, and clear separation of foreground and background.1 We apply that guidance by grouping related information and giving each new subject a recognizable starting point. The specific spacing values still depend on the design.
02 / Try a different rhythm
Adjust the space in the example. All three services remain available, and none of their descriptions change. The control varies the space within and between the cards. Notice when the titles, descriptions, and labels feel connected, and when the overall group begins to take more room than it needs.
Give the details a little room.
Space for you.
Support for adults navigating anxiety and life changes.
Explore individual therapy ↗Room for two.
A place to explore communication and connection together.
Explore couples therapy ↗A familiar place.
Meet remotely where services are available to you.
Explore online sessions ↗The largest setting is not automatically the best one. On a wide screen, generous separation may help a short group feel composed. On a phone, the same group stacks vertically and already has a strong reading order. A useful layout considers both situations instead of multiplying every gap by the same amount everywhere.
Keep the information. Clarify the grouping.
If a page feels busy, try separating its subjects before removing useful details. A clear heading and a well-placed gap may solve a problem that deletion would only hide.
03 / Give important details a place
Fees, availability, service formats, and location can be visually quiet without being difficult to find. We would put a fee near the service it describes, give practical information a consistent treatment, and keep the route to more detail visible. Space should support those relationships.
For example, a beautifully isolated consultation button is less helpful if the explanation of that consultation sits several screens away. Bring the information and action together. Leave a little room around the group so it stands apart from the next subject, while keeping the explanation close enough to be read as part of the invitation.
This is also why we review actual content early. A layout designed around one short sample sentence may become crowded when the practice adds an accurate description. It is better to let a section grow naturally than to shrink the text until everything fits the original mockup.
04 / Change the spacing when the layout changes
Desktop rows often become mobile stacks. The useful space between columns does not always translate into the useful space between rows. We may reduce the outer padding, preserve comfortable inner padding, and change a three-column layout into a single sequence.
W3C’s Reflow guidance calls for content to remain available without two-dimensional scrolling at specified narrow viewport sizes, with exceptions for content that needs that arrangement.2 An ordinary service card should not need a sideways journey just to reach the end of its paragraph.
When checking a phone layout, look at both the first card and the transition to the next one. Does the heading stay with its description? Is the next action still visible? Are separators helping, or are borders, shadows, and gaps all emphasizing the same division unnecessarily?
05 / Use a practical review question
Ask someone to point to everything that belongs to one service without clicking. Then ask them to find the start of the next service. If the grouping is unclear, adjust proximity, alignment, or headings before adding another decorative element.
Whitespace is a quiet part of a website’s personality. We can make it generous, precise, or compact, but its most useful contribution is helping the content feel arranged with intention. The reader should be able to follow the page without having to untangle it first.
Sources & further reading
The examples and practical recommendations are TheraCrafted’s design interpretation. The sources below support the specific guidance cited in the text; the interactive example is not a controlled study or a prediction of client behavior.
