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.

Similar Posts

  • Typography contrast

    Definition Typography Contrast refers to the noticeable difference in visual elements within text, such as size, weight, or color. It is crucial for enhancing readability and establishing a clear hierarchy in digital interfaces. What is it In typography and UI design, contrast helps differentiate various elements of text, guiding users through content effectively. By using…

  • Typography mistakes

    Definition Typography Mistakes refer to errors in the selection and arrangement of text that detract from readability and visual appeal. These issues can hinder the user experience and overall effectiveness of digital interfaces. What is it In typography, UI design, and digital products, typography mistakes are often related to font choice, size, spacing, and Alignment….

  • Typography spacing rules

    Definition Typography Spacing Rules refer to the principles governing the space between characters, words, lines, and paragraphs in text. These rules help create a harmonious and readable interface for users. What is it In typography and UI design, spacing encompasses techniques such as Kerning (space between characters), Tracking (consistent space across a range of characters),…

  • Typography consistency

    Definition Typography Consistency refers to the uniform application of typographic styles across digital platforms. It ensures that text elements—such as fonts, sizes, and spacing—are used consistently to enhance readability and user experience. What is it In the context of typography and UI design, typography consistency involves adhering to a specific set of typography rules throughout…

  • Serif fonts explained

    Definition Serif Fonts are typefaces characterized by small decorative strokes at the ends of their letters. They help create a sense of tradition and formality in design. What is it In typography, serif fonts include distinctive features like “serifs,” which are the small lines or embellishments that extend from the ends of a letter’s strokes….

  • Typography psychology

    Definition Typography Psychology is the study of how different typefaces, font sizes, and styles influence reader Perception and behavior. It plays a critical role in shaping user experience and engagement in digital design. What is it In typography, UI design, and digital products, typography psychology examines how various font choices affect emotions, perceptions, and readability….