Simple rules
- Scale: H1 28 to 40 px, H2 22 to 28 px, body 16 to 18 px
- Weight: pair weight with size to signal priority
- Whitespace: tight inside a group, larger gaps between groups
- Gestalt: use proximity and similarity to group items
- Alignment: one strong axis beats many weak ones
Checklist
- Can a new user find the primary action in two seconds
- Do grouped items sit closer to each other than to other groups
More reading: NNG on visual design and Material layout fundamentals.