Super Boring Tools

Search tools

Find a tool by name or what it does.

Type Scale Generator

Build a modular type scale from a base size and a ratio, with px and rem values, CSS custom properties, and live heading previews.

Rounding
Steps up: 5
Steps down: 2
Preview
39.81pxAg
33.18pxAg
27.65pxAg
23.04pxAg
19.2pxAg
16pxAg
13.33pxAg
11.11pxAg
Scale
Steppxrem
+539.81px2.488rem
+433.18px2.074rem
+327.65px1.728rem
+223.04px1.44rem
+119.2px1.2rem
base16px1rem
-113.33px0.833rem
-211.11px0.694rem
CSS custom properties
:root {
  --font-size-up-5: 2.488rem; /* 39.81px */
  --font-size-up-4: 2.074rem; /* 33.18px */
  --font-size-up-3: 1.728rem; /* 27.65px */
  --font-size-up-2: 1.44rem; /* 23.04px */
  --font-size-up-1: 1.2rem; /* 19.2px */
  --font-size-base: 1rem; /* 16px */
  --font-size-down-1: 0.833rem; /* 13.33px */
  --font-size-down-2: 0.694rem; /* 11.11px */
}

How to generate a modular type scale

  1. Set the base size

    Enter the body font size in pixels that the whole scale is built around, such as 16.

  2. Choose a ratio

    Pick a preset ratio like minor third or golden, or type a custom multiplier to control how fast sizes grow.

  3. Set the step range

    Choose how many steps go above and below the base to cover every heading and small label you need.

  4. Copy the scale

    Copy the CSS custom properties or the full table of px and rem sizes straight into your stylesheet.

Why use this tool

Preset and custom ratios

Choose from classic scales like minor third, perfect fourth, and golden ratio, or type any custom multiplier for a bespoke rhythm.

px and rem side by side

Every step shows both pixel and rem values, computed from a root font size you control, so the numbers match your stylesheet exactly.

Steps up and down

Generate as many steps above and below the base as you need, covering large display headings down to fine print captions.

Live heading previews

Each size is rendered with real sample text, so you see the scale as a reader would before committing to it.

Copy-ready CSS variables

Export the whole scale as CSS custom properties with clean names, ready to paste into a stylesheet and reference anywhere.

Free with nothing to upload

Everything runs on your device with no account and no files leaving your browser.

About this tool

A type scale is a set of font sizes that share one consistent ratio, so the jump from body text to a heading feels deliberate instead of random. Picking each size by hand tends to drift, while a modular scale keeps the whole system in tune. This generator builds that scale for you from two simple inputs: a base size and a ratio.

The base size is your body text, usually 16 pixels. The ratio is the multiplier between neighbouring steps. A small ratio like 1.2, the minor third, gives a gentle scale that suits dense interfaces and long articles. A large ratio like 1.618, the golden ratio, produces dramatic contrast that works for landing pages and posters. Every step up multiplies by the ratio, and every step down divides by it, so the rhythm stays even in both directions.

Each row shows the size in pixels and in rem, calculated from a root font size you set. Using rem keeps your layout responsive to a reader who bumps up their default font size for comfort. You can round values for cleaner numbers or keep the exact figures for precise control.

When the scale looks right, copy it as CSS custom properties and reference the variables across your project, or grab the full table for documentation. For fluid sizes that flex with the viewport, pair this with the CSS clamp calculator, and for spacing rhythm try the golden ratio calculator.

Frequently asked questions

What is a modular type scale?
A modular type scale is a sequence of font sizes generated from a single base size and a fixed ratio. Each step is the previous one multiplied or divided by that ratio, which keeps the relationships between sizes consistent across a whole design.
Which ratio should I pick?
Smaller ratios like 1.125 or 1.2 give subtle contrast that suits text-heavy pages and app interfaces. Larger ratios like 1.5 or 1.618 create bold jumps that work well for marketing pages and headings. Start near a minor third and adjust until the previews feel right.
Should I use px or rem?
rem is usually the better choice because it scales with the reader browser font-size setting, which helps accessibility. This tool shows both, and you set the root font size so the rem values convert exactly against your own base.
How many steps do I need?
Most design systems use around four to six sizes above the base for headings and one or two below for captions and fine print. Add as many steps as your layout needs and trim the ones you never reference.
Is my data uploaded anywhere?
No. The scale is calculated entirely on your device as you change the inputs, and nothing is sent to a server or stored after you leave.

Related tools