Typography Scale Generator
Pick a base font size and a modular scale ratio (like the Golden Ratio or a Major Third), and this tool generates a full set of proportional type sizes — from small captions up to large headings — so your text sizes feel consistent and considered rather than picked at random. Copy the result as a ready-to-use CSS custom-properties block.
--step--2: 10.24px;
--step--1: 12.8px;
--step-0: 16px;
--step-1: 20px;
--step-2: 25px;
--step-3: 31.25px;
--step-4: 39.06px;
--step-5: 48.83px;How it works
A modular scale multiplies your base font size by a fixed ratio, step by step, in both directions — smaller steps (negative numbers) shrink toward captions and fine print, larger steps (positive numbers) grow toward headings and display text. The result is a set of sizes that all share the same proportional relationship, which tends to look more intentional than sizes picked ad hoc.
Choosing a ratio
Smaller ratios like Minor Second or Major Second produce subtle, closely-spaced sizes that suit dense interfaces; larger ratios like Perfect Fourth or the Golden Ratio produce more dramatic contrast, which works well for editorial or marketing pages with a few bold headings.
More tools in this category
Exposure Calculator
Find equivalent camera exposures across aperture, shutter speed, and ISO.
Aspect Ratio Calculator
Scale an image or video proportionally and find its simplified ratio.
CSS Gradient Generator
Design a linear or radial CSS gradient and copy the generated code.
Contrast Checker
Check whether a foreground and background color meet WCAG contrast guidelines.
Color Palette Generator
Turn any base color into complementary, analogous, and triadic color palettes.
Color Format Converter
Convert any color between HEX, RGB, HSL, and CMYK instantly, with one-click copy for each format.