liminfoTypography Scale Calculator
Free web tool: Typography Scale Calculator
:root {
--font-h1: 4.209rem;
--font-h2: 3.157rem;
--font-h3: 2.369rem;
--font-h4: 1.777rem;
--font-h5: 1.333rem;
--font-h6: 1rem;
--font-body: 1rem;
--font-small: 0.75rem;
}About Typography Scale Calculator
The Typography Scale Generator computes a harmonious set of font sizes for a complete type hierarchy — h1 through h6, body text, and small captions — based on two inputs: a base font size in pixels and a modular scale ratio. It supports eight classical ratios borrowed from musical intervals: Minor Second (1.067), Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.5), and the Golden Ratio (1.618). Each heading level is computed as `base × ratio^n`, where n is the step distance from the base level.
Web designers and typographers use modular scales to create visual harmony across a page. Rather than picking font sizes arbitrarily (16px, 18px, 24px, 32px), a modular scale ensures that every size in the system shares a mathematical relationship, which makes the design feel cohesive. The Perfect Fourth (1.333) is a popular choice for web interfaces because it produces a clear hierarchy without the sizes becoming too large too quickly. The Golden Ratio (1.618) creates dramatic contrast between levels, making it well-suited for editorial or display typography.
The tool renders a live preview of each level with actual text ("The quick brown fox") at the computed size, so you can see immediately how the hierarchy will look on screen. Sizes are shown in both px (for designers) and rem (for developers). The output panel generates a complete `:root {}` CSS block with custom properties (`--font-h1`, `--font-h2`, etc.) that you can copy and paste directly into your stylesheet. The tool is fully client-side and requires no account or installation.
Key Features
- Eight musical scale ratios: Minor Second (1.067) through Golden Ratio (1.618)
- Configurable base font size in pixels with a sensible default of 16px
- Computes eight levels: h1 (ratio^5), h2 (ratio^4), h3 (ratio^3), h4 (ratio^2), h5 (ratio^1), h6/body (ratio^0), small (ratio^-1)
- Displays both px and rem values for every level simultaneously
- Live text preview at actual computed sizes using "The quick brown fox" sample text
- Exports a complete `:root {}` CSS block with `--font-{level}` custom property declarations
- One-click Copy CSS button to transfer the full `:root` block to your clipboard
- 100% client-side — no server, no sign-up, works offline
Frequently Asked Questions
What is a modular type scale?
A modular type scale is a sequence of font sizes generated by repeatedly multiplying (or dividing) a base size by a fixed ratio. This creates a geometric progression where each size has a consistent mathematical relationship to the others, producing visual harmony similar to how musical intervals create harmonic relationships between notes.
Which ratio should I choose for a typical web application?
The Perfect Fourth (1.333) is the most widely used ratio for web UI. It creates a clear hierarchy between heading levels without the sizes becoming excessively large. Major Third (1.25) is a subtler choice for dense interfaces. The Golden Ratio (1.618) works well for editorial layouts where h1 needs to be dramatically larger than body text.
Why is the default base size 16px?
16px is the default font size in all major browsers. Using it as the base means that 1rem equals 1 unit on the scale, making it straightforward to reason about rem values. If your project uses a different root font size (e.g., 62.5% to make 1rem = 10px), adjust the base size accordingly.
What do the negative exponent sizes (small) represent?
The small level uses ratio^-1, which means it is one step below the base: `base / ratio`. For a base of 16px at Perfect Fourth (1.333), this gives approximately 12px. Negative steps are used for captions, footnotes, helper text, and other secondary typographic elements that should be smaller than body text.
How do I use the exported CSS in my project?
Copy the `:root {}` block and paste it into your main CSS file or design tokens file. Then reference the custom properties in your styles: `font-size: var(--font-h1)` for `<h1>` elements, `font-size: var(--font-body)` for body text, etc. This approach makes it easy to update the entire scale system by changing only the custom properties.
Can I use this scale with Tailwind CSS?
Yes. You can extend Tailwind's `fontSize` theme in `tailwind.config.js` with the computed values, or use the CSS custom properties in a `@layer base` block to style heading elements. Tailwind's built-in type scale uses a different methodology (fixed sizes), so a modular scale will produce a different visual result.
Does the tool handle font sizes for small screens?
This tool generates a single scale for all screen sizes. For responsive typography, you can generate two scales — one for mobile (smaller base) and one for desktop — and use CSS media queries to switch between them. Fluid typography (using `clamp()`) is not generated by this tool but the computed sizes can serve as the min/max values for clamp expressions.
What is the formula used for each heading level?
The formula is `size = base × ratio^exponent`, where the exponents are: h1=5, h2=4, h3=3, h4=2, h5=1, h6/body=0, small=-1. The rem value is computed as `px / 16` (assuming the browser default root font size). Values are rounded to avoid excessively long decimal strings in the CSS output.