Scale Ratio

Scale ratio is the fixed multiplier you choose once then apply to a base size to create every heading, subhead, body, caption, and label size in your typographic system. The base almost always equals 16 pixels. The ratio determines how aggressively each level grows. Major third at 1.25 creates tight disciplined steps ideal for data tools. Perfect fourth at 1.333 delivers the sweet spot for most digital products with clear but not theatrical contrast. Golden ratio at 1.618 produces bold expressive jumps that make landing page headlines dominate the fold. These are not suggestions. They are laws once chosen. The resulting sizes get turned into tokens that live in one source of truth whether that is a Figma styles panel, a CSS variables file, or a Tailwind config. This single decision removes 80 percent of type size arguments from the design process and creates the structural ranking that lets readers know what to read first without conscious effort. It forms the literal spine of any hierarchy that survives contact with real content and real users.

Scale ratio is not picking pleasing sizes by eye for each new component. It is not a loose inspiration you reference only when convenient. It is not using 1.5 or 2.0 because they feel round. It is not changing per breakpoint or per product area. It is not something you layer on top of an existing mismatched set of font sizes. It is not the spacing scale although aligning them creates powerful rhythm. It is not a trendy trick from a 2022 Dribbble shot. Designers who ignore this end up patching their way through launch with a collection of one off sizes that look coherent in Figma but fall apart when content changes or when the site goes to mobile. The page feels flat. The hierarchy disappears. The brand looks amateur no matter how nice the illustrations are.

Look at how Stripe implemented their scale ratio in the 2024 billing dashboard refresh. They chose perfect fourth from 16 pixels producing the sequence 16 body, 21 small, 28 tertiary headings, 37 section heads, 50 primary content titles, and 67 for hero statements on marketing adjacent pages. Every pixel value was rounded to the nearest whole number and locked. They paired it with three weights only. Regular for body. Medium for labels and emphasis. Bold for anything above 37 pixels. Leading followed the ratio too with 1.15 on the 67 pixel hero and 1.65 on the 16 pixel body paragraphs. The system shipped with zero exceptions. When the checkout team needed a new confirmation message size they did not open a new artboard and guess. They looked at the scale table and picked the 21 pixel slot with medium weight. The entire product feels like one continuous surface instead of bolted together modules. Engineers love it because the rem values map cleanly to their design tokens and prevent style drift.

Figma's own config editor and plugin marketplace pages use a golden ratio approach to create excitement on their feature announcements. The 110 pixel display sizes create instant focal points that no amount of color or imagery could match. Yet the body remains utterly calm at 16 pixels. The contrast comes from the ratio not from tricks. Meanwhile productivity tool Linear sticks to major third for their command palette and issue details because the tighter steps prevent the dense UI from feeling chaotic. Vercel runs the same perfect fourth across their docs and marketing with the 67 pixel hero, 37 pixel H2, and 28 pixel H3 all snapping into place. Both teams documented their choice in public design system pages that any founder can study. Both teams report that new hires ramp up on type decisions in days instead of weeks. The ratio teaches the system.

Use a scale ratio on every multi page digital product, every design system, every marketing site that needs to feel considered. Lock it in step two of the hierarchy decision order right after base size. Generate the table. Share it. Enforce it in code reviews and design critiques. It prevents every failure pattern from the floating subhead to the runaway H1 to body copy set at 14 pixels. It makes mobile validation trivial because the ratios compress gracefully. Do not use scale ratio when designing conference posters, album covers, or any artifact where the type is the illustration itself and mathematical consistency would kill the vibe. Skip the ratio if you are doing a rapid prototype for user testing and plan to throw the visuals away after the session. Never introduce a new ratio late in a project that already has 50 screens built. The migration pain outweighs any marginal improvement in contrast.

The smartest teams print their scale ratio table and pin it above every monitor. Pick your ratio early, document the ladder without exceptions, and watch the entire product snap into focus.