Modular Type Scale

A modular type scale is one ratio applied to one base size that generates every font size in the product. Pick 16 pixels as base and 1.25 as ratio. Multiply to climb the scale. Divide to descend. The sequence 10 13 16 20 25 31 39 49 61 emerges complete. Every size now relates to every other size because the math forces the relationship. Human vision perceives relative steps not absolute differences. The jump from 16 to 20 lands with the same visual impact as 32 to 40. Linear scales fail this test and feel cramped at the top while gaping at the bottom. Modular scales feel even because they are even. The same principle powers musical fifths at 1.5x photographic f-stops and Renaissance architectural canons. Type simply borrowed the tool. The five ratios that dominate real products sit between 1.125 and 1.618. Minor second at 1.125 delivers tight dense dashboards like Vercel Geist and most admin panels. Minor third at 1.2 powers the compact balance in Tailwind defaults. Major third at 1.25 drives Stripe and Material 3 editorial work. Perfect fourth at 1.333 creates generous magazine rhythm. Golden ratio at 1.618 delivers dramatic hero layouts for marketing sites. Each ratio carries its own density signal and you choose once.

A modular type scale is not a spreadsheet of pretty pixel values someone picked in Figma at midnight. It is not seventeen unrelated sizes that fight for hierarchy in the final product. It is not t-shirt classes like text-4xl slapped on without semantic mapping. It is not a static PDF spec that engineering never implements. It is not the golden ratio forced onto a dense CRM because the designer thought it sounded cool. It is not a system you launch and then ignore while one-off exceptions multiply like unsecured tech debt. If your quarterly meeting still debates what sizes count as headings you do not have a modular type scale. You have typography theater.

Concrete example hits hardest with Stripe Checkout in 2023. They locked 16 pixels base and 1.25 major third ratio. The generated steps read caption at 10 pixels small text at 13 body at 16 lead at 20 h4 at 25 h3 at 31 h2 at 39 h1 at 49 and display at 61. Their token structure uses three layers. Raw tokens store rem values: font-size-100 at 0.625rem through font-size-900 at 3.8125rem. Semantic tokens map roles so text-body references raw-300 and text-h1 references raw-800. Component tokens bind further so button-label-size points at text-small. The JSON file travels through Style Dictionary to emit Figma variables CSS custom properties Tailwind config Swift constants and Android resources from one source. In Figma they maintain a Typography collection with raw size variables then semantic aliases then text styles that bundle family weight and leading. Tailwind config replaces the default fontSize key with role-based entries exactly mirroring the Figma names so text-h1 in JSX matches Heading/H1 in mockups. Line heights follow deliberate progression: 1.5 for body tightening to 1.2 for headings. Change the base ratio for a compact mode and every downstream token updates without touching components. Linear ran the same playbook in 2024 with a tighter 1.125 ratio on 15 pixel base for their issue tracker producing even denser steps that never let headings steal focus from data tables.

Use a modular type scale on any product expected to ship for years. Dashboards CRMs analytics tools and admin panels demand the tight 1.125 or 1.2 ratios so hierarchy comes from weight and color not size explosions. Marketing sites product pages and documentation live best at 1.25 or 1.333 where headlines earn attention without shrinking body copy. Editorial or campaign experiences earn the 1.414 or 1.618 drama for hero blocks. Ship it at project start like Shopify did during the 2022 Polaris overhaul or during a redesign like Material 3 in 2021. Wire raw semantic and component tokens. Connect Figma variables to Tailwind config. Enforce three governance rules without exception. Every new component must pick roles not sizes. Every exception receives a name and expiration date like hero-marketing-q3-2024. The scale faces quarterly review not annual so drift gets corrected before it calcifies. Skip the modular type scale on throwaway landing pages built in Webflow for a two-week campaign. Avoid it if your engineers hardcode pixels despite the token pipeline or if leadership treats ratio choice as a branding whim instead of a density decision. One-person experimental projects that ship once also gain nothing from the overhead.

Build the scale once govern it weekly and watch your typography become the quiet backbone that outlives every redesign.