Typography Scale Calculator

Generate a modular type scale from a base font size and ratio.

Base Font Size

Scale Ratio

Number of Steps

Tab to move between fields

H1 Size

48.83 px

H2 Size39.06 px

H3 Size31.25 px

Body Size16 px

Body Line Height24 px

Small Text12.8 px

How to Use This Calculator

Enter the Base Font Size in pixels — typically 16px for body text in web design.
Enter the Scale Ratio: 1.25 (Major Third), 1.333 (Perfect Fourth), or 1.618 (Golden Ratio).
Enter the Number of Steps to generate heading levels above the base size.
Review H1, H2, and H3 sizes in pixels and the recommended Body Line Height.
Use the scale to set CSS custom properties or design tokens for a consistent typographic system.

How the result changes with Scale Ratio

Base Font Size: The body text font size that forms the scale's foundation.
Scale Ratio: Multiplier between each step. Common: 1.25 (Major Third), 1.333 (Perfect Fourth), 1.618 (Golden).
Number of Steps: How many heading levels to generate above the base size.

Identify Input Parameters
Base Font Size = 16, Scale Ratio = 1.25, Number of Steps = 6 = 3 input(s) provided
Calculate H1 Size
H1 Size
48.83 = 48.83
Calculate H2 Size
H2 Size
39.06 = 39.06
Calculate H3 Size
H3 Size
31.25 = 31.25