# Modular Type Scale Generator

> Build a modular typographic scale and copy it as CSS custom properties.

A modular scale multiplies each size by a fixed ratio, so every step relates to the last in the same way and the whole set reads as one system rather than eight arbitrary numbers. 1.25 (a major third) is a safe default for interfaces; 1.618 gives dramatic headings but leaves a large gap just above body size. Output in rem rather than px so the scale respects a reader who has changed their browser font size — a px scale silently overrides that preference.

**URL:** https://convertto.tech/t/type-scale-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Set the base size.
2. Choose the ratio.
3. Set the steps above the base.
4. Choose the unit.
5. The result appears immediately — copy or download it.

## FAQ

### Which ratio should I pick?

For dense interfaces, 1.2 to 1.25 — the steps stay close enough that you can use several without the page feeling shouty. For editorial layouts with few levels, 1.414 or 1.618 give headings real presence. The larger the ratio, the fewer steps you can actually use.

### Why rem instead of px?

rem is relative to the root font size, which is what a reader changes when they increase text size in their browser. A px scale ignores that setting entirely, so the page stays small for someone who has explicitly asked otherwise.

### Should line height scale too?

Inversely. Large text needs proportionally tighter leading — around 1.1 for display sizes against 1.5 for body. Applying one line-height to the whole scale leaves headings looking loose and body copy cramped.

## Related tools

- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [Gradient Text Generator](https://convertto.tech/t/gradient-text-generator): Fill text with a gradient, a metallic sheen or a chrome effect using background-clip.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.