What Is a Modular Type Scale?

A modular type scale is a series of font sizes built by multiplying a base size by a fixed ratio. The result is a mathematically harmonious set of sizes that feel visually balanced when used together in a design system.

Choosing a Ratio

The ratio determines how much contrast there is between adjacent steps. A ratio of 1.2 (minor third) produces subtle differences suited to long-form content. A ratio of 1.618 (golden ratio) produces dramatic contrasts suitable for landing pages and editorial layouts. For most UI work, the perfect fourth (1.333) or major third (1.25) is a good starting point.

CSS Custom Properties

Copy the generated :root block into your stylesheet and reference values with font-size: var(--text-lg). This keeps your typography centrally managed and easy to update.

Tailwind CSS Integration

Paste the generated object into the theme.extend.fontSize section of your tailwind.config.js to use the scale with Tailwind utility classes like text-lg and text-3xl.

Vertical rhythm

Vertical rhythm is the principle of keeping consistent vertical spacing throughout a layout by tying all spacing to a shared baseline. When line heights and spacing are multiples of the base line-height, text and UI elements align predictably. A simple implementation ties line-height to the scale: for example, line-height: calc(var(--text-base) * 1.5) gives you a baseline grid that all other spacing can reference. Components spaced in multiples of that value will always align to an invisible grid, producing the harmonious, "designed" feeling found in polished UIs.

Fluid typography

Modern CSS allows font sizes to scale smoothly between a minimum and maximum viewport width without breakpoints using clamp(). The pattern is:

font-size: clamp(1rem, 1rem + 1vw, 1.5rem);

The first value is the minimum, the middle is the preferred (responsive) value, and the third is the maximum. Fluid typography eliminates the need for multiple @media breakpoints for font sizes and ensures text always looks proportional across every screen size.

Choosing a base size

16px (1rem) is the browser default and the most accessible starting point for body copy, since it respects the user's own browser font-size preference. Going below 14px for body text fails WCAG readability guidance and strains the eyes of older readers. Rem units are strongly preferred over px because they scale with the user's browser setting - a user who has set their browser to 20px base will see proportionally larger text, improving readability for those with low vision.