Line height definition
Definition
Line Height refers to the vertical space between lines of text. It is a key factor in ensuring text is readable and visually appealing.
What is it
In typography, line height, also known as Leading, is the distance from the baseline of one text line to the baseline of the next. In UI design and digital products, it helps create a harmonious visual Rhythm and enhances the legibility of content across different devices.
How it works
Line height is often specified as a ratio or a fixed measurement (e.g., 1.5em or 24px). For instance, if a user interfaces displays body text at 16px with a line height of 1.5, the space between the lines would be 24px. This spacing ensures that lines do not crowd each other, making it easier for users to track text while reading, especially in mobile applications or web pages where space is limited.
Why it matters
Adequate line height greatly influences readability and user experience (UX). Proper spacing can reduce eye strain and improve the flow of text, making the content more accessible to all users. For businesses, enhancing readability can lead to lower bounce rates and higher Conversion, as users are more inclined to engage with easily digestible content.
Examples
Medium: Uses generous line heights in articles, allowing readers to scan and absorb information with ease. This results in longer engagement times.
Airbnb: Implements tailored line height in its listings to ensure clean readability, particularly for descriptions, which enhances the user’s ability to absorb key details.
Slack: Applies specific line heights in chat messages, making conversations easy to follow. This design choice fosters better communication among team members.
Best Practices
- Use a line height of 1.4 to 1.6 times the font size for body text to improve readability.
- Adjust line height based on device type; higher line heights may work better on smaller screens.
- Test different line heights with your audience to find the optimal measurement for readability and aesthetic appeal.
- Ensure adequate line height in forms and Interactive Elements to enhance accessibility.
Mistakes
- Setting line height too tight (less than 1.2) can lead to crowded text and drive users away.
- Ignoring responsive Design Principles by using a fixed line height could hinder readability on various screen sizes.
- Overly large line heights can disrupt the reading flow, making text appear disjointed.
- Not considering the typeface; different fonts may require different line heights for optimal legibility.
Related terms
- Leading
- Vertical rhythm
- Readability
- Typography
- Font size
- Whitespace
- User experience (UX)
- Accessibility
FAQ
Q: How do I calculate the correct line height for my text?
A: A common formula is to multiply the font size by a factor typically between 1.4 to 1.6 for optimal readability.
Q: Is line height the same as spacing between letters?
A: No, line height refers to the vertical space between lines of text, while Letter Spacing (or Tracking) is the horizontal space between individual letters.
Q: Can line height affect SEO?
A: While line height does not directly impact SEO, improving readability can lower bounce rates, indirectly boosting your Search Rankings through better User Engagement.
Q: Should I use different line heights for headings and body text?
A: Yes, typically headings can have a smaller line height to create compactness, while body text benefits from more generous spacing for better readability.
Q: What tools can assist in setting line height?
A: Most design software like Adobe XD, Sketch, or Figma allows you to test and set line heights easily, alongside CSS stylesheets for web design.
Summary
Line height is a crucial element in typography and UI design that affects text readability and user experience. By choosing the right line height, designers can enhance content accessibility and engagement across digital products, ultimately leading to improved business outcomes.