Typography Playground

Test typography on your own text: choose a system font stack, then adjust size, weight, line height, letter and word spacing, alignment, case, colours and line length. Preview at phone, tablet and desktop widths, check the contrast ratio and copy the CSS.

This tool runs entirely in your browser.

Loading tool…

How to use the Typography Playground

1Type your own text or load a sample: heading and paragraph, a long article paragraph or UI labels.
2Pick a font stack and adjust size (px or rem), weight, line height, letter spacing, word spacing, alignment and text transform.
3Set the text and background colours and watch the contrast ratio and its pass or fail label.
4Set the container width in ch or px, switch between 375, 768 and 1200 px previews, then copy the CSS.

What is the Typography Playground?

Readable body text depends on a few settings working together. Sizes of 16–20px suit most screens; line height around 1.5 gives lines room without breaking the paragraph apart; and a line length of about 45–75 characters — roughly 60–70ch — keeps the eye from getting lost. Letter spacing is best kept at normal for body text, with small positive values for all-caps labels.

Every font here is a system stack: a list of fonts already installed on most devices, ending in a generic family like sans-serif. Nothing is downloaded, so pages load fast and the preview shows exactly what your visitors’ devices will render. The contrast ratio uses the WCAG formula; normal text needs 4.5:1 for AA and large text 3:1.

Frequently asked questions

Should I use px or rem for font size?

rem respects the reader’s browser font-size setting, so it is the better default for text. 1rem is 16px unless the user or your CSS changes the root size.

What line height should body text use?

Usually 1.4 to 1.7, written without a unit so it scales with the font size. Headings can be tighter, around 1.1 to 1.3.

What does the ch unit mean for max-width?

1ch is the width of the digit 0 in the current font, so max-width: 65ch keeps lines at roughly 65 characters whatever the font size.

Why doesn’t a weight like 300 change anything?

Many system fonts only include regular and bold. If a weight isn’t installed, the browser uses the nearest available one.

Is the Typography Playground free and private?

Yes. The Typography Playground is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →