Alignment Axes
Snap every element on the page to a handful of axes, and the page instantly looks clean.
Count the starting lines on a page. Three or fewer looks tidy; five or more starts to look messy.
What you'll run into:
- You can't say what's wrong with the page, but it just doesn't look neat
- Every module looks fine on its own, then falls apart when placed together
- Indentation is used casually—12 here, 20 there
Use fewer axes
The eye is highly sensitive to vertical lines. Each extra starting line adds another visual pause. Snap elements to a few axes and the page gains a sense of order—this step takes almost no time but the effect is obvious. Traditionally, grid systems split the canvas into vertical columns and elements take their coordinates from them, making alignment a by-product. But most pages don't need a strict grid; a few axes are enough to hold the layout together. grid-wiki
- Count the axes first. Screenshot the page and measure how many distinct left edges exist. The number is usually higher than you think.
- Align everything that can be aligned. Titles, body text, buttons, icons—default them all to the same left line. Indentation needs a reason.
- Indentation is only for hierarchy. A child item indents one step, a grandchild another, using values from the same spacing scale.
- The right edge is also an axis. When the right ends of content are ragged, the right side of the page looks rough. Keep fixed-width elements right-aligned to the same line where possible.
Which alignment to pick
Use one alignment method per block. If the left column is left-aligned and the right column is centered, those two columns will never line up.
| Method | Best for | Watch out |
|---|---|---|
| Left | Default for most content | Chinese and English both read left to right; a stable left edge scans best |
| Right | Numbers, amounts, numeric columns in tables | Numbers align by digit to compare. Right-aligned form labels fill faster |
| Center | Empty states, login pages, inside a single card | Looks formal but scans poorly. Never center a full paragraph |
| Justified | Almost never | Justifying Chinese stretches the letter spacing and gets harder to read |
Optical alignment first
Sometimes the numbers line up but it doesn't look aligned. When that happens, trust your eye.
- Circles and triangles need to overshoot. When a round button aligns its left edge with a square button, the circle looks like it's receding and needs to move out a little.
- Text starting with a quote or punctuation. Quotes carry their own spacing; strict alignment makes the text look indented. Hanging punctuation fixes it.
- The midline of icons and text. An icon's visual center is usually not its geometric center, so vertical centering often needs a one- or two-pixel nudge.
- The triangle in a play button. A triangle's weight sits left of center, so geometric centering looks off—move it right.
These fine adjustments don't need exact math—if it looks right, it's right. This is also why the final walkthrough has to be done by a person, not by a numeric check.
How to verify alignment. Shrink the page screenshot to 50% and squint. Scaling down strips away text detail and leaves pure structure—the number of axes and the rhythm of spacing become visible at once. If the shrunk page still looks messy, the problem is too many axes; if it looks tidy shrunk but awkward at full size, go check the optical adjustments instead. Fixing a misaligned page costs almost nothing, so this is a good first move whenever you feel a page is "not clean."