Line-height controls the height of line boxes. A unitless value scales with the element's own font size when inherited, which is often useful in mixed-size content.
Make this comfortable
CSS line height and measure: protect long-form reading
When to use it
A compliance report contains paragraphs, subheadings, and short code references. Set the report's prose to a readable measure rather than letting one line stretch across a wide monitor. A unitless line height follows larger text without requiring a separate pixel value for every heading. Do not treat a ch maximum as an exact character count; glyph widths differ across fonts and languages. The sample gives ordinary paragraphs a 66-ch cap and keeps their width within the parent. Tables and code blocks need separate overflow rules because prose line-length guidance does not make a wide table fit. Check body copy with a fallback font, 200% zoom, and long terms. The final measure should be evaluated against real text, not a repeated placeholder sentence.
.compliance-report { line-height: 1.55; }
.compliance-report p { max-inline-size: min(100%, 66ch); margin-block: 0 1rem; }
.compliance-report h2 { line-height: 1.25; margin-block: 1.75rem .75rem; }Cost and verification
These properties add little rendering cost. Their maintenance cost is separate treatment for headings, code, and dense data, which naturally have different line-height needs. Excessive line height can separate words from the line they belong to; too little can make multi-line text hard to track. Use the font's actual metrics in visual review. Do not lock paragraph height to a fixed number of lines, since translation and user font scaling can produce more lines. Keep the report's source order and headings meaningful without CSS.
Common Mistakes
- Do not set one pixel line height for all font sizes.
- Do not assume ch is an exact word or character count.
- Do not cap block height to enforce a preferred paragraph length.
Connected lessons
css
reference
web