Typography Scale Calculator

Create a balanced type scale for your website. Choose a base size and ratio to generate consistent font sizes for all headings and text.

Type Scale Calculator

Calculate typography scales

Input

Output

How to use

Enter your data in the input field, click Convert, and the result will appear in the output field. You can then copy or download the result.

How the Type Scale Calculator Works

This tool generates a complete typography scale based on mathematical ratios. Enter your base font size and choose a scale ratio to instantly see all heading sizes from H1 through H6, plus body text sizes.

Type scales use modular ratios like the golden ratio (1.618), major third (1.25), or perfect fourth (1.333). Each heading level multiplies the base size by the ratio raised to a power. H1 might be base × ratio⁵, H2 is base × ratio⁴, and so on.

The preview shows how your scale looks in real time. Adjust the base size or ratio until the hierarchy feels balanced. The tool also generates CSS custom properties you can copy directly into your stylesheet.

When You'd Actually Use This

Starting a new web design project

You're building a website from scratch and need consistent heading sizes. Generate a type scale once, export the CSS variables, and maintain perfect typography hierarchy throughout the project.

Fixing inconsistent headings

Your site has random font sizes scattered across pages. Use this tool to create a unified scale, then replace all hardcoded sizes with the generated CSS variables.

Creating a design system

Your team needs typography standards. Generate multiple scale options, present them to stakeholders, and document the chosen scale in your design system guidelines.

Improving mobile readability

Your headings look great on desktop but overwhelm mobile screens. Generate a separate mobile scale with a smaller base size while maintaining the same ratio.

Matching brand typography

Your brand guidelines specify exact heading sizes. Work backwards—enter the H1 size and adjust the ratio until the scale produces your required sizes.

Auditing existing designs

You inherited a site with mysterious font sizes. Test different ratios to reverse-engineer the original scale, then document it for future maintenance.

What to Know Before Using

Base size is usually 16px.Most browsers default to 16px. Changing this affects all relative units. If you set base to 18px for accessibility, your entire scale shifts proportionally.

Smaller ratios create subtle hierarchy.Ratios like 1.125 (major second) create gentle size differences. Larger ratios like 1.618 (golden ratio) create dramatic contrast between headings.

Line height should adjust with size.Larger headings need tighter line height (1.1-1.3). Body text needs more (1.5-1.7). Don't use the same line height across all sizes.

Consider viewport-based scaling.For responsive design, use CSS clamp() with your scale values. This creates fluid typography that grows smoothly between breakpoints.

Pro tip: Test your scale at actual content lengths. A ratio that looks good with "Heading" might feel off with "The Complete Guide to Modern Web Typography in 2024".

Common Questions

What ratio should I choose?

For most websites, 1.25 (major third) or 1.333 (perfect fourth) work well. Use 1.5+ for bold, editorial designs. Use 1.125-1.2 for content-heavy sites with many heading levels.

Should I use px, rem, or em?

Use rem for accessibility—it respects user font preferences. The tool outputs rem by default. Only use px for fixed-size elements like icons or borders.

How many heading levels do I need?

Most sites use H1-H4. H5 and H6 are rare. If you need more than 4 levels, consider redesigning your content hierarchy instead of adding more sizes.

Can I use different ratios for different sections?

Yes, but be careful. You might use a larger ratio for hero sections and a smaller one for blog content. Just keep body text consistent across the site.

What about negative steps for small text?

Good scales include sizes smaller than base for captions, footnotes, and labels. The tool generates these by dividing base by the ratio (base × ratio⁻¹, ratio⁻², etc.).

Does this work with variable fonts?

Yes. Type scales control size, variable fonts control weight and other axes. Use both together—pick a scale for sizes, then adjust weight to enhance hierarchy.

How do I implement the CSS variables?

Copy the generated CSS into your root selector. Then use var(--text-4xl) for H1, var(--text-3xl) for H2, etc. Apply consistently across your components.

Other Free Tools

Search tools