Calculate optimal CSS line-height values based on font size and reading comfort with visual preview.
Line Height Calculator estimates a CSS line-height from the font size and reading-comfort choice, then shows the spacing in a text preview. It is intended for comparing plausible line boxes before committing a value to a stylesheet, not for proving that one setting is universally optimal. The usual surprise is that line-height describes the line box, not the visible blank strip between glyphs. Font metrics, wrapping width, weight, and actual content can therefore make the same numeric setting look different.
Enter the font size used by the text and choose the available reading-comfort level. The calculator combines those inputs to produce a candidate line-height and renders sample copy with that spacing. Change either input to compare the numeric recommendation with the preview instead of judging the number in isolation.
Use the result in the CSS rule for the same text size you evaluated. If the displayed result includes a unit, preserve it when copying. To convert a length to a unitless value, divide line-height by font-size. For example, 24px divided by 16px is 1.5. A unitless value scales with an element's font size.
No. The calculator supplies a spacing candidate and a visual comparison, but accessibility cannot be established from line-height alone. Test the real page with zoom, text-spacing overrides, narrow layouts, and the intended font. Content must remain readable and usable when a reader changes text spacing, even if the original recommendation looked comfortable.
Only at a particular font size. With a 16px font, a unitless line-height of 1.5 produces a used line height of 24px. A 24px length remains 24px when inherited, while the unitless 1.5 multiplier applies to a descendant's own font size. That distinction matters in components containing differently sized text.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.