Typography Scale Generator

Generate a harmonious type scale with modular ratios. Preview sizes, then export to CSS, Tailwind, or SCSS.

Options
Export
Preview
Choose a ratio and configure options to generate your type scale.

How to Use the Typography Scale Generator

  1. Set the base size — this is your body text size, typically 16px (the browser default).
  2. Choose a scale ratio — pick from 8 modular ratios ranging from subtle (Minor Second) to dramatic (Golden Ratio).
  3. Configure steps — set how many sizes above and below the base you need. 6 above and 2 below covers most designs (3xl down to xs).
  4. Preview the scale — see actual rendered text at each size with the font family you specified.
  5. Export — copy the generated code as CSS custom properties, Tailwind config, or SCSS variables.

What Is a Modular Typographic Scale?

A modular typographic scale is a sequence of font sizes where each size is derived by multiplying the previous one by a fixed ratio. This approach creates a mathematically harmonious progression of sizes, much like the intervals between notes in a musical scale. The concept was popularized by Robert Bringhurst in "The Elements of Typographic Style" and has become a cornerstone of modern web typography.

Choosing the Right Ratio

The ratio you choose depends on your design context. For interfaces and applications, a smaller ratio like Minor Third (1.2) or Major Third (1.25) provides subtle, functional size differences. For editorial content and marketing pages, Perfect Fourth (1.333) or Perfect Fifth (1.5) creates more dramatic hierarchy. The Golden Ratio (1.618) is the most dramatic and is best for art-directed, high-impact designs.

The Base Font Size

The base font size is the anchor of your typographic scale. On the web, 16px is the universal default and provides comfortable reading on screens. Some designers prefer 18px for content-heavy sites where readability is paramount. The base size becomes the reference point: all other sizes are calculated relative to it, either multiplied upward for headings or divided downward for small text and captions.

Using rem Units

The generator shows sizes in both px and rem. Using rem units in your CSS is recommended because they scale relative to the root font size, making your typography responsive and accessible. When users adjust their browser's default font size (for accessibility), rem-based typography scales proportionally, while px-based values stay fixed.

Naming Conventions

The generated scale uses a standard naming convention: xs and sm for small text, base for body text, and lg through 6xl for increasingly larger sizes. This convention maps naturally to HTML heading levels (h1 through h6) and utility class systems like Tailwind CSS.

Applying the Scale

Once you have your scale, apply it consistently across your project. Map the largest sizes to h1 and h2, medium sizes to h3 and h4, and the base to body text. Use the smaller sizes for captions, labels, and fine print. Consistency in type sizing creates a clear visual hierarchy that guides readers through your content.

Responsive Typography

A typographic scale that looks perfect on desktop may not work on mobile screens. Large headings can overflow or dominate small viewports. Consider using CSS clamp() to create fluid typography that scales between viewport sizes, or generate separate scales for mobile (using a smaller ratio like Minor Second) and desktop (using a larger ratio like Perfect Fourth). Many design systems use a tighter scale at smaller breakpoints and expand to a more dramatic scale on wider screens.

Line Height and Spacing

Font size is only one part of a typographic system. Line height (leading), letter spacing (tracking), and margin between elements all contribute to readability and visual rhythm. As a general rule, body text works well with a line height of 1.5 to 1.7, while headings look best with tighter line heights of 1.1 to 1.3. Once you have your size scale, apply consistent vertical spacing using your scale values as a reference — for example, set paragraph margins to your base size or half your base size for a cohesive rhythm. Pair your type scale with a harmonious Color Palette, create brand icons with the Favicon Generator, or preview your typography in rendered Markdown with the Markdown Preview.

Frequently Asked Questions

A typographic scale is a set of font sizes that follow a consistent mathematical ratio. Just as musical scales create harmony between notes, a typographic scale creates visual harmony between text sizes. Each size is the previous size multiplied by the chosen ratio.
A modular scale ratio is the multiplier used between each step in the scale. Common ratios include Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), and Golden Ratio (1.618). Smaller ratios produce subtle size differences, while larger ratios create more dramatic variation.
The most common base font size is 16px, which is the default in all browsers. This ensures good readability on screens. For body text in content-heavy sites, 18px can improve readability. The base size becomes the starting point from which all other sizes are calculated.
Minor Third (1.2) and Major Third (1.25) are the most popular for web design. They provide enough variation between heading levels without making h1 elements excessively large. Perfect Fourth (1.333) works well for editorial and magazine-style layouts. The Golden Ratio (1.618) is dramatic and works best for art-directed pages.
Export the scale as CSS custom properties, Tailwind config, or SCSS variables. Then use these values for your h1-h6, body text, captions, and small text. Apply the sizes consistently across your project for a cohesive typographic hierarchy.