Grids and spacing: UI design basics
8pt grid, columns, margins: the spacing and layout principles that make an interface feel consistent and professional.
The 8pt grid
A widespread convention: every spacing value (margins, padding, sizes) is a multiple of 8px (sometimes 4px for finer details). Ensures visual consistency and makes aligning elements easier.
Common spacing values: 4, 8, 16, 24, 32, 48, 64 px
The multiple of 8 isn't arbitrary: it divides cleanly by 2 and 4, and maps well onto common screen densities (2x, 3x) without ugly rounding on high-resolution devices.
Column grids
A web or print layout often relies on a 12-column grid (sometimes 16), with regular gutters (spacing between columns) — allows flexible layouts while keeping consistent alignment between blocks.
Spacing hierarchy
| Level | Use | Example |
|---|---|---|
| Micro (4-8px) | Between text and its icon | Label/icon spacing |
| Small (8-16px) | Between related elements | Spacing between form fields |
| Medium (24-32px) | Between related sections | Margin between a heading and its content |
| Large (48-64px+) | Between independent sections | Separation between two page blocks |
Margin vs. padding
- Margin: space outside an element, between it and its neighbours.
- Padding: space inside an element, between its edge and its content.
Mixing the two up is a frequent source of visual inconsistency in an interface.
Type scale
Like spacing, text sizes often follow a regular progression rather than arbitrary values — a common ratio (1.25 or 1.333, a "minor/major scale") multiplies each level to get the next:
Base 16px × 1.25 → 20px → 25px → 31px → 39px (headings) Base 16px × 1.25⁻¹ → 12.8px (secondary text)
Common responsive breakpoints
| Name | Typical width | Target |
|---|---|---|
| Mobile | < 640px | Smartphones |
| Tablet | 640-1024px | Tablets, small screens |
| Desktop | 1024-1440px | Standard screens |
| Large | > 1440px | Large screens, external monitors |
Designing "mobile first" (starting from the smallest screen, then adding complexity for larger ones) generally produces simpler, faster interfaces than the reverse approach.
Thanks for the feedback!