CSS typography styler — readable body text with system font stacks

How to use the CSS typography styler

1. Choose a Font stack, for example System UI, Old-style serif or Monospace code.
2. Set Font size, Line height, Weight and Letter spacing.
3. Set Max line length in ch, and a Text transform if needed.
4. Pick a Text colour and paste your own copy into Sample text to judge it on real words.
5. Copy the .prose rule and apply the class to your article or content area.

What it does and when to use it

Body text is what people spend most time reading, and small changes in spacing and line length make a large difference to comfort. This tool is for setting that base style: blog posts, documentation, help pages, or the paragraph style of a design system. The preview shows your settings on a full paragraph rather than a single line, which is where problems with tight lines or long measures become visible.

To build matching heading sizes, use the type scale generator. To convert other sizes in your stylesheet, use the px to rem converter, and check the text colour with the contrast checker.

How it works

The output contains font-family, font-size in rem (pixels ÷ 16), font-weight, a unitless line-height, max-width in ch and color. letter-spacing is added only when it is not zero, in em so it scales with the text, and text-transform only when it is not “none”. Every font in the stacks is a system font, so nothing is downloaded. MDN lists font-family and line-height as Baseline widely available since July 2015.

Worked examples

The default. System UI at 18px, line height 1.6, 65ch:

font-size: 1.125rem; /* 18px */
font-weight: 400;
line-height: 1.6;
max-width: 65ch;

A bookish article. Old-style serif, 20px, line height 1.7, 60ch gives font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; with font-size: 1.25rem; /* 20px */.

Small capital labels. Neo-grotesque, 13px, weight 600, line height 1.3, letter spacing 0.08em and uppercase add letter-spacing: 0.08em; and text-transform: uppercase;. Capitals sit tightly by default, so a little extra spacing helps short labels.

Limits and tips

• Font size is clamped to 6–96px and the slider runs 10–32px; this tool is meant for body text, not display headings.
• Thin weights look fainter than their contrast ratio suggests. Weight 300 in pale grey is hard to read even when the colours pass.
• Keep uppercase for labels and short headings. Whole paragraphs in capitals lose the word shapes readers rely on.