Free Online Typography Scale Calculator
Generate a harmonious font-size scale from a base size and ratio.
This becomes 1rem and sets the root font size.
Two steps below base (xs and sm) are always included.
Generated scale
| Token | Step | REM | Pixels | Line height |
|---|
Preview
CSS variables
About the Typography Scale Calculator
A typography scale turns a pile of arbitrary font sizes into a system. Instead of choosing 15px here and 23px
there, you pick a base size and a ratio, then let the steps do the work. The result tends to feel more
deliberate because every size has a mathematical relationship to every other size. This calculator generates a
full scale from xs to 4xl, pairs each step with a practical line height, and writes the
CSS variables for you.
Choosing a ratio
Small ratios such as 1.067 or 1.125 create subtle differences that suit dense interfaces and data-heavy products. Medium ratios around 1.2 to 1.333 are the workhorses of editorial design: headings are clearly larger without becoming a separate visual language. Large ratios such as 1.5 or 1.618 produce dramatic display typography that works well for landing pages and posters but can leave body sizes stranded between steps. Start with 1.25 or 1.333 if you are unsure, then preview the actual text.
Reading the table
Each row shows the token name, its step relative to the base, the value in rem, the pixel equivalent, and a suggested line height. As text gets larger, the line height generally gets tighter, because large glyphs already create visual separation. The preview below the table renders a sample at every size, which makes it obvious when a step is too close to its neighbor or when the jump between body and heading is too aggressive.
Using the generated CSS
The snippet declares the root font size, a custom property for every text size, and a matching leading property.
You can apply a token directly, such as font-size: var(--text-xl), or map it to your heading levels.
Keeping the scale in custom properties makes later adjustments cheap: change the ratio or base in one place and
every component follows. The line-height values are unitless, so they scale correctly with the font size.
Frequently asked questions
Should I set the root font size in pixels?
Setting html { font-size: 16px; } makes the rem math predictable, but it overrides the user's browser font-size preference. A more accessible approach is to leave the root at the browser default and treat your base size as a design reference. If you do set it, keep the value close to the default and test with enlarged text.
Why are the line heights not simply 1.5 everywhere?
Large text needs proportionally less leading, and small text needs more. A single line height across an entire scale either crowds the headings or loosens the captions. The generated values follow that principle while staying within comfortable ranges.
Can I use a ratio below 1.067?
Yes, but the steps become so close that they are hard to distinguish, especially across different fonts. If you need very fine control for an interface, consider a tighter scale for UI labels and a separate, larger scale for editorial headings.