A reading line stays near 45 to 75 characters. Much longer, and the eye loses the start of the next line. Much shorter, and the sentence breaks into scraps. Set that measure on the text. Do not stretch the paragraph to the width of the screen just because the screen is wide. Sixty-two characters sits inside the range and is a sound place for product copy.
Space comes from a short step scale: 4, 8, 16, 24, and 40. Use those steps instead of nudging by a pixel. Related things sit closer than unrelated things. The gap inside a group of buttons is smaller than the gap between that group and the next section. Equal gaps across the whole page make everything look equally important, which means nothing is.
The demo clamps a paragraph to 62 characters and sets a spacing stack beside it, labelled 8, 16, and 40.
How to check it
- Count a full line of body text. It lands between 45 and 75 characters.
- List the gaps on the screen. Each one is a step on the scale, not a one-off number.
- Point at two groups. The related pair has the smaller gap.
.copy {
max-width: 62ch;
font-size: 1rem;
line-height: 1.5;
}
.group {
display: flex;
gap: 8px;
}
.section + .section {
margin-top: 40px;
}