Generate a harmonious modular type scale with golden ratio, major third, and other classic ratios. Preview sizes visually and copy the full CSS.
A typography scale is a set of font sizes that follow a consistent mathematical ratio. Instead of choosing sizes randomly, each step is multiplied by the same ratio — creating visual rhythm and hierarchy across headings, body text, and captions.
Choose a base size (16px is the browser default and a solid starting point), then pick a ratio. Smaller ratios like 1.125 create subtle, elegant scales for editorial sites; larger ratios like 1.618 create dramatic contrast for marketing pages.
A typographic scale is a fixed set of font sizes that follow one mathematical ratio, so every step relates to the next with the same proportion. Instead of picking sizes by eye — 14, 17, 22, 31... — you pick a base size and multiply (or divide) it by the ratio again and again: 16 × 1.25 = 20, × 1.25 = 25, and so on. The result is a hierarchy that feels intentional: headings, body, captions and labels all look like members of the same design system rather than a random pile of sizes.
Common ratios behave differently. 1.125 and 1.2 create subtle, elegant steps — ideal for dense, text-heavy interfaces where the size changes should whisper. 1.25 and 1.333 are the workhorses of the web: noticeable hierarchy without drama, and 1.333 happens to be the classic musical perfect fourth. 1.5 produces bold jumps for content sites. 1.618 — the golden ratio — is striking but aggressive: beautiful for display headings and marketing pages, usually too much for long-form reading.
16px is the browser default and the right starting point for body text on desktop: it matches the reading comfort of printed books, is legible for most users, and aligns with accessibility guidance. Mobile interfaces can start slightly smaller (15px) or stay at 16px. Once the base is fixed, derive everything else from it — headings by multiplying up, captions and labels by dividing down — so a single change to the base re-tunes the whole hierarchy consistently.
A scale is more than font sizes. Line height should grow as text size shrinks: 1.5–1.6 for body copy, 1.2–1.4 for headings. For vertical rhythm, multiply your base size by the scale ratio to build spacing steps — if your scale is 16/20/25/31, those same numbers can serve as margin and padding increments. When font sizes and spacing share one ratio, every element snaps to an invisible grid and the page feels composed rather than assembled.
Type should scale fluidly between mobile and desktop. Modern CSS makes this one line: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — a minimum, a fluid middle, and a maximum. Set the min and max from your scale (e.g. 16px to 28px) and the viewport term does the rest, so headings shrink gracefully on phones and grow on monitors without a single media query.
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Warm and friendly — popular for CTAs in lifestyle brands
Energetic red-orange, great for urgent accents
Earthy gold associated with quality and heritage
Balanced blue-green — calm, trustworthy, professional
Deep violet tied to wisdom and premium brands
Bold red for passion, alerts, and strong emphasis
Soft purple-blue common in SaaS dashboards
Nature and growth — the color of eco and finance brands
Playful and bold, the signature of youth-oriented design
Authority and stability — the suit-and-tie of colors