Line height refers to the vertical space between lines of text on a website. It plays a huge role in readability and visual hierarchy. Too little space makes text look cramped, while too much space can feel disconnected and disjointed. In CSS, line height is usually set using unitless numbers, percentages, or specific length values like pixels or ems. Designers often adjust line height to create a comfortable reading experience, especially in long-form content like blogging or on mobile screens.

How line height works in CSS

In CSS, you can control line height using the line-height property. For example, line-height: 1.5; means the spacing between lines is 1.5 times the font size. You can also use fixed units like 20px, which locks the line spacing regardless of font size. Using a unitless value is generally more flexible because it scales naturally with inherited font sizes. Line height doesn’t add space to the top or bottom of a block but rather adjusts the space within the text container.

Best practices for setting line height

A good starting point for line height is usually between 1.4 and 1.6 times the font size. Body text typically benefits from a slightly larger line height for readability. Headlines or smaller chunks of text may need less spacing. Responsive design also affects your decision—what works on desktop might not be ideal for mobile. It’s important to test across screen sizes and browsers to make sure the text remains easy to read.

Line height and SEO relevance

While line height doesn’t directly affect SEO, it does contribute to a better user experience, which search engines reward. If visitors struggle to read your content because of poor line spacing, they’re more likely to bounce quickly. On the flip side, a well-structured layout with appropriate spacing can keep users engaged longer. This indirectly improves your SEO metrics like dwell time and page quality. It’s a small but meaningful detail that adds up in web performance.

Common mistakes when setting line height

One common mistake is using the same line height across all text sizes. Headers often need tighter spacing than body text. Another issue is applying fixed pixel values that don’t adapt well to responsive design. This can cause text to overlap or become unreadable on certain devices. Finally, ignoring vertical rhythm—how text spacing aligns across the page—can lead to a visually messy design. Paying attention to consistent spacing improves the overall polish of your site.

FAQs about line height

What is the ideal line height for websites?

For most body text, an ideal line height falls between 1.4 and 1.6. This range gives enough breathing room for each line, making content easier to scan and read. However, the ideal setting also depends on the typeface and layout. Always test your design across devices.

Is line height the same as leading?

Yes, in traditional typography, the term "leading" refers to the same concept. In web design, we typically use the term "line height," but both refer to the vertical spacing between lines of text. The name "leading" comes from the strips of lead used in printing to create space between lines.

How do I set line height in CSS?

You can set it using the line-height property. For example: p { line-height: 1.5; } will make your paragraph lines 1.5 times the font size. You can also use fixed values like 20px, but unitless values are generally more scalable and responsive.

Does line height affect mobile design?

Absolutely. Text can appear cramped or overwhelming on small screens without proper line height. Mobile designs usually benefit from slightly larger line spacing to ensure readability. Always preview your site on various devices to make necessary adjustments.

Can poor line height hurt my SEO?

Indirectly, yes. If your content is hard to read, users may leave quickly, increasing your bounce rate. This signals to search engines that your content may not be high quality. Optimizing line height improves readability, which helps with user engagement and ultimately supports your SEO goals.

Build a better website with smart design choices

Line height might seem like a small thing, but it plays a huge role in making your content look polished and readable. Whether you're designing a portfolio, running a blog, or building an eCommerce site, thoughtful typography helps visitors stay longer and engage more. The right website builder can make all of this easier by taking care of design best practices automatically. Get started today with B12 and create a website that looks great and reads even better.