What is Leading (Line Height)?
Leading (pronounced "ledding," originating from the strips of lead used in old printing presses), known in web development as "Line Height," is the vertical distance between the baselines of successive lines of text. In CSS, the line-height property dictates how much vertical "breathing room" exists within a paragraph.
Why Leading Matters in UX and Readability?
If a B2B buyer gets a headache trying to read your whitepaper, they will close the tab. Leading is the primary controller of paragraph readability.
- Preventing Text Fatigue: If leading is too tight, the ascenders and descenders of letters collide, making it difficult for the eye to track back to the start of the next line. If it is too loose, the text visually breaks apart into unrelated strips.
- Cognitive Load: Generous line height (typically 1.4 to 1.6 times the font size for body text) creates a calm, organized interface that significantly lowers the cognitive effort required to consume complex SaaS documentation.
- Accessibility: WCAG guidelines recommend a line spacing of at least 1.5 within paragraphs to accommodate users with cognitive disabilities, dyslexia, or visual impairments.
- Vertical Rhythm: Proper leading works in tandem with the Baseline Grid and Element Spacing to create a mathematical, consistent flow down the entire webpage.
Example from Flowtrix Projects
During Figma-to-Webflow translation, Flowtrix developers never use fixed pixel values (like 24px) for Line Height. Instead, we use relative unit multipliers or percentages (like 1.5 or 150%) applied to our Global Styles. This ensures that if a user changes their browser's default font size for accessibility reasons, the Leading automatically scales proportionally, maintaining perfect readability.
Master Webflow.
Get insights directly.
.avif)
.svg)
.svg)
