liminfoType Scale Calculator
Free web tool: Type Scale Calculator
h148.8px
3.052rem
h239.1px
2.441rem
h331.3px
1.953rem
h425.0px
1.563rem
h520.0px
1.250rem
h616.0px
1.000rem
body16.0px
1.000rem
small12.8px
0.800rem
CSS Output
:root { --h1: 3.052rem; } /* 48.8px */
:root { --h2: 2.441rem; } /* 39.1px */
:root { --h3: 1.953rem; } /* 31.3px */
:root { --h4: 1.563rem; } /* 25.0px */
:root { --h5: 1.250rem; } /* 20.0px */
:root { --h6: 1.000rem; } /* 16.0px */
:root { --body: 1.000rem; } /* 16.0px */
:root { --small: 0.800rem; } /* 12.8px */About Type Scale Calculator
The Type Scale Calculator is a free, browser-based tool that computes modular font size scales for typographic design systems. You provide a base font size in pixels and choose a scale ratio from eight options ranging from Minor Second (1.067) to Golden Ratio (1.618). The calculator then applies the formula `base × ratio^exponent` to produce sizes for h1 through h6, body text, and small text, displaying each result in both px and rem units.
Modular type scales are used by designers and developers to create visual consistency in text hierarchies. When font sizes share a common geometric ratio, the type system feels organized and intentional rather than arbitrary. This calculator is particularly useful when starting a new project, auditing an existing design system, or experimenting with different ratios to find the right balance between hierarchy and compactness for a specific interface.
The tool operates entirely in your browser — there is no server communication. As you change the base size or ratio, all eight size levels update immediately. Each row in the results displays the element name (h1, h2, etc.), the pixel value, the rem value, and a live text preview at the actual computed size. A CSS output section at the bottom shows ready-to-use custom property declarations for each level, with a copy button to transfer the output directly to your clipboard.
Key Features
- Eight preset scale ratios from Minor Second (1.067) to Golden Ratio (1.618)
- Free-input base font size field accepting any positive number
- Computes eight typographic levels: h1 (ratio^5) down to small (ratio^-1)
- Side-by-side px and rem display for every computed level
- Live inline text preview at the actual computed pixel size for each level
- CSS output block with `--{level}: {rem}rem` custom property declarations
- One-click copy button for the complete CSS output
- Instant recalculation on every keystroke — no submit button needed
Frequently Asked Questions
What is the difference between typescale and typescalecalc?
Both tools perform the same modular scale computation. The typescale tool shows a full-width text preview with a Copy CSS button in a prominent panel, while the typescalecalc tool presents a more compact layout with the CSS output embedded inline below the scale rows. Choose whichever layout suits your workflow.
What is a type scale ratio?
A type scale ratio is the constant multiplier between consecutive font size steps. A ratio of 1.25 (Major Third) means each level is 25% larger than the one below it. Ratios are borrowed from musical intervals because both music and visual design benefit from proportional, mathematically related values.
How is the rem value calculated?
The rem value is computed as `px / 16`, assuming the browser default root font size of 16px. This means the body level (which equals the base) has a rem value of 1 when the base is 16px. If your project sets a different root font size, divide the px value by your actual root size instead.
What does the small level represent?
The small level uses ratio^-1, meaning it is one step below the base: `base / ratio`. For a 16px base at Major Third (1.25), this gives 12.8px. This level is intended for secondary text elements such as captions, labels, footnotes, and helper text.
Can I enter a non-standard base size like 14px or 18px?
Yes. The base size field accepts any positive number. Using 14px as a base is common for dense information-heavy interfaces (dashboards, data tables), while 18px or 20px is popular for long-form reading content where a larger body text improves readability.
Which ratio produces the least dramatic size differences?
Minor Second (1.067) produces the smallest differences between levels — barely perceptible at the lower end of the scale. It is rarely used for headings because h1 would be only about 1.38x the body size. It is more appropriate for subtle visual distinctions within a single content type, like differentiating table header from table body.
How do I apply the CSS output in a real project?
The CSS output uses custom properties in the format `--h1: 2.618rem`. Paste this into your `:root {}` block, then use `font-size: var(--h1)` in your heading styles. Alternatively, if you prefer a utility-first approach, extend Tailwind's `fontSize` configuration with the numeric rem values.
Does a higher ratio always mean better typography?
No. Higher ratios like Golden Ratio (1.618) create dramatic size jumps that work well for editorial or marketing pages but can feel aggressive in UI-heavy applications. The best ratio depends on your content density, screen size, and brand personality. Perfect Fourth (1.333) is considered a safe, versatile default for most web products.