How Much Whitespace Is Too Much on a B2B Website?

How Much Whitespace Is Too Much on a B2B Website?

When a visitor has to scroll past three screens to learn what you sell, you have too much. Whitespace is a tool for directing attention, not a style. The failure mode on B2B sites is not cramped design. It is a beautifully spaced page that takes four scrolls to say anything.

We design and build B2B marketing sites, and this is the argument we have most often with ourselves. Generous spacing looks like quality. It also pushes information below the fold, and information is what a buyer came for.

Here is where we think the line sits, and the tests we use when we are not sure.

What Is Whitespace Actually Doing?

Three jobs. It groups related things together, separates unrelated things, and creates a hierarchy of attention. That is the whole function. If a gap is not doing one of those three, it is decoration.

The grouping job is the one that earns its keep. Human eyes read proximity as relationship before they read anything else. A label sitting closer to the wrong field is a usability bug that no amount of copy will fix.

The attention job is where it gets misused. Space around an element says this matters. If everything has equal space around it, nothing does, and you have spent your loudest tool on a flat page.

Why Do B2B Sites Get This Wrong?

Because the reference points are consumer sites with one thing to sell. A product landing page for a single object can afford enormous space, because there is one message and one action.

A B2B site is usually explaining a category, a product with several parts, a set of use cases, pricing tiers and proof. That is genuinely more information, and applying a consumer site's spacing to it produces a page that feels elegant and communicates nothing.

The other cause is design review. A page with lots of air photographs well and presents well in a meeting. Nobody in that meeting is trying to find out whether the product handles their use case.

Is There an Accessibility Floor?

Yes, and it is a useful hard constraint in the other direction. WCAG Success Criterion 1.4.12 Text Spacing, at Level AA, requires that content does not lose functionality or become unreadable when users apply line height of at least 1.5 times the font size, paragraph spacing of at least 2 times the font size, letter spacing of at least 0.12 times the font size and word spacing of at least 0.16 times the font size.

Read that carefully, because it is often misquoted. The criterion does not require you to design at those values. It requires your design to survive a user applying them. Failures include text being clipped or overlapping other content when spacing increases.

That is a design constraint with teeth. A tightly packed card with fixed height will break under it. A card that grows will not.

What About Zoom and Small Screens?

The same principle, from a different angle. WCAG Success Criterion 1.4.10 Reflow, also Level AA, requires content to be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width of 320 CSS pixels for vertically scrolling content and a height of 256 CSS pixels for horizontally scrolling content.

Generous desktop spacing often survives this fine, because it collapses. What does not survive is spacing expressed in fixed pixel values that do not scale, which is the most common way a spacious desktop design becomes an unusable phone one.

Use relative units and a spacing scale. This is the practical overlap between good typography and accessibility that we covered in web typography and font choices.

What Is the Right Test?

The five second test, done honestly. Show someone your homepage for five seconds, take it away, and ask what the company does and who it is for. If they cannot answer, your first screen is spending space it has not earned.

The second test is the scroll count. Count how many full screens a visitor passes before they encounter a specific, concrete statement about your product. Our view is that one is right and two is the outside limit.

The third is the print test. Print the page. Pages that are mostly air look absurd on paper, and that reaction is a reasonable proxy for how a buyer skimming quickly experiences it.

Where Should You Be Generous?

Around the single most important element on each screen, and between major sections. Those are the two places space does real work.

Inside a section, tighten. Related items should sit close enough that the eye reads them as one group. A three column feature list with equal space inside and outside the columns reads as nine unrelated fragments.

The rule we apply is that the gap between groups should be clearly larger than the gap within a group. Clearly, not slightly. If someone has to measure to tell, it is not doing its job.

Where Should You Tighten Up?

Above the fold, in navigation, in pricing tables, and anywhere a buyer is comparing options. These are dense-information moments and treating them like a hero section makes the comparison harder.

Pricing is the clearest case. A buyer on a pricing page is scanning across columns. Space that separates the columns helps. Space that pushes rows apart so only four features fit on screen actively hurts, because the comparison now requires memory.

Navigation is the other. A generous mega menu that requires scrolling has failed at the one thing a menu does.

Does More Space Really Signal Quality?

It signals confidence, which is not the same thing. Space says we do not need to shout. That reads as quality when the product is well known and as vagueness when it is not.

This is the part we would push back on hardest in our own industry. The spacious, minimal B2B homepage has become a genre, and a genre is not a strategy. When every company in a category looks the same, the differentiator becomes who explains themselves fastest.

There is a version of this that goes further, where a site is so polished it stops feeling like it was made by people who do the work. Specificity is the antidote, and specificity takes room on the page.

How Do You Build a Spacing System That Holds?

Pick a scale, use only values from it, and name the levels by purpose rather than by size. Something like tight, default, section and page. Then the argument in review becomes which purpose this gap serves, not whether it should be 64 or 80 pixels.

Base it on a single unit and multiply. Four or eight pixels is the usual base. The specific number matters less than never having a one-off value.

Enforce it in the build, not in a document. A spacing system that exists only in Figma will drift within two months. We build ours into the class system so an off-scale value is visibly a deviation, which is the same reason we design in grayscale first.

So What Would We Change on Most B2B Sites?

Move the concrete statement up by one screen, tighten the inside of every section by roughly a third, and leave the space between sections alone. That single adjustment fixes most of what people mean when they say a site is beautiful but they are not sure what it does.

Whitespace is not the enemy. Undifferentiated whitespace is. The page should feel uneven, with the important things surrounded by air and the dense things allowed to be dense.

If your site looks the part and is not converting, this is one of the first places we would look. We are happy to walk through your pages and tell you what we would change. Find us at phoenix.studio.