Typography and Color

Line Height and Measure

A paragraph block becomes easier to scan when line length, line height, padding, and default margins are controlled together.

Program

Measure is the length of a line of text. Combining a reasonable measure with generous line height keeps multi-line text from feeling cramped.

line_height_measure.html
Visuals: captured from real browser rendering
<style>
.measure { max-width: 36ch; }
.measure { line-height: 1.6; }
.measure { padding: 18px; background: #f8fafc; }
.measure p { margin: 0; }
</style>

<article class="measure">
  <p>Longer release notes are easier to scan when line length and line height work together.</p>
</article>

  1. Limit the line length.

    The paragraph wraps into shorter lines.
    The ch unit roughly tracks the width of text characters.

  2. Add breathing room between lines.

    The wrapped lines separate vertically.
    Line height is unitless here, so it scales with the font size.

  3. Frame the text with padding and a quiet surface.

    The text sits inside a light reading panel.
    Padding gives text space from its container edge.

  4. Remove the paragraph default margin.

    The text aligns cleanly inside the panel.
    Component styles often reset default margins at the edge.
line-height Line-height controls the distance from one text baseline to the next.
measure Measure is the readable width of a text line.