Modular type scale. Build it once.
How to pick the ratio, the base size, and the line-height for a modular type scale that works on web, mobile, and email.
Pick a ratio. Make it fluid.
A modular type scale is a sequence of font sizes where each step relates to the next by a fixed ratio (Major Third 1.250, Perfect Fourth 1.333, Golden Ratio 1.618). Base size times ratio to the power of step gives each heading size. Pick Perfect Fourth (1.333) for marketing and editorial sites; Major Third (1.250) for dense dashboards; Golden Ratio (1.618) only for highly editorial brands. Base body size: 16 to 18px on desktop, 16px minimum on mobile (anything smaller triggers iOS Safari to auto-zoom and breaks layout). Use rem units so user zoom works. Make the scale fluid with CSS clamp(min, fluid, max), so headlines grow with viewport width without breaking at extremes. Encode the resulting sizes as design tokens; reference them in components. Brand book picks the ratio; design system encodes the values; product code never sees a raw px value. The Tailwind 4 config takes 12 lines and ships.
Ratio to the power of step.
A modular type scale is a sequence where each step relates to the next by a fixed multiplier. If the base body size is 16px and the ratio is Perfect Fourth (1.333), then step 1 is 16 times 1.333 (roughly 21px), step 2 is 16 times 1.333 squared (roughly 28px), step 3 is 16 times 1.333 cubed (roughly 38px), step 4 is 16 times 1.333 to the fourth (roughly 50px). The math removes arbitrary sizing decisions; instead of picking 22px or 24px for a subhead based on what feels right, the scale tells you to pick 21px or 28px because those are the legitimate steps.
The common ratios have music-theory names because the ratios come from the same place. Minor Second (1.067) gives an almost-flat scale that suits dense data displays. Major Second (1.125) is gentle. Minor Third (1.200) and Major Third (1.250) are the workhorse ratios for product UIs. Perfect Fourth (1.333) and Perfect Fifth (1.500) suit marketing and editorial sites. Golden Ratio (1.618) makes for strong hierarchy with few sizes; suits magazines and high-style brands. Type Scale and Modular Scale let you preview each ratio with your actual type.
The reason modular scales work is mathematical consistency in the perceptual jump from one size to the next. The human eye notices when sizes feel related; ad-hoc sizing produces a jumble that reads as amateur. The scale also constrains: with five steps, you have a maximum of five heading sizes (h1 through h5), which forces clear hierarchy. Brands that pick 12 random sizes end up with no hierarchy at all.
The scale is not a constraint on creativity; it is a constraint on the small number of decisions that should never need to be made again. Once the ratio is picked, the sizes are determined. Designers spend their creative budget on what to write and how to arrange it, not on whether the subhead should be 26 or 28px.
16px minimum, 18 for editorial.
Body text on desktop sits at 16 to 18px in 2026. 16px is the browser default; 18px reads more comfortably on long-form content (essays, documentation, journal posts). For editorial sites with extended reading sessions, 18 to 20px is the right tier. Below 14px, body text becomes unreadable for users over 40 and fails most accessibility audits.
Mobile body text must be 16px or larger. iOS Safari auto-zooms any input field below 16px, which breaks layout and irritates users. The browser is enforcing accessibility, and you should align with it rather than fight it. MDN font-size documents the inheritance pattern.
Use rem units, not pixels. rem (root em) scales with the user's browser zoom setting. A user who has set their browser default font to 20px (common among users with low vision) sees a body of 20 times your base multiplier instead of a fixed pixel value. WCAG 2.2 SC 1.4.4 requires that text resize up to 200 percent without horizontal scroll; rem-based scales satisfy this; pixel-based scales fail.
Line height for body text: 1.5 to 1.7 for general body, 1.6 to 1.8 for long-form editorial. Shorter lines (under 60 characters) need less line height; longer lines (75 to 90 characters) need more. The classic Practical Typography guidance is 45 to 90 characters per line, with 65 to 75 as the sweet spot.
Six steps, clean rounding.
Working example with Perfect Fourth (1.333) and 16px base. Step 0 (body): 16px. Step 1 (small heading): 16 times 1.333 equals 21.328, round to 21px. Step 2 (h4): 16 times 1.333 squared equals 28.43, round to 28px. Step 3 (h3): 16 times 1.333 cubed equals 37.9, round to 38px. Step 4 (h2): 16 times 1.333 to the fourth equals 50.5, round to 50px. Step 5 (h1, display): 16 times 1.333 to the fifth equals 67.3, round to 67px (or 64 for a cleaner number).
Line height inverse to size. Large headlines need tight leading: h1 at 1.05 to 1.1, h2 at 1.1 to 1.2, h3 at 1.15 to 1.25, h4 at 1.25 to 1.35. Body text at 1.5 to 1.7. Captions at 1.4 to 1.5. The pattern: as font size grows, line height as a multiplier shrinks, because the absolute leading is still significant even at 1.05 times a 64px headline (3.2px of leading is plenty).
The full table with Perfect Fourth, 16px base, rounded: caption 12px line-height 1.5, small 14px line-height 1.5, body 16px line-height 1.7, lead 21px line-height 1.6, h4 28px line-height 1.3, h3 38px line-height 1.2, h2 50px line-height 1.1, h1 64px line-height 1.05. Editorial display 96 or 128px line-height 1. Most products use 6 to 8 of these steps; including more than 9 produces an indistinct hierarchy.
Letter spacing (tracking) matters most at the extremes. Large headlines (50px and up) benefit from negative tracking, typically minus 0.01 to minus 0.03 em, to counteract the optical sense that big letters are too loose. Small text (under 14px) benefits from positive tracking, plus 0.01 to plus 0.02 em, to keep letters from running together. Body text 16 to 24px sits at zero tracking.
CSS clamp does the work.
The pre-2020 pattern was media queries: h1 at 32px on mobile, 48px on tablet, 64px on desktop, with three or four breakpoint rules. The 2026 pattern is CSS clamp(), which expresses min, fluid, and max in one declaration: font-size: clamp(2.5rem, 1rem + 4vw, 4rem). The browser interpolates smoothly between min and max as viewport width changes. No media queries, no breakpoints, no jumps.
The middle (fluid) value combines a fixed offset and a viewport unit. The pattern font-size: clamp(2.5rem, 1rem + 4vw, 4rem) means: never smaller than 2.5rem, never larger than 4rem, and in between, scale as 1rem plus 4 percent of viewport width. At 320px viewport, the fluid value is 1rem plus 12.8px (about 2.05rem), so the clamp returns 2.5rem (the min). At 1440px viewport, the fluid value is 1rem plus 57.6px (about 4.6rem), so the clamp returns 4rem (the max). In between, smooth interpolation.
The full pattern for an h1, h2, h3 trio: h1 clamp(2.5rem, 1rem + 4vw, 4rem), h2 clamp(2rem, 0.875rem + 3vw, 3.125rem), h3 clamp(1.5rem, 0.75rem + 2vw, 2.375rem). Body stays at a fixed 1rem (16 to 18px). Captions stay at 0.875rem (14px). The display headlines scale fluidly; the body text stays readable. web.dev guide to min/max/clamp covers the math.
The benefit: one declaration replaces three or four media queries, the design works at every viewport not just the breakpoints, and edge cases (1100px tablet, 1900px ultrawide) all read correctly. The cost: clamp() is slightly less intuitive to debug, since the rendered size depends on viewport math. The trade is worth it; modern devices have so many viewport widths that fixed breakpoints leave gaps.
Twelve lines, production ready.
The Tailwind CSS font-size utility accepts any custom values via theme.extend.fontSize. The shape: theme.extend.fontSize equals an object where each key is the utility suffix and each value is a tuple of [size, lineHeight] or an array with letter spacing too. For a modular scale with clamp values, you set fontSize.h1 to ['clamp(2.5rem, 1rem + 4vw, 4rem)', { lineHeight: '1.05', letterSpacing: '-0.02em' }].
Full Tailwind 4 example: in tailwind.config.js (or the CSS-first config in Tailwind 4), extend fontSize with h1, h2, h3, h4, lead, body, small, caption keys. Each gets a clamp value for size and an object with lineHeight and letterSpacing. Then in components, write class="text-h1" instead of class="text-5xl md:text-6xl lg:text-7xl". Single source of truth; change the scale once and every heading updates.
The prose utility (Tailwind Typography plugin) handles long-form content: prose-base, prose-lg, prose-xl. Configure the plugin to use your custom font sizes via theme.extend.typography. Long-form journal posts render with the right hierarchy without per-element class decoration. Reference the tailwindcss-typography plugin for the config shape.
Final integration: brand book picks the ratio (Perfect Fourth 1.333), the base (16px desktop, 18px editorial), and the voice (which guides line height and letter spacing). Design system encodes the resulting sizes as Tailwind theme tokens. Components reference tokens (text-h1, text-body) and never reference raw values. A brand decision (change to Major Third) becomes a config-file edit; the product code never changes. Related reading: Brand book vs design system, Color system WCAG compliance, Motion tokens in Tailwind.
Six answers.
What is a modular type scale?
A type scale where each step relates to the next by a fixed ratio. Base size times ratio to the power of step. Common ratios: Major Third (1.250), Perfect Fourth (1.333), Golden Ratio (1.618). Removes arbitrary sizing decisions and creates visual rhythm.
What ratio should I use?
Major Third (1.250) for dense UI dashboards, Perfect Fourth (1.333) for marketing sites and editorial, Golden Ratio (1.618) for highly editorial brands wanting strong hierarchy. Pick once and don't mix.
What's the right base size in 2026?
Body 16 to 18px desktop, 16px minimum mobile (browser default; smaller triggers iOS zoom). Editorial long-form 18 to 20px reads better. Use rem so users can scale via browser zoom.
How do I make the scale fluid across screen sizes?
Use CSS clamp(min, fluid, max). Example: clamp(2.5rem, 1rem + 4vw, 4rem) for h1. Set min so it never gets unreadable on small phones; max so it never gets oversized on widescreens.
Should every brand use a modular scale?
Most should. Editorial brands benefit most. Highly utilitarian dashboards sometimes prefer fixed-step scales (12, 14, 16, 20, 24) for density. The principle (consistent ratio) matters more than the specific math.
How does this fit a brand book and design system?
Brand book picks the ratio plus base plus voice. Design system encodes the resulting sizes as tokens. Components reference tokens, not raw values. The brand book makes the choice; the design system makes it stick.
Set the scale once.
We build the type system that anchors a brand book to a design system. Ratio, base, line heights, fluid scaling, Tailwind tokens, prose plugin. Scoped quote in 48 hours.
More from Eleanor.
Senior Partnerships Manager · New-york · 6 posts on the site
Published .