Skip to main content

Type Scale Generator — Modular Font Size Scale (px + rem)

Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only

  • Runs locally
  • Category Color & Design
  • Best for Moving from a visual idea to reusable color values.
px
px
LevelSteppxremlh
text-6xl+661.035px3.815rem1.32
text-5xl+548.828px3.052rem1.369
text-4xl+439.063px2.441rem1.408
text-3xl+331.25px1.953rem1.439
text-2xl+225px1.563rem1.464
text-xl+120px1.25rem1.484
text-basebase16px1rem1.5
text-sm-112.8px0.8rem1.513
text-xs-210.24px0.64rem1.523
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Modular scales keep every step in a predictable harmonic relationship — paste this scale into your design tokens and the hierarchy reads the same on every page.
Modular scales keep every step in a predictable harmonic relationship — paste this scale into your design tokens and the hierarchy reads the same on every page.
:root {
  --text-6xl: 3.815rem;
  --leading-6xl: 1.32;
  --text-5xl: 3.052rem;
  --leading-5xl: 1.369;
  --text-4xl: 2.441rem;
  --leading-4xl: 1.408;
  --text-3xl: 1.953rem;
  --leading-3xl: 1.439;
  --text-2xl: 1.563rem;
  --leading-2xl: 1.464;
  --text-xl: 1.25rem;
  --leading-xl: 1.484;
  --text-base: 1rem;
  --leading-base: 1.5;
  --text-sm: 0.8rem;
  --leading-sm: 1.513;
  --text-xs: 0.64rem;
  --leading-xs: 1.523;
}
Privacy: Every size is computed in your browser with base × ratio^step — nothing is uploaded. The shareable URL encodes your settings (base, ratio, steps) so a "share link" lands the recipient on the same scale.

What this tool does

A modular type scale generator for designers and front-end developers who want a hierarchy that holds together instead of a pile of guessed font sizes. Choose a base size (8–48px) and a ratio — eight musical presets from Minor Second (1.067) to the Golden Ratio (1.618), plus a free custom value between 1.01 and 3.0 — and the tool computes every step with the one formula that defines a modular scale: size = base × ratio^step. You control how many steps go up (1–8, for hero headlines) and down (0–4, for captions, legal text and overlines), so the scale covers the small sizes most generators forget.

Every level shows both px and rem (folded against a configurable root font-size, so the 62.5% / 10px-root trick is one field away), an auto-derived line-height, and a real text sample rendered at that exact size in light or dark — not just a column of numbers. Line-height can be fixed across the scale or set to tighten as sizes grow, the way large display headings actually want to be set. Export the result as CSS custom properties (--text-* and --leading-*), a Tailwind theme.fontSize block with [size, lineHeight] tuples, or an SCSS map with a ready @mixin. Your export-format choice is remembered between visits, and the base/ratio/steps are encoded in the URL so a "share link" lands a teammate on the identical scale. 100% client-side: nothing is uploaded.

Tool details

Input
Numbers
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
Shareable URL state
Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget
Initial JS <= 9 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Color & Design · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How Type Scale Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

  • Moving from a visual idea to reusable color values.
  • Checking contrast and accessibility before a UI ships.
  • Keeping brand, design, and implementation color decisions aligned.

Color checks

  • Verify contrast against the actual background, not just a sample swatch.
  • Check dark and light themes separately when both exist.
  • Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 CSS clamp() Fluid Typography Generator CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind. Open
  2. 2 PX REM EM Converter CSS px ↔ rem ↔ em converter — visual scale, base font size adjustable. Open
  3. 3 CSS Font Stack Generator CSS font stack generator — system-safe font families with full Win/Mac/Linux/Android/iOS fallback chains, with CJK fallbacks, copy as CSS/Tailwind/SwiftUI. Open

Real-world use cases

  • Define the font-size tokens for a new design system

    You are starting a design system and need a `fontSize` scale that every component can reference. Steps: (1) set base to your body size — 16px is the web default; (2) pick Major Third (1.25) for a balanced UI feel; (3) set steps up to 6 (covers text-base through a text-6xl hero) and steps down to 2 (caption + fine print); (4) leave line-height on "tighten with size" so headings get a tighter leading automatically; (5) export Tailwind config and paste the `theme.fontSize` block into `tailwind.config.js`. Every team member now uses `text-2xl` instead of guessing `text-[27px]`.

  • Pin a landing-page heading hierarchy

    A marketing landing page needs a hero, two section headings and body text that clearly step down in size. Steps: (1) base 16px, ratio Perfect Fourth (1.333) for visible contrast; (2) read the table — hero (+4) is ~50px, section (+2) ~28px, body (0) 16px; (3) flip the preview to dark to check the hero against your dark hero band; (4) copy the per-row `font-size` for the three levels you need, or export CSS variables and reference `--text-4xl` etc. The proportions stay locked even if a stakeholder later asks to "make everything a bit bigger" — just bump the base and re-export.

  • Refactor a messy stylesheet into a consistent scale

    You inherit a codebase with font sizes like 13, 15, 19, 22, 29px scattered across files. Steps: (1) decide on a base (the most common body value, say 15px); (2) try ratios until the generated steps land near the existing sizes — 1.2 often fits a sloppy hand-tuned set; (3) export CSS variables; (4) find-and-replace the ad-hoc px values with the nearest `--text-*` token. The page looks almost identical but now every size is on a system, so the next addition has an obvious slot.

  • Build an accessible rem scale with a 10px root

    Your team uses the `html { font-size: 62.5% }` trick so `1rem = 10px` and rem math is easy. Steps: (1) set the tool's root font-size to 10; (2) set base to 16 (your actual body size); (3) the rem column now reads 1.6rem for body, 2.5rem for a +1 step, etc. — exactly what your CSS expects; (4) export CSS variables in rem. The scale honors user zoom and font-size preferences while keeping the rem numbers your team already reasons in.

  • Hand a developer a spec they can implement verbatim

    A designer wants to give engineering an unambiguous type spec. Steps: (1) dial in base, ratio and steps until the live preview matches the mockup; (2) switch export to SCSS map; (3) copy the `$font-sizes` / `$line-heights` maps plus the `@mixin type()`; (4) paste it into the repo and write `h1 { @include type('4xl'); }`. There is no rounding argument later — the px, rem and line-height for every level came from one formula, not from eyeballing the Figma inspector.

Common pitfalls

  • Picking too large a ratio and then complaining the scale "explodes". 1.618 at +6 steps from a 16px base is over 280px — fine for a one-off poster, unusable as a UI scale. If your largest heading is absurd, lower the ratio or reduce steps-up rather than hand-editing the top value (which breaks the whole point of a modular scale).

  • Exporting px and losing user-zoom accessibility. A px scale ignores the reader's browser font-size setting, so users who enlarge text get nothing. Export rem unless you have a concrete reason for fixed sizes; the tool defaults to rem for exactly this reason.

  • Forgetting that rem depends on the root font-size. If your CSS sets `html { font-size: 62.5% }` (10px root) but you generate the scale against the default 16px root, every rem value will be 1.6× too small in the browser. Set the tool's root field to match your actual root before copying rem values.

Privacy

Every size and line-height is computed in your browser with plain arithmetic (base × ratio^step) — no font files, no network requests, no analytics on what you typed. The one thing that leaves the page is the shareable URL: it encodes your settings (base, ratio, custom ratio, unit, root, steps up/down, line-height) in the query string so a "share link" reproduces the exact scale. Your export-format preference is stored in this browser's localStorage so the tool reopens on the format you used last; clearing site data removes it.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-06-12