Privacy Protected

Type Scale Calculator

Generate a mathematically consistent typography hierarchy

Scale Parameters

Define your mathematical constraints

Base Size (px)

Usually 16px is the standard browser default.

Scaling Ratio

CSS Variables

Root assignments in REM

:root {
  --font-size-base: 16px;
  --font-size-h1: 5.610rem; /* 89.8px */
  --font-size-h2: 4.209rem; /* 67.3px */
  --font-size-h3: 3.157rem; /* 50.5px */
  --font-size-h4: 2.369rem; /* 37.9px */
  --font-size-h5: 1.777rem; /* 28.4px */
  --font-size-h6: 1.333rem; /* 21.3px */
  --font-size-body: 1.000rem; /* 16.0px */
  --font-size-small: 0.750rem; /* 12.0px */
}

Hierarchy Preview

Using Perfect Fourth (1.333) ratio

H1

The quick brown fox jumps over the lazy dog

89.76px•5.610rem

H2

The quick brown fox jumps over the lazy dog

67.34px•4.209rem

H3

The quick brown fox jumps over the lazy dog

50.52px•3.157rem

H4

The quick brown fox jumps over the lazy dog

37.90px•2.369rem

H5

The quick brown fox jumps over the lazy dog

28.43px•1.777rem

H6

The quick brown fox jumps over the lazy dog

21.33px•1.333rem

Body

The quick brown fox jumps over the lazy dog

16.00px•1.000rem

Small

The quick brown fox jumps over the lazy dog

12.00px•0.750rem

Type Scale Calculator

Generate a perfectly balanced typography scale using mathematical ratios like Golden Ratio or Perfect Fourth. Design consistent H1-H6 headers.

1

Set Base Pixel

Enter the base font size for your body text (e.g., 16px).

2

Choose Ratio

Select a mathematical ratio to determine the step increment between sizes.

3

Inspect Scale

Review the vertical hierarchy to ensure labels and headings are balanced.

4

Export Units

Copy the calculated values as CSS variables, REMs, or raw pixels.

Achieve visual harmony and mathematical precision in your design system with our Type Scale Calculator. A consistent typographic scale is the backbone of a professional UI, ensuring that your headings and body text maintain a clear and logical hierarchy across all screen sizes. Our calculator allows you to define a base font size and choose from several classic ratios—from the subtle Major Second to the dramatic Golden Ratio. As you adjust the parameters, the tool instantly generates a complete scale for H1 through H6, along with small body copy and button sizes. Stop guessing your font sizes. Use our interactive preview to see how your scale looks in a vertical stack or within a sample content layout, then copy the CSS variables or relative REM values directly into your project.

Key Features

Mathematical Ratios

Select from established ratios like Golden Ratio, Perfect Fourth, and Major Third.

Base Size Flexibility

Define your base font size in pixels and see the scale adapt instantly.

H1-H6 Hierarchy

Visualize the full range of headers to ensure clear visual progression.

Clean CSS Export

Generate CSS variables or REM units for easy design system integration.

Frequently Asked Questions

A type scale is a set of font sizes that follow a mathematical ratio, ensuring that the visual difference between sizes remains consistent and harmonious.

Subtle ratios like Major Second (1.125) are great for information-dense sites, while the Golden Ratio (1.618) is best for creative or marketing-heavy designs.

REMs are generally preferred for accessibility and responsive design, while pixels are useful for initial layout mockups.

Related Tools

Line Height Calculator

Calculate the perfect vertical rhythm and line height for readable body text.

IP Subnet Calculator

Calculate subnets and CIDR.

CSS Text Shadow Generator

Create multi-layer text shadows.

CSS Transform Playground

Visualize CSS 2D transforms.

VW/VH Calculator

Convert pixels to viewport units (vw/vh).

CSS Text Gradient Generator

Create beautiful gradient effects for typography.

Last updated on March 1, 2026