CSS Typography Generator
Create a harmonious set of font sizes for your whole site. Choose a base size and a scale ratio, decide how many steps you need, and optionally make the scale fluid so it grows between a phone and a wide screen. You get custom properties for every step, heading and body styles with sensible line heights and line length, and a live preview.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Typography Generator
- Set the base font size and scale ratio.
- Choose how many steps above and below the base.
- Optionally enable fluid sizing for large screens.
- Pick font stacks, line height and line length, then copy.
CSS Typography Generator features
Modular scale
Eight classic ratios from minor second to golden ratio.
Fluid option
Different base and ratio on large screens via clamp().
Custom properties
--step-0, --step-1 … ready for your components.
Font stacks
System, humanist, geometric, serif and mono stacks, no downloads.
Readable text
Line height, max line length and balanced headings.
Live preview
See headings and paragraphs with the generated CSS.
When to use CSS Typography Generator
- Setting up typography for a new site or design system.
- Replacing ad-hoc font sizes with a consistent scale.
- Making headings scale on large screens without media queries.
- Comparing scale ratios before choosing one.
CSS Typography Generator FAQ
What is a type scale?
A set of font sizes where each step is the previous one multiplied by the same ratio. With a 16px base and a 1.25 ratio the steps are 16, 20, 25, 31.25 and so on, which looks balanced.
Which ratio should I choose?
Small ratios (1.125–1.2) suit dense interfaces and long reading; larger ratios (1.333–1.618) give dramatic headings for marketing pages. A fluid scale can use a small ratio on phones and a larger one on desktops.
What does fluid mean here?
Each step is a clamp() value that grows from its size on a small screen to its size on a large screen, so headings are bigger on large displays without breakpoints.
Why system font stacks?
They use fonts already installed on every device: no downloads, no layout shift and no privacy questions. Combine the scale with web fonts if you like.
Why limit line length?
Lines between 45 and 75 characters are easiest to read; the max-width in ch keeps paragraphs in that range.
Is anything uploaded?
No. The CSS is generated in your browser.
Building a typographic scale
Good typography starts with a limited set of sizes that relate to each other. A modular scale multiplies a base size by a fixed ratio for each step up and divides by it for each step down. The ratios come from music, such as the major third or the perfect fourth, and from geometry, such as the golden ratio, and produce sizes that feel related rather than random.
The generator writes each step as a custom property. Body text uses the base step, small print the step below, and headings h6 to h1 use increasing steps, so changing the base size or ratio updates the whole hierarchy at once.
Fluid scales go one step further. Phones need a compact scale so that headings do not wrap after every word, while large screens can afford more contrast between headings and text. By setting a base and ratio for both ends, each step becomes a clamp() value that interpolates between them as the viewport widens.
Readability depends on more than size. Body text gets a line height of about 1.5 to 1.7, headings a tighter 1.1 to 1.2, and paragraphs are limited to around 65 characters per line. text-wrap: balance evens out heading lines and text-wrap: pretty avoids single words on the last line of a paragraph.
All sizes are in rem, so they respect the font size readers choose in their browser, and the font stacks rely on fonts already present on Windows, macOS, Linux, Android and iOS.