Align to one edge and keep it
Every new alignment line adds noise. Pick one edge for a block of content, usually the left, and hang the text, inputs and buttons from it.
Why it matters
Every edge on a screen draws an invisible line, and the eye notices each one. A card where the heading, the text, the input and the button all start a few pixels apart has five lines where it needs one. It looks unsettled even when nobody can say why, and it is slower to scan, because each row starts somewhere new.
How to do it
- Choose one edge for a block of content, usually the left in a left-to-right language, and hang everything from it.
- Get the edge from the container’s padding, not from nudging each element.
- Watch the usual offenders: icons placed before a heading, inputs with their own margin, buttons centred under left-aligned text.
- Decide how text inside a field lines up with the text above it, its border or its text, and do it the same way everywhere.
- Left-align body text and let the right side stay ragged. Centred text makes every line start in a different place.
When it bends
Right-align numbers in tables, so their digits line up. Centre short things that stand alone, like an empty state or a single call to action. These are new edges you choose, not drift.