Type Scale Generator
Pick a base font size and a ratio. Each step up is the previous size times the ratio, which keeps headings and body text in proportion.
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
Sphinx of black quartz
@theme {
--text-xs: 0.64rem;
--text-xs--line-height: 1.5;
--text-sm: 0.8rem;
--text-sm--line-height: 1.5;
--text-base: 1rem;
--text-base--line-height: 1.45;
--text-lg: 1.25rem;
--text-lg--line-height: 1.45;
--text-xl: 1.563rem;
--text-xl--line-height: 1.25;
--text-2xl: 1.953rem;
--text-2xl--line-height: 1.25;
--text-3xl: 2.441rem;
--text-3xl--line-height: 1.25;
--text-4xl: 3.052rem;
--text-4xl--line-height: 1.1;
--text-5xl: 3.815rem;
--text-5xl--line-height: 1.1;
--text-6xl: 4.768rem;
--text-6xl--line-height: 1.1;
}Frequently asked questions
What is a modular type scale?
A set of font sizes where each size is the one before multiplied by a fixed ratio. With a base of 16px and a ratio of 1.25 you get 16, 20, 25, 31.25 and so on, which looks consistent because the jumps are proportional.
Which ratio should I pick?
Smaller ratios like 1.125 or 1.2 suit dense interfaces and apps. 1.25 and 1.333 are good for general websites. 1.5 and the golden ratio give dramatic headings, which suits marketing pages and editorial layouts.
How do I use the generated sizes in Tailwind?
Paste the @theme block into your CSS. It redefines --text-xs through --text-6xl, so every existing class like text-lg or text-3xl now follows your scale, with matching line heights.
Why does the tool use rem?
rem respects the user's browser font size setting, so your type scales for people who increase their default text size. The pixel values shown assume a 16px root.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.