Create harmonious type scales using modular ratios. See how headings and body text relate, then export to CSS or Tailwind.
:root {
--font-size-base: 16px;
--type-ratio: 1.25; /* Major Third */
--font-size-xs: 10.24px; /* 0.640rem */
--font-size-sm: 12.80px; /* 0.800rem */
--font-size-base: 16.00px; /* 1.000rem */
--font-size-lg: 20.00px; /* 1.250rem */
--font-size-xl: 25.00px; /* 1.563rem */
--font-size-2xl: 31.25px; /* 1.953rem */
--font-size-3xl: 39.06px; /* 2.441rem */
--font-size-4xl: 48.83px; /* 3.052rem */
}A typography scale creates visual harmony across your entire application.
When you use arbitrary font sizes, your UI feels chaotic. A 14px here, an 18px there, a 22px somewhere else—none of them relate to each other. A typography scale brings order to that chaos.
Caption: This is how small text appears in your scale.
A typography scale is a system of font sizes that creates visual harmony. Instead of picking sizes at random (14px, 18px, 24px...), you use a mathematical ratio to calculate each size in your scale.
This approach, called a modular scale, has been used by typographers for centuries. The result is text that feels balanced and intentional—headings relate to body text, and everything feels like it belongs together.
Base: 16px
Ratio: 1.25 (Major Third)
16 × 1 = 16px (body)
16 × 1.25 = 20px
16 × 1.25² = 25px
16 × 1.25³ = 31.25px
16 × 1.25⁴ = 39px (h1)
Subtle, compact. Great for mobile-first designs where screen real estate is limited. Heading differences are gentle.
Balanced and versatile. The most popular choice for web design. Clear hierarchy without dramatic jumps.
Bold and expressive. Creates strong visual hierarchy. Good for marketing sites and documentation.
Dramatic, editorial. Based on the mathematical golden ratio. Best for large screens and print-inspired designs.
A typography scale is a system of font sizes that creates visual harmony. Instead of picking sizes randomly, you use a mathematical ratio (like 1.25 or 1.333) to calculate each size. This creates a consistent rhythm throughout your design.
A modular scale uses a base size (typically 16px) and a ratio to generate harmonious sizes. For example, with a 1.25 ratio (Major Third), starting at 16px, the next sizes are 20px, 25px, 31.25px. Each step up multiplies by the ratio.
It depends on your design goals. Minor Third (1.2) for subtle differences and mobile-first designs. Major Third (1.25) for balanced, versatile scales. Perfect Fourth (1.333) for clear hierarchy. Golden Ratio (1.618) for dramatic, editorial layouts.
You can extend Tailwind's fontSize theme with your custom scale. PickCSS exports typography scales as both CSS custom properties and Tailwind config, so text-sm, text-base, text-lg follow your chosen ratio instead of Tailwind's defaults.
Typography is just one piece. PickCSS helps you define colors, spacing, shadows, and more—all through simple binary choices.