Typography and Information Hierarchy

Purpose

Treat typography as an information system so users can scan, understand, and act without decoding decoration.

When to Use

• Screens feel flat, noisy, hard to scan, or contain competing headings, cards, labels, and badges.
• Data-heavy and form-heavy work needs clear priority.

Do

• Map real content to semantic HTML and intended reading order.
• Define primary, secondary, supporting, and metadata roles with line length, line height, weight, and spacing.
• Use grouping and whitespace before adding boxes; test long, translated, narrow, and zoomed content.

Do Not