Skip to content
📐

Type Scale Generator

Build a modular type scale from a base size and a ratio, then copy it as CSS custom properties with an optional fluid clamp() version.

The scale

Preview

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Choosing a ratio

A ratio near 1.2 is subtle and suits dense, content-heavy pages. Around 1.333 gives a clear hierarchy without drama and is a good default. Above 1.5 the steps grow fast, which suits a marketing page with few words per screen and breaks down on a dense blog.

Musical ratios are not "correct" typography — they are just named and easy to remember. Two steps either side of your base size is usually plenty; a ten-step scale is mostly a way to produce unreadable body text.

More in Design Tools

View all →
Color Blindness Simulator Preview colour vision deficiency Pixel Art Maker Pixelate an image to a fixed palette Meme Generator Add Impact-style captions to a photo Avatar Generator Deterministic avatars from a seed Icon Generator Build an SVG icon from shapes Google Font Pairing Generator Pair a heading font with a body font

What Is Type Scale Generator?

The Type Scale Generator builds a modular type scale from a base size and ratio - perfect fourth by default, with golden ratio and custom ratios supported. It renders every step in pixels and rems, previews the scale live, and outputs both fluid clamp() CSS and classic static CSS.

Who Uses the Type Scale Generator?

Web designers and front-end developers use it to bring consistent, harmonious typography to new projects and design systems.

How to Use the Type Scale Generator

  1. Set your base font size, usually 16 pixels.
  2. Pick a ratio preset or enter a custom value.
  3. Choose how many steps the scale needs.
  4. Copy the fluid or static CSS into your stylesheet.

Why Choose Our Type Scale Generator?

  • Musical ratios including perfect fourth and golden ratio
  • Fluid clamp() output plus classic static CSS
  • Live preview with pixel and rem values per step

Try the Type Scale Generator above — it is free, fast, and works on any device. Bookmark this page to return whenever you need it.