Modular Scale

A modular scale is the mathematical engine that turns disconnected font sizes into a family of related proportions. You select a base size, almost always 16px to match browser defaults and accessibility standards, then pick a ratio that governs every jump. A minor third at 1.2 creates calm balanced steps suited to longform docs. A major third at 1.25 delivers clear progression that marketing teams love. A perfect fourth at 1.333 produces the kind of contrast that makes headlines command attention. The golden ratio at 1.618 generates dramatic leaps reserved for hero sections and print work. Multiply repeatedly and the sizes feel connected because they share the same DNA. Divide downward for captions and labels. The article on typography system design calls this the foundation and it is right. Without it every designer on the team invents their own increments and six months later the marketing site the product dashboard and the pitch deck all feel like they were built by rival companies. The modular scale removes opinion from sizing decisions. The ratio decides not the designer's mood after three cups of coffee.

A modular scale is not arbitrary increments that happen to look okay on a 1440px artboard. It is not the lazy 12 16 24 36 48 64 list that pollutes most beginner style guides. Those create steps but no harmony. It is not a static Figma frame you screenshot once and forget. Real modular scales adapt. They compress their ratio on mobile so a hero that reads perfectly at 61px on desktop does not crush a 375px phone. It is not purely a type tool either. The strongest systems extend the same ratios into spacing padding and grid increments so vertical rhythm stays intact. The article lists classic failures like the desktop only scale the spacing guess and the missing tokens. All of them trace back to teams treating type sizes as decoration instead of a calculated system. Copying some pretty Dribbble scale without understanding the underlying ratio guarantees your product will feel inconsistent the moment real content and multiple contributors enter the picture.

Concrete example. Start with a 16px base and major third ratio of 1.25. The sequence reads 10px caption 12.8px label 16px body 20px small heading 25px standard heading 31.25px large heading 39px hero and 48.8px display. Round to clean pixel values and you have a scale that feels intentional. Stripe applied exactly this thinking. Their marketing headlines sit at 48px and 39px while body stays locked at 16px and 20px all generated from the same 1.25 logic. Inspect stripe.com today and the mathematical relationship is obvious. Shopify did something similar in Polaris tying their type scale to an 8px grid so every size change also aligns to the vertical rhythm. IBM Carbon publishes their scale openly showing how they shift from 1.25 on desktop to 1.15 on mobile to prevent hierarchy collapse. Tim Brown released the original modularscale.com tool in 2010 letting anyone input a base and ratio then watch the harmony appear in real time. Mailchimp used a perfect fourth scale in their 2018 refresh producing bold jumps that made their email templates feel confident at every breakpoint. These are not theoretical exercises. They are production systems that ship to millions and stay consistent because the math enforces the rules.

Use a modular scale the moment your work spans more than a handful of screens or involves more than one decision maker. It pays off hardest in full design systems like Carbon or Polaris where tokens turn the scale into CSS custom properties that engineers cannot accidentally break. Pair it with fluid typography clamp statements so sizes interpolate instead of snapping. Combine it with the vertical rhythm rules from the main article and your layouts gain invisible alignment that makes text feel anchored no matter the device. Deploy it when you need to hand off to developers without endless micro adjustments. Skip the modular scale for one off posters band websites or experimental editorial projects where the entire point is breaking predictable patterns to create tension. Do not force one ratio onto wildly different content densities like financial dashboards mixed with lifestyle storytelling. In those cases the math fights the content and manual overrides become a crutch. If your team is two people shipping fast and the project dies in six months you can survive without it. The instant the brand needs to feel coherent across product marketing and pitch decks the modular scale stops being optional and becomes table stakes.

A modular scale turns typography from an endless series of subjective arguments into a predictable system that still leaves room for soul.