A good type scale gives a design visual rhythm — headings, subheadings, and body text that relate to each other proportionally instead of being picked arbitrarily. This tool generates a full scale from a base font size and a chosen ratio, using the same modular scale approach designers have relied on for decades.
Each step multiplies the previous size by your chosen ratio, producing sizes that feel intentionally related rather than random — smaller ratios like 1.125 give subtle, closely-spaced sizes suited to dense interfaces, while larger ratios like 1.618 (the golden ratio) create dramatic, editorial-style contrast.
The live preview shows each size rendered at actual scale, so you can judge how it will look before copying the pixel values into your CSS.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this conversion or calculation often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Because there's no sign-up or installation step, you can jump straight from search result to working tool in a couple of seconds.
This tool avoids unnecessary steps like account creation or email verification, since the underlying task itself is simple enough not to need them.
Because the calculation or conversion happens instantly as you type, you can experiment freely and see how changing one value affects the result.
Frequently asked questions
Which ratio should I use?
Smaller ratios (1.125–1.25) suit dense UIs and dashboards with many text sizes; larger ratios (1.333 and above) work well for editorial or marketing pages with bold visual hierarchy.
Should I use px or rem in my actual CSS?
rem is generally preferred for accessibility since it respects the user's browser font-size setting; you can convert these px values to rem by dividing by 16.