Typography Rules UI Designers Break (and When To)

Typography Rules UI Designers Break (and When To)

Typography rules exist because they encode the accumulated wisdom of centuries of print craft, and most of the time they’re right. But UI design is not print design, and the contexts in which rules were formed don’t always map cleanly to a 375px mobile screen or a 4K dashboard. Knowing which rules to hold and which to bend – and exactly when – is one of the highest-leverage skills in the discipline.

Rules Worth Breaking: The Cases That Actually Work

The measure rule (45–75 characters per line): Sound in theory, often wrong in practice. On mobile, strict adherence to optimal line length produces type so small it’s illegible. The rule was formulated for reading long-form text at desk distance. For short labels, navigation items, and card copy on a phone, a narrower measure is often correct – users aren’t reading in sustained flow, they’re scanning.

No more than two typefaces: Mostly right, but the pedantic version creates boring work. The real rule is: no more than two type families without a clear system rationale. A brand typeface, a UI typeface, and a mono typeface for code serve different functional purposes and can coexist if the system is deliberate.

Body text should be 16px: A reasonable default that gets cargo-culted into contexts where it’s wrong. On a high-resolution 27″ monitor at desk distance, 16px body text reads small. In a data-dense dashboard, it wastes expensive screen real estate. Match size to context, viewing distance, and information density.

Rules That Are Load-Bearing: Never Break These

  • Sufficient contrast between text and background: This is an accessibility floor, not a style preference. 4.5:1 for body text isn’t negotiable.
  • Consistent hierarchy: If H2 is 24px bold in one section and 20px medium in another for no reason, you’re not expressing creativity – you’re creating confusion.
  • Adequate line height for body text: 1.4× to 1.6× the type size reflects the minimum space the eye needs to track lines cleanly.

The Meta-Rule: Earn Your Rule-Breaking

Every typographic rule you break should be broken for a reason you can articulate. “It looked better” isn’t a reason – it’s an intuition that might be right or might be laziness in disguise. “I broke the line-length rule here because users are scanning, not reading, and the shorter measure keeps the card compact enough to show three on screen” is a reason.

The designers who produce the most interesting typographic work aren’t the ones ignoring rules – they’re the ones who know the rules so well they can identify exactly when the rule’s underlying logic doesn’t apply. Audit your current project’s typography against three questions: Does every hierarchy level have a consistent definition? Is every rule I’ve broken a deliberate choice I can defend? Are all body text contrast ratios above 4.5:1? Those three checks will surface 80% of the typographic problems hiding in plain sight.


All Articles