Type Scale Generator
Generate a modular type scale for your design. Pick a base size and ratio to create perfectly proportioned heading sizes.
What is a modular type scale?
A modular type scale is a set of font sizes that follow a consistent mathematical ratio - for example Major Third (1.25x) or Perfect Fourth (1.333x). Instead of picking sizes arbitrarily, every heading from h1 to h6 is proportionally larger than the one below it. The result is typography that feels harmonious and visually balanced.
How to choose the right ratio
Smaller ratios like Minor Second (1.067) or Major Second (1.125) create subtle, compact scales - good for dense UIs. Larger ratios like Perfect Fourth (1.333) or Golden Ratio (1.618) create dramatic contrasts - ideal for editorial sites. Major Third (1.25) is a safe default that works well at most screen sizes.
Using the generated CSS
The Generated CSS panel outputs CSS custom properties in :root (e.g. --text-h1) and direct selectors for each heading level. Copy and paste into your stylesheet. Use the rem toggle for fluid, accessible sizing that scales with the browser font preference, or px if your design requires fixed sizes.
Type scale and accessibility
Using rem units instead of px makes your typography scale with the user's system font size preference, which is an important accessibility consideration. WCAG recommends that text can be resized up to 200% without loss of content or functionality. A well-structured type scale combined with rem units satisfies this requirement automatically.