UI Tipsby Praveen Juge

UI Tip #008Typography & color

Limit line length to ~45–75 characters

Long lines make the eye lose its place on the way back, and short ones break the rhythm. Give body text a max-width around 65ch and let the margins grow.

Why it matters

At the end of each line the eye jumps back to the start of the next one. On a very long line that jump is long and easy to miss, so people reread a line or skip one. On a very short line the jumps come so often that reading turns choppy. Somewhere between 45 and 75 characters, reading stays smooth.

How to do it

  • Give the text, not the page, a maximum width. In CSS, max-width: 65ch is a good start:

    .prose {
  max-width: 65ch;
  margin-inline: auto;
}

  • ch is the width of the zero, and most letters are narrower, so 65ch holds a little more than 65 characters.

  • Let the margins grow on wide screens. Empty space beside a column is fine; an article that spans a 27-inch monitor is not.

  • Longer lines need more line height to keep the jump back easy. Short ones can be tighter.

When it bends

The range is for paragraphs. Labels, tables, code and captions follow their content. On a phone, lines of 35 to 45 characters are normal and fine.

Sources

Use one type scale and stick to it

Pick a handful of sizes from one ratio and use only those. Fewer sizes make the hierarchy easy to read, and 15px next to 16px just looks like a mistake.

Give every action instant feedback

Respond within 100ms of a tap or click, even when the work takes longer. Change the button's state, show progress, then confirm the result.

Never use color as the only signal

About 1 in 12 men has some color blindness. Pair color with a second cue, like an icon, a label, a pattern or a position, so the state still reads in grayscale.