~/css/letter-spacing-generator
CSS Letter Spacing and Line Height Generator
Fine-tune how text breathes: adjust letter spacing, line height, word spacing, size and weight on a heading and a paragraph, try uppercase labels, and copy CSS that keeps your text comfortable to read.
Readable by design
Comfortable reading depends on space as much as on the font. Lines that are too tight feel cramped and dense; lines that are too loose fall apart and the eye loses its place moving from the end of one line to the start of the next.
Using the CSS Letter Spacing & Line Height Generator
Line height for body text
For paragraphs, a unitless line height between 1.5 and 1.7 is comfortable, and WCAG's text spacing guidance asks that layouts still work at 1.5. Unitless values scale with the font size, so nested elements with different sizes keep proportional spacing.
Tighten big headings
Large headings look loose at body line heights. Bring them down to around 1.05 to 1.2 and slightly reduce the letter spacing, for example -0.02em, so the words hold together as a shape.
Open up small caps and labels
Uppercase text and small labels need more letter spacing, around 0.05em to 0.12em, because capitals are designed to sit next to lowercase letters and look cramped on their own.
Use em for letter spacing
Letter spacing in em scales with the font size, so the same rule works at every size. Pixel letter spacing that looks right at 16px is far too loose at 12px and invisible at 48px.
Frequently asked questions
What is a good line length?
Around 50 to 75 characters per line for body text. Use max-width in ch units, such as 65ch, to control it.
Should I change word spacing?
Rarely. It can help with justified text or unusual fonts, but the defaults are usually right.
Does letter spacing affect accessibility?
Yes. Some readers increase spacing with browser tools, so avoid fixed heights that clip text when spacing grows.