Loading…

How to use CSS Type Scale Generator

Set a base size and a scale ratio, and the tool generates a full modular type scale as CSS custom properties.

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
CSS Grid Generator
Build CSS grid templates visually with live preview
CSS Animation Generator
Create keyframe animations with easing and timing control
CSS Filter Generator
Combine blur, brightness, contrast and other CSS filters
CSS Transform Generator
Chain rotate, scale, translate and skew transforms visually
CSS Transition Generator
Generate smooth CSS transition definitions with easing
CSS Button Generator
Design custom buttons with hover states and full styling

← View all CSS GeneratorsBrowse all 1,100+ tools →