Overview
A modular type scale calculator that turns one base size and one ratio into a complete eight-step font-size system. Steps run from xs to 4xl with the base sitting two slots up, and every value is emitted as a CSS custom property in a :root block. A preview column renders sample text at each computed size in the font you choose.
How It Works
Set the base size in pixels between 10 and 24. Choose a named ratio from the dropdown: the list runs from Minor Second at 1.067 up to the Golden Ratio at 1.618. Pick rem or px as the output unit and a preview font among system-ui, Georgia, monospace and cursive. The preview lists all eight steps from largest to smallest with their variable names and values, and the code panel emits a :root block of --text-xs through --text-4xl that you copy in one click.
Step-by-Step Usage Guide
- Enter the base font size for your design.
- Select a scale ratio, for example Major Third or Perfect Fourth.
- Choose rem or px output and a preview font.
- Copy the :root variable block into your stylesheet.
Technical Specifications & Standards
The math is a geometric series: step size equals base multiplied by ratio to the power of the offset, with base defined at index 2, so --text-xs uses exponent minus 2 and --text-4xl uses exponent plus 2. Pixel results round to one decimal and rem conversion divides by 16 and rounds to two decimals, which keeps the emitted values readable instead of floating-point noise. Because rem resolves against the root font size, the rem output automatically rescales if the user raises their default browser font size, which is the main accessibility argument for leaving the unit on rem. A Minor Third ratio of 1.2 is a pragmatic default for interfaces, while 1.5 and above read as editorial and tend to need tighter line heights on the large steps.
Targeted Use Cases
- Design tokens for a component library with predictable heading sizes.
- Landing pages that need a clearly differentiated headline hierarchy.
- Documentation sites where body text and code blocks must stay distinct.
- Migrating an ad-hoc font-size mess onto a consistent named scale.
Notes & Gotchas
- Prefer rem output so the scale respects user font-size preferences.
- Use a gentle ratio such as 1.125 or 1.2 for app interfaces; dramatic ratios suit marketing pages.
- Pair larger steps with reduced line height in your own CSS, since the scale only sets size.
- Keep the base near 16 pixels so body text stays comfortable to read.
Frequently Asked Questions
How are the step sizes calculated?
Each step multiplies the base by the ratio raised to an exponent. The base is the third step, so xs is base divided by the ratio twice and 4xl is base multiplied by the ratio six times.
Should I output rem or px?
Rem is usually better: it inherits the root font size, so users who raise their browser default get proportionally larger text everywhere. Px is easier to reason about in fixed-canvas designs like email.
Which ratio should I pick?
Major Third (1.25) and Minor Third (1.2) are common interface defaults. Smaller ratios like 1.067 produce subtle hierarchies suited to dense dashboards; 1.618 produces dramatic editorial jumps.
Do the variables include line-height too?
No. The tool emits only font-size custom properties. Define line heights separately, since the ideal line height depends on the typeface and gets tighter as the size grows.