Typography System

A typography system is the complete set of rules that determines exactly how every piece of text in your product, brand, or interface behaves in every context it will ever encounter. It goes far beyond picking fonts. The system contains a type scale built on a mathematical ratio that generates sizes with purpose instead of letting you choose sizes based on vibes. Common working ratios include 1.125 for dense data dashboards, 1.2 for balanced documentation, 1.25 for clear marketing hierarchy, 1.333 for strong landing page contrast, and 1.618 for dramatic hero statements. It includes deliberate font pairings where contrast in structure meets harmony in proportion like pairing geometric sans with humanist serifs such as Satoshi with Source Serif or DM Sans with Lora. It locks in weight and style rules so bold always signals primary importance and italic stays reserved for emphasis inside body copy. It defines spacing standards for line height that tightens on headings and loosens on body copy, letter spacing that goes negative on large text and positive on small labels, and paragraph spacing tied to your base unit. And it specifies responsive behavior with fluid scaling and scale compression on small screens so hierarchy survives every device. Designers stop wasting time in reviews once these rules exist because the system removes opinion from the process.

A typography system is not simply choosing Inter for headings and Lora for body then calling it done. It is not the font buffet where every new page introduces another typeface because someone liked how it looked in isolation. It is not orphan weights like using black for one hero word and never again. It is not applying 1.5 line height to everything regardless of size which makes headings feel floaty and body cramped. It is not a desktop only setup that falls apart the minute you check it on a phone. It is not keeping the rules in a Figma file that never reaches production so engineers make up sizes every sprint. Most teams operate exactly this way. They pick fonts, eyeball the rest, and wonder six months later why the brand feels off even though the logo never changed. That fracture is a system failure not a taste failure.

Stripe offers a concrete example of a typography system executed at scale. They pair Satoshi as their geometric sans with a display serif across their product surfaces. The type scale follows a major third ratio from a 16 pixel base delivering intentional steps at 20, 25, 31, 39, and 48 pixels instead of arbitrary jumps. Weight rules stay rigid with H1 always bold at 700, supporting heads at 600, and body locked at 400. Spacing gets special attention because this is where most systems collapse. Headings use tight 1.1 to 1.3 line height with negative 0.02em tracking while body copy opens up to 1.65 for readability and paragraphs gain 24 pixel gaps on a 16 pixel base. Responsive rules use fluid typography with clamp functions so sizes interpolate instead of jumping. On mobile the ratio compresses to 1.125 to avoid giant headlines on tiny screens while never dropping body text below 16 pixels for accessibility. The full system lives as design tokens so every engineer pulls the same values. This is why moving from their marketing site to the dashboard to the docs feels seamless. IBM Carbon provides another model. Launched with strict guidelines in 2018 their system includes optical size variations in Plex, detailed tracking tables that adjust automatically by size, and components that enforce vertical rhythm. Teams at IBM inherit consistency without thinking about it. Linear follows the same discipline with tight SF Pro inspired scales that make their command bar, issue lists, and marketing pages feel like one product. These examples prove systems outperform individual font talent every single time.

Roll out a full typography system when your product has multiple surfaces or your team has multiple designers. Use it for any brand that needs to maintain voice across website, mobile app, emails, and sales decks. Build it early before visual polish begins because it guides every decision that follows. The rules cut critique cycles in half and onboard new hires in days instead of weeks. Skip the heavy system for one off campaigns, hackathon experiments, or solo projects where breaking rules is the entire point. Avoid it in the earliest startup stages when the product itself is still changing weekly and you would spend more time updating the system than using it. Forcing structure onto chaos creates busywork that slows progress when velocity is your only advantage.

Build your typography system before you ever pick the actual fonts and watch every subsequent decision become faster and more confident.