CSS Type Scale Generator — Free Online Tool

Generate a modular type scale as CSS custom properties. CSS Type Scale Generator is a free online tool from the ToolsRift CSS Generators collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.

Loading CSS Type Scale Generator…

How to use CSS Type Scale Generator

  1. Open the CSS Type Scale Generator above — it loads instantly, no account needed.
  2. Enter or upload your input. Everything is processed locally on your device.
  3. Get your result immediately and copy or download it with one click.

Frequently asked questions

What is a modular type scale?

A set of font sizes derived by repeatedly multiplying a base size by a fixed ratio for visual harmony.

What ratio should I use?

Common ratios include 1.25 (major third) and 1.618 (golden ratio); larger ratios create more contrast.

How are the sizes calculated?

Each step multiplies the base size by the ratio raised to the step number, so base 16 at ratio 1.25 gives 20 at step one.

More CSS Generators

CSS Hex to RGBA Converter
Convert hex colors to rgba() with an adjustable alpha channel
CSS Gradient Generator
Build linear, radial and conic gradients with live preview
CSS Box Shadow Generator
Create layered box shadows with full control and preview
CSS Text Shadow Generator
Generate text shadow effects with live typography preview
CSS Border Radius Generator
Fine-tune all four corners individually with live preview
CSS Flexbox Generator
Visual flexbox layout builder with all properties

← View all CSS Generators