...
Line heights should create enough breathing room for the eye to track lines without losing place. Accessibility guidance favors slightly generous line spacing, especially for body text.
- Line height is measured as a multiplier of the font-size. So a line height of 1.6 for text at 16px font size means the line height = 1.6 x 16px (1rem) = 25.6px (or 1.6rem)
Recommendations
- 1.1–1.3 line height for headings
1.4-1.6 line height for body text (1.6 is our standard line height for body text)
- 1.2 line height for short, single-element content, such as a person's name, title, company, degree, major
- This keeps the wrapped lines visually connected
Add a small but consistent margin or padding between each distinct piece of information to create clear grouping
- we use .35rem or .5rem for spacing between elements with a font size of 1rem
- Example: text elements in directory profile cards
Tighter line heights reduce readability, especially on small screens or dense layouts.
Extra spacing improves comprehension for users with dyslexia or low vision.
Maintain consistent line height across similar text types to support predictable scanning.
...