Typography System

Typography carries more of a brand's personality than any other design element because it is always present - and a good type system is invisible when it works, painful when it doesn't. The costly mistake is picking fonts before defining roles: teams end up with three typefaces, forty ad-hoc sizes, and no way to tell a heading from a label. Roles and a scale come first; fonts fill them.

Operating procedure

Follow the order: roles constrain the font choice, the ratio constrains the scale, and line height and measure are set per style - reversing any of these produces a system that must be rebuilt.

Step 1: Gather inputs

• Brand adjectives (3-5) and the product type: UI-heavy tool, editorial/content site, or display-heavy marketing. The product type picks the scale ratio later.
• Target languages and scripts - glyph coverage eliminates typefaces early.
• Platforms: web, native app, print. Each changes licensing and delivery constraints.
• Font budget and any existing fonts under license. Label assumptions as assumptions.

Step 2: Define roles before choosing fonts

Roles: Display (hero headlines, campaign type), Heading (page titles, section headers), Body (long-form reading), UI (labels, captions, buttons), Mono (code, data). A brand needs two typefaces at most - one covering Display/Heading, one covering Body/UI. A third is a tax on every future designer. Strong pairings: one serif plus one sans-serif, or a distinctive display face with a neutral workhorse.