Modular Type Scale Generator
Pick a base size and a ratio, then generate a clean modular type scale. Each step multiplies by the ratio, giving harmonious heading and body sizes in px and rem.
How to generate a type scale
- Set your base font size, usually 16px.
- Choose a ratio such as the major third or perfect fourth.
- Pick how many steps to generate above and below the base.
- Copy the px and rem values straight into your stylesheet.
Examples
Major third from 16px
base 16px, ratio 1.25, 3 up, 1 down
12.8, 16, 20, 25, 31.25 px
Frequently asked questions
What is a modular type scale?
A modular scale sizes type by repeatedly multiplying a base size by a fixed ratio. The shared ratio makes headings and body text feel visually consistent.
Which ratio should I use?
Smaller ratios like the minor third (1.2) suit dense interfaces, while larger ones like the perfect fourth (1.333) or golden ratio (1.618) give dramatic, editorial headings.
How is rem calculated?
Rem is the pixel value divided by 16, the browser default root font size. Using rem keeps your scale responsive to user font-size preferences.
What does step 0 mean?
Step 0 is your base size. Positive steps go up for headings, negative steps go down for small print and captions.
Is anything uploaded?
No. The scale is computed entirely in your browser and nothing is sent anywhere.
Related tools
CSS Unit Converter
Convert between CSS units px, rem, em and pt online. Set the root font size, enter a value, and get the result in every unit instantly.
Golden Ratio Calculator
Split any length by the golden ratio (phi, 1.618). Enter the whole, the longer or the shorter segment and get the matching golden proportions instantly.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base32 Encode
Base32 encode and decode text online using the standard RFC 4648 alphabet with proper padding. UTF-8 safe, fast and private in your browser.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.