Ever landed on a website that just felt... right? The content was easy to read, the layout flowed smoothly, and everything felt perfectly balanced? Chances are, a lot of that good feeling came from the thoughtful use of spacing. It might seem like an insignificant detail, but spacing plays a critical role in how users perceive and interact with your website.

Why spacing matters: the psychology of perception

Spacing, often called white space or negative space, isn't just empty space; it's an active design element. It taps into fundamental principles of visual perception like the law of proximity: objects near each other tend to be perceived as a group. Used well, space tells visitors how elements relate. It affects:

  • Readability. Generous spacing between lines, paragraphs and headings prevents content from overwhelming, while crammed text is cognitive overload that makes people bounce.
  • Focus. Strategic spacing guides the eye, creating a clear visual hierarchy that lets users concentrate on what matters most.
  • Aesthetic appeal. As in art, space adds sophistication. A less cluttered site reads as more professional and intentional, which builds credibility.
  • Experience. Well-spaced content is inviting and encourages exploration; a densely packed page is simply unpleasant to be in.
  • Accessibility. Insufficient space between elements makes them hard to distinguish for people with visual impairments. Proper spacing is clearer for everyone.
Two versions of the same layout, cramped and well-spaced

The challenge: inconsistent line heights and card titles

One subtle but significant challenge is inconsistent line height. Fonts, sizes and even browsers interpret it slightly differently, which is particularly problematic in card layouts where titles should sit at visually equal distances from each card's top edge. Without careful management, titles drift, the design feels unbalanced, and achieving correct positioning becomes fiddly and frustrating.

Card layout with misaligned titles caused by inconsistent line heights

Enter line-height-trim

This is where a line-height-trim class becomes invaluable: a technique for consistent, visually pleasing line heights, especially for keeping card titles at equal distances from the card's corner.

It isn't a single CSS property but a combination of techniques for full control of the text's vertical position:

  • line-height: 1 removes the browser's default line height, taking back control of the spacing.
  • padding-top and padding-bottom with calc or clamp replace the unpredictable default space, scaling with the font size so the result stays consistent across headings and subheadings.

The pay-off for card design:

  • Visually aligned titles. No more titles floating at different heights: every card starts its title from the same visual position.
Card layout with consistently aligned titles
Close-up of trimmed line-height spacing within a card
  • Consistent layouts. Titles and content align vertically across different card designs, which also makes them easier to scale to other parts of the site.
  • Simpler spacing management. Predictable results instead of wrestling with default browser behaviour.
  • Less frustration. Something every designer can get behind.

Conclusion

Spacing is a powerful design tool that goes underappreciated. Attend to the space between elements and you improve usability, readability and the overall feel of your site. The line-height-trim technique is a little unconventional, but it solves a real problem, particularly for text in containers and cards.

Experiment with it, and give your content room to breathe.