Type Scale Generator
Generate modular type scales with CSS variables and Tailwind config.
① Set base font size and scale ratio ② Click Generate Scale ③ Copy CSS variables or token values
What is a modular type scale?
A modular type scale is a sequence of font sizes where each step is the previous one multiplied by a fixed ratio. Common ratios include the Perfect Fourth (1.333), Major Third (1.250), and the Golden Ratio (1.618). Using a scale ensures visual harmony across headings, body text, and captions — all your sizes relate mathematically, creating a consistent and professional typographic hierarchy.
Frequently asked questions
A modular type scale is a set of font sizes derived by multiplying a base size by a consistent ratio. Instead of choosing sizes arbitrarily (14, 16, 20, 24px), you get mathematically related values that create visual harmony. Used by major design systems like Material Design and Apple HIG, type scales ensure your typography feels intentional and balanced.
Each step n relative to the base uses the formula: size = base × ratio^n. For n=0 you get the base size. For n=1, base × ratio. For n=2, base × ratio². Negative steps (below base) use negative exponents: base × ratio^(-1), etc. This produces a smooth geometric progression both above and below your base.
Minor Second (1.067) and Major Second (1.125) produce subtle scales good for text-heavy interfaces. Minor Third (1.200) and Major Third (1.250) give moderate contrast, popular for web apps. Perfect Fourth (1.333) is a classic choice for balanced hierarchy. Perfect Fifth (1.500) and Golden Ratio (1.618) create dramatic differences suitable for display typography and landing pages.
Copy the CSS Variables output and paste it inside your :root { } block. Then use the variables anywhere: font-size: var(--text-xl). The variables are ready to use with no additional configuration. If you use a CSS preprocessor, you can also convert them to Sass or Less variables.
Copy the Tailwind Config output and paste it inside the theme.extend.fontSize or theme.fontSize key in your tailwind.config.js. For example: module.exports = { theme: { fontSize: { /* paste here */ } } }. You can then use classes like text-xl, text-2xl with your custom scale values.
Use rem for font sizes in most cases — it respects the user's browser font preferences and scales proportionally. Use em when you want sizes to scale relative to their parent component's font size (useful for padding inside buttons or cards). Use px only for fixed decorative elements like borders or when you need pixel-perfect control regardless of user settings.
A well-chosen type scale creates clear visual hierarchy that guides readers through content. Large ratios (1.5+) make headings stand out, reducing cognitive load. WCAG 1.4.4 requires text to be resizable up to 200% — using rem-based scales ensures this works correctly. WCAG 1.4.8 and 1.4.12 also relate to text spacing and line height, which a proper type scale supports.