Type Scale Generator
Type Scale Generator is a free online generator that helps you build a modular typographic scale from a base size and ratio; px, rem and CSS variables, in-browser. Type Scale Generator uses 4 input fields, returns 3 output values, and runs in your browser on the device.
Key facts
- Inputs
- 4 fields: Base size (px), Scale ratio, Steps up, and Steps down
- Outputs
- 3 values: Scale, CSS variables, and REM base
- Runtime
- your browser on the device
- Mode
- Generator
- Privacy
- Files and text stay in the browser session.
- Cost
- $0, no account required
How to use Type Scale Generator
- 1
Paste or fill in the input
Enter your text or values into the input fields on the page.
- 2
Run the utility
Click Compute to run the utility in your browser and review the result.
- 3
Copy the output
Copy the output value you need from the result panel.
Type Scale Generator details
First, enter Base size (px) in Type Scale Generator. Next, review Scale, CSS variables, and REM base. Additionally, Type Scale Generator uses 4 input fields and 3 output blocks so the result is easy to scan and copy.
Generate a harmonious modular type scale for your design system. Choose a base font size and a classic musical ratio; Major Third (1.25), Perfect Fourth (1.333), the Golden Ratio (1.618) and more; and the tool multiplies up and down from the base to produce a full set of sizes. The largest steps are mapped to h1;h6, with body and small below, and every size is shown in both px and rem (relative to a 16px root). Copy the generated CSS custom properties straight into your stylesheet. All math runs locally in your browser; no signup, no upload.
Common searches
- type scale generator
- typographic scale generator
- modular scale generator
- font size scale
- typography scale calculator
- font scale generator
Related tools
Tools that work with the same formats — most users open one of these next.
PX to REM Converter
Convert between px, rem and em based on a root font size — instant CSS-ready values, in-browser.
Tailwind Shade Generator
Generate a full Tailwind-style 50–950 shade scale from one hex color — CSS variables & config, in-browser.
Line Height Calculator
Resolve any CSS line-height (unitless, px or %) to its computed pixel height and ratio — in-browser.
User-Agent Parser
Parse a browser User-Agent string into structured browser/engine/OS/device fields.
MIME Type Lookup
Look up the MIME type for a file extension, or the canonical extensions for a MIME type — covering 100+ common types.
CSS Minifier
Minify CSS — strip whitespace, comments and unused syntax to ship smaller stylesheets.
Frequently asked
What is Type Scale Generator?
Type Scale Generator is a free online generator that helps you build a modular typographic scale from a base size and ratio; px, rem and CSS variables, in-browser. Type Scale Generator uses 4 input fields, returns 3 output values, and runs in your browser on the device.
What inputs and outputs does Type Scale Generator use?
Type Scale Generator uses 4 input fields: Base size (px), Scale ratio, Steps up, and Steps down. Type Scale Generator returns 3 output values: Scale, CSS variables, and REM base.
Do my files and data stay private?
Yes. Type Scale Generator runs entirely in your browser using your device's CPU. Files and text are never uploaded to our servers, so your data stays private.
How do I use Type Scale Generator?
Open Type Scale Generator, paste or fill in the input fields, and the result updates instantly. Type Scale Generator runs in your browser with no upload and no waiting.
Which browsers does Type Scale Generator support?
Any modern browser works in Chrome, Firefox, Safari, and Edge on desktop and mobile. Type Scale Generator uses standard web APIs and does not require any plugin, extension, or sign-up.