Also known as:
Positioning

Alignment

Alignment creates visual connections, a sense of order, and hierarchy. Horizontal rhythm keeps horizontal spaces between elements on a page consistent.

Need to know

  • Align everything with something to keep pages tidy and establish relationships between elements.
  • You can use Grid Units such as 12px (½ Grid Unit) or 24px (1 Grid Unit) for alignment.

To keep in mind

Alignment creates visual connections, a sense of order, and hierarchy. It improves readability.

Horizontal rhythm keeps horizontal spaces between elements on a page consistent. In typography, horizontal rhythm impacts legibility.

Optical alignment in design refers to how we adjust UI for what “looks right” versus real measurements:

“Our eyes are weird organs that often tell lies to us. But if you know the peculiarities of human vision, you can construct more approachable and clean designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it’s also helpful for interface designers, who build user-computer interaction.” — Slava Shestopalov, Optical Effects in User Interfaces: An Illustrated Guide

  • You can use Grid Units such as 12px (½ Grid Unit) or 24px (1 Grid Unit) for alignment.
  • Optical adjustments:
    • Sometimes, 10px increments are more appropriate to keep related elements closer together. Minor adjustments made as needed don’t need to follow grid units or use variables. Some optical adjustments might be just 1px or 2px.
    • If the same adjustments are made repeatedly, that might be an opportunity for an improvement in the system.

See also:

External Links