Find the vertical rhythm your text needs. Adjust font size and spacing, preview real paragraphs live, convert every CSS unit, then copy the exact value.
Typography works best when each line feels connected to the next without becoming crowded. A balanced line height gives the eye a clear path through the paragraph and makes longer passages easier to scan.
Click the paragraph to edit your own textUse real content, not guesswork. The calculator keeps every common CSS format in sync while the live specimen shows how spacing changes reading rhythm.
See the matching unitless, pixel, em and percentage values for any font size.
Edit the paragraph, change its width and test the spacing with content like yours.
Choose the unit your project needs and copy a ready-to-use declaration.
CSS line height controls the vertical space reserved for each line of text. To convert a unitless line-height to pixels, multiply it by the font size. For example, 16px × 1.5 = 24px. That means a 16px font with line-height: 1.5 uses a 24px line box.
For body copy, a unitless value between 1.4 and 1.7 is a useful starting point. Large display headings often feel better around 1 to 1.25, while small text or long lines may need more room. Font shape, weight, line length and audience all affect the final choice, so use the live preview as a visual check.
The Balance it button provides a sensible starting value based on the selected font size. It is a design suggestion, not a universal rule—adjust it until the sample feels easy to follow.
A unitless value is inherited as a ratio, so nested text calculates spacing from its own font size. This usually behaves more predictably in responsive layouts than inheriting one fixed pixel value.
Unitless values such as 1.5 are flexible and usually the best default. Pixels create an exact line box, which can help with a strict baseline grid. Em and percent are relative formats: 1.5em and 150% both represent one and a half times the element's font size when declared directly on that element.
Multiply the font size by the unitless line-height value. A 16px font with a line-height of 1.5 produces a 24px line box.
Start around 1.4 to 1.7, then test the actual font, size and line length. Wider lines and smaller type often benefit from more spacing.
Unitless line-height is usually the most flexible choice because child elements inherit the ratio and use their own font size. Use pixels when you intentionally need a fixed line box.
Multiply the unitless value by 100. A line-height of 1.5 is 150%, while 1.25 is 125%.
Yes. Line-height defines the full height of each line box, including the text. Any extra space is distributed around the glyphs by the browser.
Yes. It is free, requires no account and runs locally in your browser.
Keep refining your interface with these free online design tools.