How Line Height Affects UI Scanning Speed

Line height, historically known as leading, directly dictates how efficiently users scan and comprehend text within a user interface. When vertical spacing between lines is calibrated correctly, users can quickly parse paragraphs, accurately track from the end of one line to the beginning of the next, and absorb critical information with minimal cognitive friction. Poorly configured line height creates visual barriers that significantly degrade reading speed and usability.

The Mechanics of Eye Tracking and Saccades

When users scan a UI, their eyes move in rapid, jerky movements called saccades, punctuated by brief pauses called fixations. Scanning speed depends on how smoothly the eye can execute return sweeps—the movement from the end of one line to the start of the next.

If line height is too tight (typically below 120% of the font size), the text lines visually merge. The eye struggles to isolate individual horizontal paths, leading to "double-taking" or accidentally re-reading the same line. This friction breaks the scanning rhythm, increases cognitive load, and slows down interaction.

The Cost of Excessive Spacing

Increasing line height generally improves readability, but only up to a threshold. When line height is too loose (exceeding 180% to 200% for standard body text), the visual cohesion of the paragraph breaks down.

Instead of perceiving a unified block of related information, the human eye interprets widely spaced lines as isolated elements. Users must exert extra effort to locate the next line during a return sweep, disrupting vertical flow and slowing down overall scanning speed. In extreme cases, excessive leading causes users to mistake line breaks for separate paragraphs.

The Optimal Ratios for UI Scanning

To optimize UI scanning speed, designers should tailor line height to font size, line length, and element hierarchy:

• Body Copy: Maintain a line height between 140% and 160% (a unitless value of 1.4 to 1.6). This provides sufficient breathing room for descending and ascending characters while keeping the block unified.
• Headings and Titles: Use tighter line heights, typically between 110% and 125% (1.1 to 1.25). Because larger fonts naturally have larger absolute space between lines, tighter leading prevents titles from looking disjointed.
• Line Length Correlation: Longer lines of text require greater line height to help the eye navigate back across wide horizontal distances. Conversely, shorter lines (such as text in sidebars or cards) require tighter line heights to maintain rapid vertical scanning.

Impact on Pattern Scanning

Most digital users do not read every word; they scan interfaces using F-shaped or Z-shaped patterns, searching for anchor words and visual cues. Adequate line height creates the negative space required for typographic contrast, allowing headers, bullet points, and keywords to stand out. When spacing is optimized, users can effortlessly sweep down the text block, pinpoint target information, and complete tasks faster.