Runs locally — nothing is uploaded
Result
Enter a base size.
How to use
- 1Enter the body text size, usually 16–18px.
- 2Pick a ratio: small ratios (1.125–1.25) suit dense interfaces, larger ones (1.333–1.618) suit editorial pages.
- 3Set the number of steps above and below the base.
- 4Copy the CSS variables or single values from the table.
A set of sizes where each one is the previous one multiplied by a fixed ratio, like intervals in music. It keeps headings and body text in consistent proportion.
Use 1.2–1.25 for apps and dashboards where many sizes appear close together, and 1.333 or more for marketing and long-form pages with large headlines. On small screens a smaller ratio usually works better.
rem follows the user's browser font size setting, so text scales for people who increase it. The px column shows the result at the default 16px.
Related tools
Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root sizeAspect ratio calculatorSimplify W:H and resize without distortion
Let's make something good
Tell us about your project — we reply within one business day.