Typography

Almost everything a LunchLoop subscriber reads is text: the meal, the delivery time, the price, the rule about when lunch can still be changed. If that text is hard to scan at 7 a.m. on a phone, the design fails, however good the colours are. Typography is how the words get read in the right order, quickly.

The rule

One or two typefaces, a small size scale, and body text built for reading.

Typefaces. A product interface usually needs one family, using its weights (regular, medium, semibold, bold) for variety. A second family, if any, gets one clear role, such as headings. System fonts or a well-made sans-serif read well on phones and load fast.

A type scale. Pick a small set of sizes that step up clearly, for example 14, 16, 20, 24 and 32 pixels, and use only those. No 15 here and 17 there: sizes that are almost the same look like mistakes and blur the hierarchy.

Body text built for reading:

• Around 16 px as the base size on mobile.
• Line height of roughly 1.4 to 1.6 times the size for paragraphs.
• Line length of about 45 to 75 characters, so the eye can find the next line.

Hierarchy through size and weight, not more fonts. A meal name at 20 semibold, details at 16 regular and a caption at 14 medium are three clearly different levels in a single family.

Two small cautions. Long passages in capitals are slow to read. Thin weights at small sizes lose contrast and turn faint on screens.

The shortcut

Start with three levels: title, body and caption. Style the whole screen with those, and add a fourth level only when something genuinely does not fit. Every piece of text then has to answer one question: "Which level are you?"

Drills

Answer fast — trust the rule.

Remember

• One or two typefaces, a small size scale, and body text built for reading.
• Shortcut: title, body and caption first, and every text answers "which level are you?"
• Trap: near-identical sizes and thin, small, grey text.