The short verdict
- “Slightly off” is almost always spacing that does not group things, and type that does not rank them.
- Generated layouts space everything evenly, so nothing belongs together and nothing leads.
- A spacing scale and a type scale, used strictly, fix most of it.
01The feeling, named
People describe it the same way. “It looks fine, but something is wrong.” “It feels cheap and I do not know why.” When we look, it is rarely the colours or the images. It is the distances between things and the sizes of things. Readers sense those relationships before they read a word.
02Spacing problems
Even spacing everywhere
A heading sits 24 pixels above its paragraph and 24 pixels below the previous section’s last line. So the eye cannot tell which block the heading belongs to. The rule: things that belong together sit closer together than things that do not. A heading should be much nearer its own text than the text above it.
Random values
Padding of 18 here, 22 there, 30 on the next section. Each looks fine alone. Together they create a low-level wobble. Pick a scale, for example 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, and use nothing else.
Sections that never breathe
Generated pages often use the same section padding top to bottom. Real pages have rhythm: a dense section, then space, then a big statement with lots of room around it. Varying the space between sections tells the reader where the important moments are.
Cramped edges on mobile
Desktop gutters shrink to 12 pixels on a phone, and text runs nearly to the edge. 16 to 24 pixels of side margin keeps lines readable.
03Hierarchy problems
Headings too close in size
A 36-pixel H2, a 30-pixel H3 and a 24-pixel H4. On screen they read as the same thing. Each level should be clearly different, often by a ratio of around 1.25 to 1.5.
Everything bold
When every label, button and heading is bold or semibold, weight stops meaning anything. Keep heavy weights for the few things that should be noticed first.
Lines that are too long
Paragraphs that stretch across a 1400-pixel container. Comfortable reading is around 60 to 75 characters per line. Past that, eyes lose their place.
No single focal point
Big headline, big image, big button, big badge, all competing. Decide what the one thing on each screen is, and let everything else step back.
04How we fix it
- Set two scales. One for spacing, one for type. Every value on the site comes from them.
- Group by proximity. Tighten space inside groups, open it between them.
- Rank every screen. One first thing, one or two second things, the rest quiet.
- Cap line length. Set a max width on text, separate from the layout width.
- Check in greyscale. Squint, or screenshot the page in black and white. Hierarchy that only works in colour is not hierarchy.
“Spacing is how a page says which things belong together. When it is even, it says nothing.”
05Why it is hard to fix by prompting
“Make the spacing better” is too vague for a builder, and specific prompts tend to fix one section while changing another. Spacing works as a system. In Webflow we set it up as variables and classes, so the scale is used everywhere and one change updates the whole site.
06Questions people ask
Is this just a matter of taste?
Less than you might think. Grouping, contrast in size and line length are well understood. Taste comes in when choosing the scale, not when applying it.
Do I need a designer to fix spacing?
To set the scales well, it helps. Once they exist, anyone editing the site can stick to them.
Will fixing spacing change how my site looks a lot?
Usually it looks like the same site, done properly. People notice it feels better more than they notice what changed.
Can you tell me what is off on my site?
Yes. Send us the link and we will point to the specific spots.
