Typography Scale Generator

A modular type scale is a set of font sizes generated by multiplying a base size by a fixed ratio, repeated for each step: fontSize = baseSize × ratio^n. For example, with a 16px base and a 1.25 ratio (Major Third), the next size up is 16 × 1.25 = 20px, then 16 × 1.25² = 25px, and so on, while sizes below the base divide by the ratio instead. Because every size shares the same mathematical relationship, the whole system feels intentional rather than arbitrary. This is how our generator calculates each level from your chosen base size and ratio.

It depends on how much contrast you want between sizes. Subtle ratios like Minor Second (1.067) or Major Second (1.125) suit content-dense UIs and long-form reading where you don't want headings to overpower body text. Minor Third (1.200) and Major Third (1.250) are the most versatile "safe" choices for SaaS products, corporate sites, and general layouts. Want more visual punch on a landing page or portfolio? Reach for Perfect Fourth (1.333) or Augmented Fourth (1.414, the square root of 2). Perfect Fifth (1.500) and the Golden Ratio (1.618, the mathematical constant φ) produce dramatic, editorial-style hierarchy best reserved for headline-driven or luxury designs. If you're unsure, start with 1.25 and adjust after previewing real content.

16px is the standard starting point because it matches the default browser font size, renders crisply at typical viewing distances, and keeps 1rem equal to 16px so your math stays simple. Content-heavy platforms sometimes push the base to 18–20px for improved readability, while dense, data-driven interfaces (admin panels, dashboards) can drop to 14px. Avoid going below 14px for body copy. It fails comfortable-reading thresholds and forces users to zoom, which hurts accessibility.

Most production design systems settle on 5–8 sizes total: a handful of heading levels (h1–h6 or a subset), a body/paragraph size, and one or two smaller sizes for captions or labels. Our generator defaults to this range (h1 through h6 plus paragraph and small text) and lets you add extra display sizes above or a "tiny" size below if your project needs them. Resist the urge to add more; too many sizes reintroduce the inconsistency a modular scale is meant to eliminate.

Both have a place. Fixed, rem-based sizes (what this tool exports as CSS custom properties, e.g. --font-size-h1) are predictable, easy to debug, and pair well with a couple of breakpoint overrides for mobile. That's the pattern our exported CSS uses. CSS clamp(min, preferred, max) instead interpolates a size fluidly between a minimum and maximum viewport width, removing the visible "jump" at breakpoints; it shines for large display headlines but is usually overkill for body text, where the size difference across viewports is only a couple of pixels. A common hybrid: keep body and UI text on the rem scale this tool generates, and wrap just your largest heading sizes in clamp() using the rem values as your min/max bounds.

Line-height should move inversely with font size. Large headings read best tight, around 1.1 to 1.3, because short lines of big type don't need much breathing room and excess spacing looks disconnected. Body text needs more: 1.5 to 1.6 is the widely recommended range for comfortable long-form reading (and is close to what WCAG 1.4.8 recommends as a minimum). Small text like captions or labels sits in between, typically 1.4. This is why our generator assigns progressively looser line-heights as it steps down from h1 (1.1) to small text (1.4), rather than applying one line-height to every size.

Yes, and it's good practice. A ratio that looks balanced on a 1440px desktop viewport can make headings feel oversized on a 375px phone screen, since the same multiplier applies to a much narrower canvas. A common fix is to keep the same base size but drop to a gentler ratio on mobile (for example, stepping down from Perfect Fourth at 1.333 to Minor Third at 1.200), or reduce the base size slightly, which is why our exported CSS includes a mobile media query that lowers --base-font-size at narrow widths. Use the desktop/mobile preview toggle in the tool above to check your scale at both sizes before exporting.