Typography Scale Generator
Scale preview
Code
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Frequently Asked Questions
Everything about typography and modular scales
What is a typography scale?
A typography scale is a set of text sizes proportionally related to each other through a fixed ratio. Using a consistent scale creates visual harmony in design, as each size is mathematically related to the others.
Which ratio should I choose?
For digital interfaces, the Perfect Fourth (1.333) and Major Third (1.250) are the most common choices: they offer visible contrast without being excessive. The Golden Ratio (1.618) creates very marked contrasts, ideal for headings and landing pages. Minor Second (1.125) is subtle, for very dense UIs.
How do I use the CSS output?
Copy the CSS variables into your global style file (e.g. `app.css`). Then use them with `font-size: var(--text-lg)`. For Tailwind, paste the configuration into the `fontSize` block of your `tailwind.config.js`.
How do I use the scale in a project?
The CSS variables go into the global stylesheet and are called in the rules with var. For Tailwind you paste the size block into the configuration of the project.