Internship← Design Systems learning pathDesign Systems · Module 4 of 10
Typography and spacing
A type scale and spacing system give every screen rhythm.
📖 Key ideas
- A type scale defines sizes like 12, 14, 16, 20, 24, 32.
- Use one or two font families, with clear weights.
- Line height around 1.4-1.6 helps body text readability.
- A 4 or 8-point spacing grid keeps gaps consistent.
- Use rem units so text respects the user's browser font size.
💡 Real-life example: Like a newspaper: headline, sub-headline and body text each have a fixed size, and columns have fixed gaps.
Type scaleFixed set of font sizes
Line heightSpace between lines of text
8-point gridSpacing in multiples of 8
remSize relative to the root font size