CSS Generator

CSS Typography Generator

Adjust font size, weight, line height, spacing, alignment, and decoration. Preview your text as a heading and a paragraph, then copy the CSS.

Typography speaks, too

A sample paragraph reveals what one line cannot: rhythm, line height, spacing across longer sentences, and the gaps that justified text creates in a narrow column.

Settings

Sample

Sample text The paragraph uses the same style at a smaller size, showing how unitless line height adapts to each font size.

Font

Family Only fonts already available on this page are listed. In your project, change the name in font-family to your own font. Size 40 px Width 700 · Bold This page uses Fraunces and Instrument Sans at weights 400–700. Outside that range, the browser may synthesize the requested weight. Line height 1.2 Unitless. Try 1.05–1.25 for headings and 1.4–1.6 for body text.

Spacing and appearance

Letter spacing 0 em In em so spacing scales with the font size. Use negative values cautiously on large headings and positive values for uppercase text. Word spacing 0 px First-line indent 0 px Negative values create a hanging first line. Transform

Alignment

Left Center Right Justify

Small caps Convert lowercase letters to small capitals with font-variant-caps. If the font has no small caps, the browser may synthesize them.

Decoration

Line

Generated CSS

Placing text on a colored background? Preview it with the gradient generator.

Check headings and paragraphs together

Unitless line height scales with the font size of each element. Try 1.4–1.6 for body copy and tighter values for large headings. Use letter spacing carefully: negative values can harm small text. The preview uses local site fonts and system fonts; load your own font in your project before referencing it.

Should I justify text on a narrow screen?

Justification can create large gaps between words. Prefer readable alignment, or test hyphenation with the correct document language. Customize underline thickness and offset while keeping links recognizable.

All CSS generators · My Lienzo · Creative tools