Type Scale Generator creates a harmonious typographic scale for web and app design. Enter a base font size and select a scale ratio (Minor Third 1.2×, Major Third 1.25×, Perfect Fourth 1.333×, Augmented Fourth 1.414×, or Golden Ratio 1.618×) to generate a complete set of font sizes from xs to 6xl. The tool outputs ready-to-use CSS custom properties, Tailwind config values, and visual previews of each size.
Musical scale ratios are borrowed from music theory for typography: just as musical notes follow mathematical frequency ratios, type scales use consistent multiplication factors so font sizes feel visually harmonious. The Perfect Fourth (1.333×) is widely used for body text contexts because it produces a noticeable but not dramatic size jump between steps — good for content-heavy sites. The Major Third (1.25×) is subtler, suitable for dense interfaces (dashboards, admin panels). The Golden Ratio (1.618×) creates dramatic jumps, best for editorial or landing page contexts.
The modular scale concept was popularized by Tim Brown's modular scale tool (2011) and Robert Bringhurst's 'The Elements of Typographic Style'. Modern design systems like Material Design (Google), Polaris (Shopify), and Carbon (IBM) all use a defined type scale — this prevents ad-hoc font size decisions and creates visual consistency across a product.
Body text scale for blog
Result: Base: 16px, Ratio: 1.333 (Perfect Fourth) → xs:10px, sm:12px, base:16px, lg:21px, xl:28px, 2xl:37px
Dashboard compact scale
Result: Base: 14px, Ratio: 1.2 (Minor Third) → tighter scale → fewer font size options, denser UI
Landing page scale
Result: Base: 18px, Ratio: 1.618 (Golden Ratio) → 18px body, 29px h3, 47px h2, 76px hero heading
What is a modular type scale?
A modular type scale is a set of font sizes based on a consistent mathematical ratio. Start from a base size (e.g., 16px) and multiply by the ratio repeatedly to get each larger step, or divide to get smaller steps. Example with 1.333 ratio: 10.1px, 13.5px, 18px (base), 24px, 32px, 42.5px. This creates visual harmony — each size 'feels right' relative to the others because the relationship is mathematically consistent. The alternative (arbitrary pixel sizes like 14, 17, 21, 28, 36) often looks slightly off.
What is the difference between px, rem, and em for font sizes?
px (pixels): absolute — doesn't scale with browser settings. Bad for accessibility: if a user sets browser base font to 20px for readability, px-based text ignores this preference. rem (root em): relative to the root element's font size (usually 16px). 1rem = 16px by default. Scales with browser settings. Best practice for font sizes. em: relative to the current element's inherited font size. Cascades and compounds — an em inside an em multiplies. Use em for spacing that should scale with the element's text, rem for font sizes.
What font scale ratio should I use for my project?
Minor Third (1.2): compact, suitable for dense UI (dashboards, admin panels, developer tools). Major Third (1.25): subtle, good for apps with mixed content. Perfect Fourth (1.333): the most common choice — clear hierarchy without dramatic jumps, works for most web projects. Augmented Fourth (1.414): more dramatic, suits editorial/media sites. Golden Ratio (1.618): dramatic, best for single-product landing pages or portfolios. If unsure, start with Perfect Fourth (1.333) and adjust if the h1/h2 sizes look too large or too small for your layout.
How do I implement a type scale in CSS?
Define CSS custom properties at the root: :root { --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; }. Use them as: font-size: var(--text-lg). In Tailwind, extend the fontSize key in tailwind.config.js. Clamp for responsive scaling: font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem) — this scales between 1rem and 1.5rem based on viewport width. Modern CSS 'fluid typography' uses clamp() to create a smooth scale that doesn't need breakpoints.
What is the recommended base font size for web?
The default browser base font size is 16px. Most design systems use 16px as the base for rem calculations. Body text is typically 16-18px for comfortable reading — below 14px is generally too small for long-form text. For mobile, 16px minimum prevents iOS from auto-zooming on input focus. For older audiences, 18-20px improves readability. Don't set a fixed pixel size on the element — this overrides the user's browser font preference. Instead, rely on the browser default and use rem units throughout.