Type Scale Generator
Pick a ratio, choose your fonts, and get a harmonious type system — exportable as CSS or Tailwind in one click.
4xl
4.209rem
The quick brown fox jumps over the lazy dog.
3xl
3.157rem
The quick brown fox jumps over the lazy dog.
2xl
2.369rem
The quick brown fox jumps over the lazy dog.
xl
1.777rem
The quick brown fox jumps over the lazy dog.
lg
1.333rem
The quick brown fox jumps over the lazy dog.
base
1.000rem
The quick brown fox jumps over the lazy dog.
sm
0.750rem
The quick brown fox jumps over the lazy dog.
xs
0.563rem
The quick brown fox jumps over the lazy dog.
:root {
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
/* Font properties */
--font-weight-heading: 700;
--font-weight-body: 400;
--leading-heading: 1.2;
--leading-body: 1.6;
--tracking-heading: -0.02em;
--tracking-body: 0em;
/* Type scale */
--text-xs: 0.563rem; /* 9.0px */
--text-sm: 0.750rem; /* 12.0px */
--text-base: 1.000rem; /* 16.0px */
--text-lg: 1.333rem; /* 21.3px */
--text-xl: 1.777rem; /* 28.4px */
--text-2xl: 2.369rem; /* 37.9px */
--text-3xl: 3.157rem; /* 50.5px */
--text-4xl: 4.209rem; /* 67.3px */
}Frequently Asked Questions
- What is a type scale?
- A type scale is a set of font sizes derived from a single base size and a fixed ratio. Each step is the previous size multiplied by the ratio, producing a harmonious visual hierarchy. The same principle behind musical intervals — hence names like "Perfect Fourth" (1.333) and "Minor Third" (1.2).
- Which ratio should I choose?
- For body-heavy interfaces (dashboards, docs), a tight ratio like Major Second (1.125) or Minor Third (1.2) keeps sizes from growing too quickly. For editorial or marketing pages with strong hierarchy, Perfect Fourth (1.333) or above gives dramatic contrast between levels. Golden Ratio (1.618) is eye-catching but produces very large headings — use sparingly.
- What are CSS custom properties and why use them?
- CSS custom properties (variables) let you define your scale once in :root and reference it throughout your stylesheet. Changing one variable — say --text-base — automatically updates every size relative to it. They compose well with Tailwind's arbitrary values and work natively in all modern browsers without a build step.
- How do I use this with Tailwind CSS?
- Copy the Tailwind export and paste it into the theme.extend section of your tailwind.config.js (or tailwind.config.ts). The generated fontSize entries override Tailwind's defaults for those keys, while leaving the rest of the scale untouched. You can then use classes like text-lg, text-2xl directly in your templates.
- Why rem instead of px?
- rem values scale relative to the browser's root font size, which users can adjust for accessibility. A user who sets their browser to 20px base will see all your rem-based sizes grow proportionally, preserving readability. Pixel values are absolute and ignore this setting. rem is the standard recommendation for font sizes in accessibility guidelines.
- Does this tool load fonts from Google?
- Yes — when you select a font in the Heading or Body panel, the tool injects a Google Fonts stylesheet link into the page so you can see a live preview. No font data is stored by AppicLab. The generated CSS and Tailwind config include only the font-family name; you must add the corresponding Google Fonts link tag (or a self-hosted equivalent) in your own project.