HesapHanem

Modular Type Scale Calculator

Build a harmonious type scale of five font sizes from a base size and your chosen ratio.

Result

16.00 px
20.00 px
25.00 px
31.25 px
39.06 px

How it is calculated

The tool builds five font sizes by repeated multiplication: size(i) = base × ratio^(i − 1) for i = 1 to 5, so the first size equals the base and each next size is the previous one times the ratio. The base is a size in pixels and the ratio is a plain number such as 1.25 for a major third. Both must be greater than zero. Each size is shown with two decimals and the unit px, calculated from the unrounded value so rounding errors do not accumulate. The tool only steps upward from the base. A ratio below 1, such as 0.8, would instead give five shrinking sizes.

Worked example

Take a body text base of 16 px and a ratio of 1.25. Step 1 is 16.00 px. Step 2 is 16 × 1.25 = 20.00 px. Step 3 is 16 × 1.25² = 25.00 px. Step 4 is 16 × 1.25³ = 31.25 px. Step 5 is 16 × 1.25⁴ = 39.0625, shown as 39.06 px. A designer could use 16 px for body text, 20 px for lead text, 25 px for subheadings, 31.25 px for section titles and 39.06 px for the page heading.

Try this example →

Common mistakes

  • Entering the ratio as a percentage, such as 125: the ratio is a plain multiplier, so 125 would make the second size 2,000 px instead of 20 px.
  • Entering the base in rem or pt: the base is in pixels, and the results are in px, so convert before use. With a 16 px browser default, 1 rem is 16 px.
  • Expecting sizes smaller than the base for captions or footnotes: the scale only goes up from the base. Run a second scale with a ratio below 1, or use the base for the smallest text.
  • Using the raw decimals directly: 39.0625 px may render differently across browsers, so decide whether to round to whole pixels or keep the fraction.

About this calculator

A modular type scale generates a set of font sizes by repeatedly multiplying a base size by a fixed ratio: size(n) = base × ratio^n, so each step up the scale is proportionally related to its neighbours rather than picked arbitrarily. This calculator takes your base size in pixels and the ratio and lists five ascending sizes, from the base itself (n = 0) up to base × ratio^4; for sizes smaller than the base, divide the base by the ratio. Common ratios borrowed from music and classical proportion include the minor third (1.2), major third (1.25), perfect fourth (1.333), and the golden ratio (1.618) — smaller ratios give subtle, closely-spaced sizes suitable for dense UI text, while larger ratios create dramatic contrast suited to editorial or marketing headlines.

Type designers, UI/UX designers, and front-end developers use a modular scale to keep a design system's typography internally consistent — headings, subheadings, and body text all relate by the same mathematical ratio instead of being eyeballed size by size, which is the same principle many design systems apply to their type scales.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    Ratio choice matters more than it looks across five steps. With a 16 px base, a major third of 1.25 tops out at about 39 px, a comfortable page heading. The golden ratio of 1.618 reaches about 109.7 px by the fifth step, which is far too large for most headings on a phone screen. Pick the ratio by the largest size you actually need. Which ratio and base size do you use for your body text?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators