Type Scale Generator
Generate a type scale from base size and ratio. Table in px and rem, live preview, CSS variables and Tailwind JSON.
Your inputs are processed in your browser and are not transmitted to our servers. Note: third-party resources (e.g. advertising and analytics from Google/Cloudflare) and an optional PayPal donation link may transfer data when loading or when clicked. Browser extensions or plugins may be able to read content that is visible in the input fields.
The result will appear here …
Generate a type scale: font size system for websites
Pick a base size and a ratio, for example 16 px with 1.25. The scale derives every font size of your website as a table in px and rem: from small captions up to the largest headline. Each step shows a live specimen so you see the effect immediately.
Copy the result as a CSS variables block straight into your stylesheet or as JSON for a Tailwind project. Because all sizes follow a single ratio, headings and body text automatically feel like one system. Change the base or ratio later and the whole scale regenerates in seconds.
Frequently asked questions
Which ratio should I choose?
1.25 (major third) is a solid default for text-heavy websites. 1.333 (perfect fourth) and 1.5 (perfect fifth) create stronger contrast between headings and text, good for landing pages. 1.125 feels calmer and suits content sites with long articles.
Why rem instead of px?
rem scales with the user browser font size and respects their settings. The table shows both values: px for quick understanding, rem for productive use in the stylesheet.
How many steps do I need?
Five steps cover most websites: body text, caption, subheading, H2 and H1. Landing pages with large hero headlines tend to use six to eight steps. More steps also mean more responsibility to stay consistent.