Typography

Typography defines hierarchy and purpose, communicating important content through clear, consistent patterns.

Typography defines hierarchy

Typography plays a crucial role in defining hierarchy. Variable weights convey different levels of importance — bolder weights indicate greater significance. Good positioning also establishes prominence and emphasizes key information.

Do

Use a combination of weight, size, color, and positioning to define hierarchy.

Don’t

Rely only on color to define hierarchy.

Typography defines purpose

Orbit assigns meaning to type based on its usage. Mono is used for code; tabular number stylesets are used for numbers and currency amounts; and typescales are designed with UI in mind.

Do

Consistently style similar or repeating type across the UI.

Don’t

Repurpose or reinterpret known typographic patterns, especially around interactions.