Quit Equally Spacing All of Your Content!

Learn why equally spacing all of your content creates cluttered, unprofessional designs — and what to do instead!

Kyle Van Deusen

Published:

Filed Under:

Design

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

Equal Spacing
This content contains affiliate links. View our affiliate disclaimer.

If you’ve ever looked at a website and thought, “Wow, this looks like someone’s nephew made it!” chances are, poor spacing is the culprit. It’s one of those subtle elements of design that, when done right, goes unnoticed.. but when done wrong, it makes everything about the website feel “off”.

Early on in my career I was so focused on getting all the elements perfectly evenly spaced that I didn’t ever take a step back to consider how all of the information flowed.

While, mathematically, the the spacing was great, the designs were a cluttered mess.

Spacing has, in some senses, become a meme. But it isn’t just about having plenty of white space on your page… It’s about building a structure, organizing information, creating a visual hierarchy, and drawing your visitors’ eyes to the most important parts of your site.

Think of it like arranging furniture in a room. You wouldn’t equally space out your couch, coffee table, and TV, right? You want the table close to your couch where you can reach it, and the TV far enough away that you can view it comfortably.

The same principle applies to your website layout.

In this article, we’re going to dive into why equal spacing is a habit you need to break and what you should do instead. So, if you’re ready to take your web design skills up a notch, let’s get started.

Learn better by watching? Check out this article in video form!

Why Spacing Matters in Web Design

Spacing isn’t just about aesthetics — it builds a solid foundation for your entire design, ensuring that everything has its place, looks intentional, and is easy to navigate.

Good spacing organizes content, creates a clear structure, and guides users through your design.

There are 4 key ways spacing impacts your design:

1. It Groups Related Content

Grouping related content together makes it easier for users to understand and navigate your site. When items that belong together are close to each other, users intuitively know they’re related.

This simple technique can improve user experience by making information more digestible and navigation more intuative.

For example, in a blog post layout, grouping a headline closely with its corresponding paragraph helps users immediately see that these elements are connected. Alternatively, separating unrelated items with more space clarifies the structure and improves readability.

By effectively grouping content, you ensure that your visitors can quickly find what they’re looking for without feeling overwhelmed.

2. It Creates Meaningful Structure

Good spacing helps to segment different sections of your site, making it clear where one topic ends and another begins. This is especially important with long-form content where clear division lines prevent the design from becoming a jumbled mess.

By creating a structured layout, you help users to understand the flow of information and make their navigation experience smooth and enjoyable.

3. It Enforces Hierarchy

In any piece of content, not all information is of equal importance. Some elements need to stand out more than others.

We often achieve this with size, but spacing is equally as important when it comes to creating hierarchy — which I’ll demonstrate later in this article.

4. It Focuses the User’s Attention

Strategic spacing can highlight your most important elements, making them stand out without overwhelming the user.

Adding extra space around a CTA button can draw attention to it, which encourages clicks and interactions. By focusing the user’s attention on key parts of your design, you can improve engagement and guide users towards the actions you want them to take.

Examples of Proper Spacing in Web Design

To really drive home the importance of thoughtful spacing, let’s look at three specific examples. Each one illustrates how adjusting spacing can transform a design from amateurish to professional.

Example 1: Hero Section

In this first example, we have a hero section with a two-column layout. On the left, there’s information about the artist and the show, and on the right, a photo of the artist. Initially, everything is equally spaced, making it hard to distinguish between different pieces of information.

Hero Equal Spacing

The heading, subheading, date & ticket information, and call-to-action (CTA) button all have the same spacing. This makes it difficult to see the relationship between the heading and subheading, or to quickly identify the CTA.

Let’s make some tweaks to tighten up the space between the most related content and add space between less related content.

Hero Strategic Spacing

We grouped the heading and subheading closer together as well as the date & pricing information, highlighting their relationship. We then increased the spacing before the CTA to make it stand out more.

The result? The information is now organized in a way that guides the user’s eye naturally from the heading, to the subheading, and finally to the CTA. The design feels more intentional and professional.

Example 2: Blog Post Layout

Next, let’s look at a blog post layout. Here, we have headlines followed by paragraphs of text. Initially, everything is spaced equally, making it hard to see the connection between the headlines and their corresponding paragraphs.

Long Form Text Equal Spacing
  • Equal spacing between headlines and paragraphs makes the layout feel disjointed.
  • Headlines appear to float, not clearly connected to their related content.

But what if we tighten up the space between the headline and it’s related paragraphs?

Long Form Text Strategic Spacing
  • Reduced the spacing between each headline and its corresponding paragraph to show their relationship.
  • Increased the spacing between different sections to better separate topics.

This simple adjustment makes the content much easier to read and follow. Users can quickly identify what each section is about, enhancing their reading experience.

Example 3: Card Design

Lastly, let’s consider a card design, where I see people use equal spacing too often. Initially, there’s equal spacing between the image, text, and link, which makes the design feel flat and disconnected.

Card Equal Spacing
  • Equal spacing between the image, headline, text, and CTA link.
  • The elements seem to float without a clear connection.

But if we group the headline and paragraph while spacing out the CTA, we create better hierarchy and make the call-to-action more noticeable.

Card Strategic Spacing
  • Reduced spacing between the headline and text to group them together.
  • Increased the space between the text and CTA link to make the link stand out more.

With these adjustments, the card now looks more cohesive and easier to interact with. The headline and text are clearly related, and the CTA link stands out, inviting clicks.

Systematic, Not Equal, Spacing is the Goal

Good web design is all about the details, and spacing is one of those crucial details that can make or break your site. As we’ve seen, equal spacing might seem like a simple and safe choice, but it often leads to cluttered, confusing designs. By being intentional with your spacing, you can create a more structured, readable, and visually appealing website.

This, of course, doesn’t mean we throw out consistency and use random spacing values everywhere — but I would encourage you to be more thoughtful than using equal spacing for everything.

It’s not just about how things look — it’s about how they function. Proper spacing helps to group related content, create a clear structure, establish visual hierarchy, and guide the user’s attention to where you want it. These small adjustments can transform your design from looking like a DIY project to a polished, professional site that engages and retains users.

So next time you’re working on a new design, take a step back and really think about your spacing. Are related elements grouped closely together? Is there enough space to separate different sections and guide the user’s eye? Making these adjustments can seem daunting at first, but the payoff is worth it.

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a resident of the Commonwealth of Virginia.

Key Takeaways

  • Importance of Spacing: Proper spacing in web design organizes content, creates a clear structure, and guides user navigation, preventing a cluttered and confusing layout.
  • Four Key Impacts: Good spacing groups related content, creates meaningful structure, enforces visual hierarchy, and focuses user attention on key elements.
  • Practical Examples: Adjusting spacing in hero sections, blog posts, and card designs can transform a design from amateurish to professional by highlighting relationships and improving readability and user interaction.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

July 12th, 2024

Vitality – Part 2: Largest Contentful Paint (LCP)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

June 14th, 2024

Vitality – Part 1: Time to First Byte (TTFB)

With Google's ever-evolving standards, mastering these metrics is not just nice-to-have, it's critical for every developer who wants a website that performs.

May 24th, 2024

Mastering SMTP

This webinar has been carefully designed to turn the complex subject of WordPress email delivery into clear, actionable steps — specifically for the freelancer and agency owner delivering these services to clients.

More Articles

Stop Keyboard

Give It to Me Straight: Words to Avoid in Email for Better Communication

Want to communicate more directly & confidently – without sounding rude? Discover the top words & phrases to avoid in your emails, while still being polite.

5 Tips & Tools To Improve Your Typography B Log

Boost Responsiveness, Balance, & Accessibility with These Top Typography Tips!

Learn how just a few simple tools and tips can drastically improve your designs!

Ttfb

Understanding and Improving Time to First Byte (TTFB)

Learn how to improve Time to First Byte (TTFB) and boost your website’s speed with practical tips and strategies.