Typography Guide

Create and visualize your font guide with headlines, paragraphs, and labels.

Headlines

The quick brown fox jumps over the lazy dog.

Paragraphs

Labels / UI

Typography rules

About: Typography Guide

The typography guide helps you set up a project's text styles: headlines, paragraphs and UI labels. For each style you define the font family, weight, size and line height, and see it rendered on the alphabet, numbers, special characters and a sample sentence. Add your usage rules, then copy the whole guide as plain text to paste into documentation, a ticket or a design-to-development handoff.

Features

  • Three categories, headlines, paragraphs and labels/UI, with as many styles as you need, reordered with arrow buttons.
  • Set the font family, style name, weight (100 to 900), font size in pixels and line height.
  • Live preview on the alphabet, numbers, special characters and a sample sentence or paragraph.
  • A typography rules field, one rule per line, included in the generated guide.
  • Copy the full guide as plain text or just one category's styles, with undo and redo along the way.

How to use it

  1. In each section, fill in the font family, style name, weight, size and line height.
  2. Add more styles with Add a style and reorder them with the arrows.
  3. Write your usage rules in the rules field, one per line.
  4. Copy the generated guide at the bottom of the page to share it.

Questions about usage

The preview uses the fonts your browser can access: the font must be installed on your computer or be a system font, since the tool doesn't download web fonts. Otherwise the browser falls back to another font. You can enter a stack such as Inter, Roboto, sans-serif.

For body text, a line height between 1.4 and 1.6 is common, and WCAG criterion 1.4.12 requires content to stay readable when users set it to 1.5. Large headlines usually work with 1.1 to 1.3 because their lines are shorter.

In CSS, weight 400 is normal and 700 is bold. Values run from 100 (thin) to 900 (black) in steps of 100. A font only renders a weight it actually includes; otherwise the browser uses the nearest one or synthesizes bold.