Skip to content

Typography Generator

DesignTypography and Icons

The body text size the scale grows from.

The html font-size; browsers default to 16 px.

Largest size —
Largest size (rem)
—
Smallest size (px)
—
Largest ÷ smallest
—
CSS custom properties
—

A typography generator multiplies a base font size by a fixed ratio once per step to give a consistent set of heading and text sizes. With 16 px body text and the major third ratio of 1.25, five steps up give 16 × 1.25^5 = 48.83 px (3.052 rem), and two steps down give 10.24 px.

About this tool

Picking heading sizes by eye usually ends with an h3 that is barely larger than an h4 and a hero title that looks borrowed from another site. A modular scale fixes that by tying every size to one base and one ratio, the same way musical intervals relate notes. This generator takes your body size, a ratio from minor second (1.067) to golden ratio (1.618), and how many steps you want above and below. It lists every step in pixels and rem, suggests a line height for headings and body copy, and prints a line of CSS custom properties you can paste into a stylesheet. It does not choose typefaces or check how a particular font renders: two fonts at the same pixel size can differ noticeably in x-height, so test the scale with your actual font.

How to use it

  1. Set the base size

    Enter the body text size in pixels, usually 16 to 18 px for web reading.

  2. Choose a ratio

    Small ratios such as 1.125 suit dense apps; 1.333 and above give dramatic editorial headings.

  3. Pick the number of steps

    Use the steppers to set how many sizes sit above and below the base.

  4. Copy the output

    Read sizes from the table or copy the CSS custom properties line; change the root size if your html font-size is not 16 px.

Examples

Major third from 16 px

Base font size
16
Scale ratio
1.25 Major third
Steps above base
5
Steps below base
2
Root size for rem
16

Result Largest size: 48.83 px
Largest size (rem): 3.052
Smallest size (px): 10.24
Largest ÷ smallest: 4.77
CSS custom properties: –step-5: 3.052rem; –step-4: 2.441rem; –step-3: 1.953rem; –step-2: 1.563rem; –step-1: 1.25rem; –step-0: 1rem; –step-m1: 0.8rem; –step-m2: 0.64rem;

  1. Size at step n = 16 px × 1.25^n
  2. Largest: 16 × 1.25^5 = 48.83 px = 3.052 rem (÷ 16)
  3. Smallest: 16 × 1.25^-2 = 10.24 px

Five steps up reach 48.83 px for a hero heading; two steps down land at 10.24 px, which triggers the small-text warning.

Perfect fourth, compact scale

Base font size
16
Scale ratio
1.333 Perfect fourth
Steps above base
2
Steps below base
0
Root size for rem
16

Result Largest size: 28.43 px
Largest size (rem): 1.777
Smallest size (px): 16
Largest ÷ smallest: 1.78
CSS custom properties: –step-2: 1.777rem; –step-1: 1.333rem; –step-0: 1rem;

  1. Size at step n = 16 px × 1.333^n
  2. Largest: 16 × 1.333^2 = 28.43 px = 1.777 rem (÷ 16)
  3. Smallest: 16 × 1.333^-0 = 16 px

Two steps of 1.333 take 16 px body text to a 28.43 px heading, a short scale suited to dense interfaces.

How it is calculated

size(n) = base × ratio^n; rem = size ÷ root

base
Body text size in px (step 0)
ratio
Multiplier between neighbouring steps
n
Step number, negative below the base
root
Root (html) font size used to convert px to rem

Each step multiplies the previous one by the ratio, so the gap between sizes grows in proportion rather than by a fixed number of pixels. Steps below zero divide instead. Pixel values are rounded to two decimals and rem values to three. Line heights follow a common convention: 1.5 for body and smaller text, 1.3 for minor headings and 1.2 for large headings, because tall headings need less leading.

When not to use it

  • Skip it when a design system already fixes its type tokens.
  • It does not produce fluid clamp() sizes that change with viewport width.
  • It cannot judge legibility of a specific typeface or language script.

Common mistakes

  • Using a large ratio with many steps, which produces headings over 100 px.
  • Forgetting that rem values assume the root size you entered.
  • Letting the smallest step drop below 12 px for body or caption text.
  • Mixing ratios between headings and body, which breaks the rhythm the scale gives.

Frequently asked questions

Which ratio suits a website?

For content sites, 1.2 or 1.25 keeps headings clearly distinct without huge jumps. Product dashboards often use 1.125 because many levels must fit in a small space. Marketing pages with large hero titles can go to 1.333 or 1.5.

Why use rem instead of px?

Rem sizes scale with the reader's browser font setting, so someone who raises their default from 16 px to 20 px gets larger text everywhere. Pixel sizes ignore that preference in most browsers.

What does the golden ratio give?

At 1.618 each step is about 62 percent larger than the one below, so a 16 px base reaches 25.89 px in one step and 41.89 px in two. It works for few, very contrasting levels but grows too fast for six headings.

How are the suggested uses assigned?

Step 0 is body text, steps 1 to 6 map to h6 through h1, and higher steps are labelled display sizes. Steps below zero are small text and captions. Rename them freely; the sizes are what matter.

Where do the ratio names come from?

They borrow musical interval names: a perfect fifth is a 3:2 frequency ratio, so 1.5, and a major third is 5:4, so 1.25. Tim Brown popularised applying them to type sizes.

How do I apply the generated sizes in CSS?

Paste the custom properties inside a :root rule, then set font-size: var(–step-2) on an element. Negative steps are named –step-m1, –step-m2 so the names stay valid CSS.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 28). Typography Generator. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/typography-and-icons/typography-generator/

MLA

Tools Directory Editorial Team. “Typography Generator.” Tools Directory, 28 Oct. 2026, https://tools.milunir.com/design/typography-and-icons/typography-generator/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Typography Generator.” Tools Directory. Last modified October 28, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/typography-and-icons/typography-generator/.

Link<a href="https://tools.milunir.com/design/typography-and-icons/typography-generator/">Typography Generator – Tools Directory</a>