A typographic scale is a harmonious progression of font sizes used in a design system. It's built by multiplying a base font size by a consistent ratio (like 1.25 or 1.5) to create each subsequent level. This mathematical approach, rooted in musical scales and classical proportions, ensures visual rhythm and hierarchy across headings, body text, and captions. Popularized by typographers like Robert Bringhurst, scales like the Major Third (1.25) and Perfect Fourth (1.333) are widely used in modern web and print design.

Using a typographic scale brings mathematical consistency to your design. Benefits include: (1) Visual harmony — sizes relate to each other through a consistent ratio, creating natural rhythm. (2) Faster decision-making — instead of guessing sizes, you pick from a predefined set. (3) Better responsive scaling — scales can be fluidly adjusted by changing only the base size or ratio. (4) Professional polish — most renowned design systems (Material Design, Tailwind CSS, IBM Carbon) use typographic scales. Arbitrary sizes often lead to cluttered, inconsistent typography that feels "off" to readers.

The choice depends on your content and brand personality:

Minor Second (1.067) & Major Second (1.125): Subtle, understated — ideal for dense content sites, news portals, and documentation where you need many hierarchical levels without dramatic jumps.

Minor Third (1.2) & Major Third (1.25): Balanced and versatile — the most popular choices for general web design, SaaS products, and blogs. They provide clear hierarchy without being overtly dramatic.

Perfect Fourth (1.333) & Augmented Fourth (1.414): Bold and expressive — great for marketing sites, portfolios, and creative brands that want striking visual impact.

Perfect Fifth (1.5) & Golden Ratio (1.618): Dramatic and editorial — best for fashion, luxury, and art-focused sites where large headlines make a statement. Use sparingly for maximum effect.

px (pixels): Absolute unit tied to screen resolution. Simple to understand but doesn't scale with user preferences. Best for precise control in static designs.

rem (root em): Relative to the root element's font size (default 16px in browsers). If root is 16px, then 1rem = 16px. Recommended for web typography because it respects user accessibility settings — if a user increases their browser's default font size, all rem-based sizes scale proportionally.

em: Relative to the parent element's font size. Useful for component-level scaling (like icon sizes relative to text) but can compound unexpectedly in nested elements. Most modern design systems prefer rem for global typography and em for contextual spacing.

16px is the industry standard for body text on the web — it matches browser defaults and provides optimal readability for most typefaces. However, some designers prefer 18px or 20px for reading-heavy sites (like Medium or Substack) to reduce eye strain. For mobile-first design, 16px remains the sweet spot. The key is ensuring your body text is comfortable to read at arm's length on desktop and at typical viewing distance on mobile devices. Use this tool to experiment with different base sizes and see how the entire scale shifts.