Click2Tool

Typography Scale Generator

Generate a harmonious type scale based on a ratio

How to use the Typography Scale Generator

  1. Enter your details in the fields above.
  2. See your results instantly - free, no signup.
  3. Copy, share or bookmark the result.

What Is the Typography Scale Generator?

The Typography Scale Generator creates a related set of text sizes from a base font size and a ratio. It helps you plan a visual hierarchy instead of choosing every heading, caption, and body size independently. A modular type scale is especially useful when a page needs clear differences between text roles without an arbitrary collection of font sizes.

This tool shows nine named sizes, from xs and sm through base, lg, xl, 2xl, 3xl, 4xl, and 5xl. Each row includes an Aa preview, a pixel label, and a rem value. It also creates CSS custom property declarations that you can copy into your own stylesheet.

How to Use the Typography Scale Generator?

Enter a value in Base size (px). The default is 16. In Scale ratio, choose Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), or Golden Ratio (1.618). Major Third is selected initially.

The Type Scale panel updates immediately. The base row uses your starting size, while the two smaller rows divide by the ratio and the larger rows multiply by it repeatedly. Compare the Aa samples, then use the panel's copy control. The output uses names such as --font-base and --font-xl, with rem values and pixel comments. Place these declarations inside an appropriate CSS rule, such as your root selector, and reference them from your text styles.

Practical Examples and Use Cases

  • For an article template, use the base size as a body-text starting point and compare larger steps for section headings. Check captions separately rather than automatically assigning the smallest result.
  • For a dense dashboard, compare a smaller ratio to avoid making neighboring labels dramatically different in size.
  • For a promotional page, explore a larger ratio for stronger heading contrast, then verify that long titles still fit.

At a 16px base and Major Third ratio, lg is 20px and xl is 25px. This makes the hierarchy easy to explain during a design review. The Spacing & Scale Calculator can help plan related gaps separately, but this typography tool does not generate margins, paragraph spacing, or a complete text style system.

Best Practices and Tips

  1. Start with readable body text and work outward. A mathematically neat scale can still produce captions that are too small or display sizes that overwhelm a mobile screen.
  2. Test your actual font and content in the final page. The tool previews Aa in its own display styling; it has no font-family picker, editable sample text, or line-height controls.
  3. Understand the conversion. Rem values are calculated using a 16px reference and shown to three decimal places. Pixel labels are rounded to whole numbers, so they can differ slightly from the rem value expressed in pixels.
  4. Add line height, weight, and responsive behavior yourself. The copied variables define sizes only and do not include media queries or fluid sizing.
  5. Use positive numeric input and keep a manageable selection of roles. Nine generated steps are available, but a simple page may need only a few of them.

Useful for

  • Planning heading hierarchies
  • Creating font-size variables
  • Comparing modular type ratios
  • Documenting typography sizes

Who should use it

  • Web designers
  • Frontend developers
  • Design system authors
  • Blog template builders

Common mistakes to avoid

  • Treating font sizes as complete typography styles
  • Assuming rem values adapt to your root setting in the calculator
  • Using tiny steps without checking readability
  • Expecting automatic responsive sizing

When not to use it

  • When you need font pairing recommendations
  • When you need line-height controls or fluid CSS output

Frequently asked questions

Does the generator create responsive fluid typography?

No. It produces fixed rem custom property values. Add responsive rules or fluid sizing separately.

Can I choose a font family or preview my own text?

No. The preview uses Aa with the tool's existing styling. Test the output with your chosen font in your project.

Why do pixel labels and rem values sometimes differ slightly?

Pixel labels round to whole numbers, while rem values come from the calculated size before that final whole-pixel rounding.

Where should I paste the copied font variables?

Place the declarations inside a CSS rule, commonly :root, then use var(--font-base) or another generated variable in your text styles.

Related Design Tools

See all Design Tools