Type Scale Calculator Widget

Give front-end developers and designers a modular type scale generator. Choose a base size and a musical ratio, set the steps up and down, and get every size in px and rem, a live preview and a CSS custom-properties block to copy.

Design Generator Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/type-scale-calculator" title="Type Scale Calculator by A2Z Tools" width="100%" height="1470" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

A modular scale multiplies a base font size by the same ratio at every step: step n is base x ratio^n, with negative steps for small print. A 16px base on a major third (1.25) gives 20, 25, 31.25, 39.06 and 48.83px going up and 12.8 and 10.24px going down. The ratio presets are the traditional interval names from music - minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5 - plus the golden ratio 1.618, or any custom ratio between 1.01 and 3. Each size is also given in rem, dividing by the root font size (16px unless you change it), because rem units follow the reader's browser font setting. The preview renders a sample line at every size, and Copy result hands you a :root block of --step-n custom properties ready for a stylesheet. A warning appears when the smallest step falls under 10px.

Method

  • size(n) = base x ratio^n, n = -down ... +up
  • rem = px / root font size (CSS: 1rem = the root element's font size)
  • CSS output: --step-n: <rem>rem for every step

Worked examples

Major third from 16px

Inputs: Base 16px, ratio 1.25, 5 up, 2 down, root 16px

Result: 48.83, 39.06, 31.25, 25, 20, 16, 12.8, 10.24px; step 5 = 3.052rem

16 x 1.25^5 = 48.828.

Perfect fifth, one step each way

Inputs: Base 16px, ratio 1.5

Result: --step-1: 1.5rem (24px); --step-0: 1rem; --step--1: 0.6667rem (10.67px)

16 x 1.5 = 24; 16 / 1.5 = 10.67.

Limitations

  • Produces a single fixed scale; responsive clamp() values are not generated.
  • Line heights and letter spacing are not suggested.
  • The preview uses the frame's system font, so real proportions depend on your typeface's x-height.

Where publishers use it

  • Design-system documentation sites letting contributors try alternative scales
  • Front-end tutorials on CSS custom properties and rem units
  • Agency style-guide pages agreeing a heading hierarchy with clients
  • WordPress and Shopify theme blogs showing how to set theme.json or settings font sizes
  • Typography courses comparing how calm or dramatic each ratio feels

Questions

Which ratio should I pick?

Smaller ratios (1.125-1.25) suit text-heavy sites and apps with many heading levels; larger ones (1.333-1.618) suit marketing pages with few, big headings. A 1.25 scale gives a 16px base an h1 of about 39-49px.

Why rem instead of px?

rem sizes scale with the reader's browser font-size setting, so people who enlarge text get bigger headings too. With the default 16px root, 1.25rem = 20px.

What does step -1 mean?

One step below the base: base / ratio. On a 16px major-third scale it is 12.8px, typical for captions; step -2 is 10.24px, small enough that the widget suggests keeping it for fine print.

Can I make the scale fluid?

This widget makes a fixed scale. For fluid type, generate one scale for small screens and one for large and interpolate between them with CSS clamp().

How do I use the CSS block?

Paste it into your stylesheet and set font-size: var(--step-3) on h1, var(--step-2) on h2 and so on. The px value is kept as a comment beside each rem value.

Sources

  1. CSS Values and Units Module Level 4 - font-relative lengths - W3C . Defines rem as the font size of the root element, the basis of the px-to-rem conversion. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Type Scale Calculator
https://a2z.tools/embed/type-scale-calculator

Related widgets

More Design widgets →

Preview

CustomizeGet code