CSS Typography Generator
The properties that set type
Good web typography is mostly a handful of properties set deliberately rather than left at their defaults. CSSGen.dev's typography generator covers size, line height, tracking, decoration and the newer text-wrap values that fix ragged headings and orphaned last words.
Syntax
font-size: <length>; line-height: <number>; letter-spacing: <length>; text-wrap: <mode>;| Part | What it controls |
|---|---|
| font-size | Use rem so it scales with the user's browser setting. clamp() gives a fluid size with a floor and a ceiling. |
| line-height | Set it unitless. A number multiplies the element's own font size and inherits correctly; a fixed length does not. |
| letter-spacing | Large display type usually wants slightly negative tracking; small uppercase labels want positive. |
| text-wrap: balance | Evens out the line lengths of a short block, which is what stops a heading leaving one word on the last line. |
| text-wrap: pretty | Aimed at body copy. It avoids orphans without rebalancing every line the way balance does. |
| text-decoration | Modern CSS adds thickness, style and offset, so underlines can clear descenders instead of cutting through them. |
Notes from practice
Unitless line-height, always
line-height: 1.5 inherits as a multiplier, so a child with a different font size gets proportional leading. line-height: 24px inherits the fixed value and breaks at any other size.
balance is for headings, pretty is for paragraphs
balance evens every line and is capped at a few lines, so it suits titles and pull quotes. pretty only fixes the end of a paragraph and is cheaper on long text.
Keep measure near 65 characters
Lines much longer than that are hard to track back from. max-width: 65ch is the simplest way to set it.
CSS Typography Generator FAQ
What line-height should I use for body text?
Between 1.5 and 1.7 unitless for body copy, tightening towards 1.1 to 1.2 for large headings. Always use a unitless number so the value scales with each element's own font size instead of inheriting a fixed length.
What does text-wrap: balance do?
It evens out the line lengths across a short block of text, so a heading no longer leaves a single word stranded on its last line. Browsers cap it at a small number of lines, which is why it is meant for headings rather than paragraphs.
How do I make font size responsive without media queries?
Use clamp(): font-size: clamp(1.75rem, 4vw, 3rem) sets a minimum, a preferred fluid value and a maximum. The size then scales with the viewport but never drops below or climbs above your bounds.
How do I stop an underline cutting through descenders?
Use text-underline-offset to push it down and text-decoration-skip-ink: auto, which is the default in current browsers, to let the line break around the descenders of letters like g and y.
Should I set font-size in px or rem?
rem, because it scales with the user's browser font-size preference while px ignores it. That preference is a real accessibility setting, and px text silently overrides it.
Related generators
- Variable Fonts — Drive weight, width and optical size from one font file. The preview uses Bricolage Grotesque.
- Gradient Text — Fill letters with a gradient using background-clip: text, with an optional shimmer animation.
- Text Shadow — Layer text shadows for long shadows, embossed letterpress or neon glow.
- Multi-column Layout — Flow text into balanced newspaper columns with rules, gaps and a spanning heading.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.