UI typography mistakes to avoid.

Give each piece of text a job

A type choice should help someone understand the screen and decide what to do. Start by identifying the page title, section headings, main content, field labels, supporting information and actions. Then check whether the visual treatment makes those roles clear.

Avoid a hierarchy made only of bigger text

If every heading is large and bold, the page gives competing signals. Use a small set of styles and repeat them consistently. Spacing, grouping and clear wording can distinguish sections without adding another font size.

Check the order of information before changing the type scale. A beautifully styled heading cannot fix a summary that arrives after the action it is meant to explain.

Do not squeeze explanations into tiny labels

A short field label should name the value being requested. Put longer instructions beside the field as supporting text. Keep a visible label after the person starts typing; placeholder text disappears and cannot carry the whole explanation.

Treat error messages as part of the interface. Say what needs attention and how to correct it. ‘Enter the collection address’ is easier to act on than an unexplained ‘Invalid input’.

Watch crowded lines and long reading blocks

Read a full paragraph in the actual layout rather than judging a short heading in isolation. Adjust the text container and line spacing when a block feels crowded or hard to follow. On a wide screen, avoid stretching a long explanation across the entire viewport.

Use short paragraphs or a list when the information is genuinely sequential or parallel. Adding line breaks everywhere does not replace editing the copy.

Keep meaning visible without colour alone

A pale label can look elegant in a mockup and become hard to read in use. Review text against the background where it appears. Pair a status colour with clear words or a recognisable symbol so that ‘success’ and ‘failure’ remain understandable when the colour is not obvious.

Check links and controls in their focused, disabled and error states as well as their default state. A typography review should include the text people see while trying to recover from a mistake.

Use content that can challenge the layout

Try a long name, a large price, an empty field and a translated label. Resize the screen and increase the browser's text size. Check that important words remain visible, lines can wrap and the action still makes sense.

Avoid relying on a fixed-height text box that only fits the mockup's sample sentence. A layout should have room for the content it will actually receive.

A practical review exercise

Take one form or booking screen. List every text style and the role it serves. Remove styles that have no distinct job, replace vague labels and add one useful error message. Test the result with long content, a narrow viewport and enlarged text. Finish by writing down the remaining reading or hierarchy problem you would test with someone else.