Build a type system that survives real copy

Choose roles before fonts

List the jobs text performs: page title, section title, body, label and supporting note. Start with one family that covers those jobs. Add a display family only when it gives the brand a useful distinction. Reserve uppercase tracking for short labels; long uppercase sentences are harder to scan.

Set readable defaults

Begin with body text around 1rem and a comfortable line height. Constrain long paragraphs to a reasonable measure, then test your chosen font with the actual language. A fixed character count cannot guarantee readability, so compare a dense paragraph, a list and a form label.

body { font-family: Inter, system-ui, sans-serif; line-height: 1.6; }
.prose { max-width: 65ch; }
h2 { font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.15; }

Handle loading and expansion

Keep a system fallback, load only the weights you use and avoid hiding the whole interface while a font downloads. Test text at 200% zoom. A card must grow when its title wraps; an input label must remain visible when translated. Do not shrink important text merely to preserve an arbitrary card height.

A practical review

Temporarily remove all color and imagery. You should still be able to distinguish the page’s levels. If too many sizes compete, consolidate them into roles. Record size, line height, weight and intended usage together, so another developer can apply the system consistently.