Font Size Scale Generator

Generate a harmonious typographic scale using modular ratios for consistent design.

How to Use Font Size Scale Generator

1

Set a base size

Enter your base font size in pixels or rems.
2

Choose a scale

Select a modular scale ratio like 1.25, 1.333, or 1.618.
3

Preview the scale

See all heading and body sizes in the generated type scale.
4

Copy the values

Export the scale as CSS custom properties or a Tailwind config.

Tested tool guide Tested browser tools Checked August 16, 2026

What Font Size Scale Generator does and how it behaves

A base font size and a modular ratio define the ladder this generator produces. Provide the starting size and ratio, then use the resulting steps as candidate sizes for body copy, headings, labels, and display text. Each step is proportional to the previous one, so the gaps grow as sizes increase instead of staying fixed. That compounding behavior is the common surprise: a ratio that looks modest near the base can create very large upper steps. The generated values are a scale, not a guarantee that every step will suit a particular font, viewport, or hierarchy.

How the result is produced

Scale calculation

Each scale position can be described as the base size multiplied by the ratio raised to an integer step: s(n) = b * r^n. Step 0 is the base, positive steps are larger, and negative steps are smaller. Because multiplication is repeated, the absolute difference between neighboring values is not constant. The ratio controls the scale's pace, while the base anchors its overall size.

Units and proportions

The numeric unit matters when applying the generated scale. A sequence interpreted in pixels uses absolute CSS lengths, while rem values are relative to the root element's font size. The ratio itself is unitless. Converting a pixel target to rem requires a root-size assumption. Changing that assumption changes the rem numbers, but not the proportions between corresponding steps.

Good uses

Building CSS typography tokens from a 16 px body-size anchor before assigning candidate values to body copy, captions, subtitles, section headings, page titles, and display text.
Comparing a restrained ratio for a dense data dashboard with a wider ratio for a sparse editorial landing page, while keeping the same base size for a fair comparison.
Auditing an existing design system for irregular jumps by placing its current font sizes beside a generated modular sequence and deciding which exceptions are intentional.

Limits and checks

The sequence expresses mathematical proportion, not semantic importance. A heading level does not have to consume the next available step, and skipping a step is not an error.
Rounded values may no longer preserve the exact ratio, especially among smaller steps. Keep a consistent precision policy when turning generated results into design tokens or CSS declarations.
Equal ratios do not look equal across typefaces because x-height, character width, weight, and optical sizing affect perceived scale. Judge rendered text specimens, not the numbers alone.

Common questions

What modular ratio should I choose?

There is no universal best ratio. A smaller ratio keeps neighboring steps close and usually provides more intermediate sizes; a larger ratio creates stronger jumps and reaches display sizes quickly. Start from the density and hierarchy your design needs, then inspect actual text in its intended font. The same ratio can feel restrained in one typeface and dramatic in another.

Does the generated scale make typography responsive or accessible?

No. It supplies proportional size candidates only. It does not decide line length, line height, wrapping behavior, viewport breakpoints, minimum readable size, or whether zoomed content still works. Treat the values as tokens to test in context. Responsive implementations may interpolate or switch between sizes, and accessibility still requires testing content, layout, browser zoom, and user text-size preferences.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.