Modular Type Scale Calculator
Build a harmonious modular type scale from one base size and a ratio. Each step multiplies the previous size by the ratio, and the tool lists the px and rem value for every step so your headings and body text stay in proportion.
How to build a type scale
- Set the base font size in pixels, usually your body text size.
- Choose a ratio such as 1.25 for a major third or 1.5 for a perfect fifth.
- Pick how many steps up and down you need, then copy the px or rem values.
Examples
Major third from 16px
base 16px, ratio 1.25
20px, 25px, 31.25px upward
Perfect fifth step two
base 16px, ratio 1.5
36px at step 2
Frequently asked questions
What is a modular type scale?
A modular type scale is a set of font sizes built by repeatedly multiplying a base size by a fixed ratio. The shared ratio keeps every size in proportion, which gives headings and body text a consistent visual rhythm.
How is each step calculated?
Each step is the base size times the ratio raised to the step number. With a 16px base and a 1.25 ratio, step 1 is 16 times 1.25, which is 20px, and step 2 is 16 times 1.25 squared, which is 25px.
What are common type scale ratios?
Popular ratios include 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth) and 1.618 (golden ratio). Larger ratios create more dramatic contrast between sizes.
Should I use px or rem for the scale?
Rem is usually best for font sizes because it scales with the user's root font-size and improves accessibility. The tool shows both px and rem so you can pick whichever fits your codebase.
How many steps should a scale have?
Most projects need a few steps below the base for captions and small print and several above it for subheadings and display text. Start with two down and five up, then trim to the sizes you actually use.
Related tools
PX to REM Calculator
Convert px to rem and rem to px with any root font-size. Set the root, type a value, and copy the result for clean, scalable CSS typography.
Line Height Calculator
Calculate a unitless CSS line-height from a font size and a pixel line height, or work out the pixel height from a ratio. Fast, exact, and private.
CSS clamp() Calculator
Generate a responsive CSS clamp() for fluid font sizes and spacing. Set a min and max size with viewport breakpoints and copy the clamp() value 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.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.