Letter Spacing & Line Height Tool

Fine-tune letter-spacing, word-spacing, and line-height for optimal readability with visual comparison.

Tested tool guide Tested browser tools Checked August 16, 2026

What Letter Spacing & Line Height Tool does and how it behaves

Typography spacing is easier to judge in context than from isolated CSS values. This tool lets you adjust letter-spacing, word-spacing, and line-height while visually comparing the same text. Letter-spacing affects character-to-character spacing, word-spacing affects separation at word boundaries, and line-height sets the vertical size of each line box. The common mistake is treating one setting as universally readable: the same values can look quite different with another typeface, font size, column width, writing system, or weight.

How the result is produced

Horizontal spacing

The two horizontal adjustments affect different parts of the sample. Letter-spacing adds or removes space between typographic character units, while word-spacing adds or removes space at word-separating boundaries. Positive values open the text and negative values tighten it. Judge each control separately on identical copy, because increasing both can widen a paragraph enough to introduce new line breaks.

Line box comparison

Line-height governs the height of inline line boxes rather than the visible height of each letter. Its effect becomes clearest when the sample spans multiple lines. For a fair comparison, keep the font family, font size, weight, wording, and preview width fixed while changing line-height. Otherwise, a different wrap point or font metric can be mistaken for a direct spacing improvement.

Good uses

Tune the tracking of an all-caps navigation label by adjusting character spacing while viewing the exact wording at its intended size.
Compare line-height choices for a multi-line article excerpt at the intended column width before selecting a CSS value for body copy.
Check whether extra word spacing makes a dense paragraph easier to scan without also loosening the spacing between every pair of characters.

Limits and checks

The preview represents its current font and dimensions only. Substituting another font, weight, size, or content width can change both perceived spacing and line wrapping.
A single-line sample cannot demonstrate the distance between adjacent lines. Use enough representative text to wrap across several lines before evaluating line-height.
A visually pleasing result is not proof of accessibility. The comparison does not establish preferences for every reader or show whether a production layout tolerates user-applied text-spacing overrides.

Common questions

Does a line-height value of 1.5 mean 1.5 pixels?

No. In CSS, a unitless line-height of 1.5 means one and a half times the element's computed font size. With a 16px font size, that produces a 24px line height. A value written as 1.5px is literally 1.5 CSS pixels. Check the unit associated with a value before transferring it to a stylesheet.

Should headings and body text use the same letter-spacing?

Usually no. Large headings, all-caps labels, and running text have different shapes and reading demands, while each font has its own built-in spacing. Evaluate each text role with representative copy at its real size and weight. A combination that looks appropriate for a heading should be treated as a candidate for that role, not as a site-wide default.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.