Your Guide to the CSS Line Height Property

CSS line height is a crucial property that helps ensure your web document looks great and functions seamlessly. Whether you're a professional looking for a refresher on CSS properties or just a beginner, we're here to help you understand the CSS line height property and how to use it. 

In this post, we'll walk you through what the CSS line height property does, why it's useful, the intricacies of its values and syntax, and its significance in creating an accessible website. Plus, we'll share a CSS line height example to help you better understand how to use this property in practice. 

• What is the CSS line height property?

• Why use CSS line height? 

• What are the CSS Line Height Values? 

• CSS Line Height for Accessibility

• CSS Line Height Example 

What is the CSS line height property?

When you use the CSS line height property, you are setting the height of a line in your document. The most common use of this property is to establish the distance between your lines of text, which is why it's invaluable.

However, you can also use it on block-level elements. In that case, your CSS line height identifies the minimum height of the line boxes inside the element. That's it — it really is that simple! (Psst: Remember that negative values aren't allowed with the CSS line height property.) 

Why use CSS line height? 

So, when do you use the CSS line height property? We're glad you asked. You would use this property when working with CSS in your web document and identifying the height of a line within your document. Think: Setting the distance between lines of text in your web document. 

By mastering the CSS line height property, you can rest assured your web documents look excellent and perform well. 

What are the CSS Line Height Values? 

Before diving into the CSS line height values, let's briefly recap the syntax for this property.

The syntax for CSS line height is as follows: 

Line-height: normal | number | length | initial | inherit

Now that we've covered that, you're ready to walk through the CSS line height values. Keep these handy for when you're working with this property moving forward.

• Normal: The default line height. If you're using a desktop browser, the default is 1.2. However, this varies based on the element font family. 

• Length: The length you identify is used to calculate line box height. Use cm, pt, or px to identify this. 

• Percentage: This is relative to your element's font size. 

• Number: The number you identify gets multiplied by the current font size. This sets the line height. Because this yields reliable, expected results, this is generally considered the best way to set line height. 

• Initial: Using this sets your property to its – you guessed it — initial default value. 

• Inherit: Property is inherited from the parent element. 

CSS Line Height for Accessibility

We've said it before, and we'll say it again — website accessibility is imperative. It ensures you don't isolate any of your audience by delivering a fully inclusive digital experience. CSS line height has a role to play in doing so. Let's get into it.

When working with the CSS line height property, you should also keep website accessibility in mind. Though 1.2 is usually the browser's default line height, it isn't accessible. According to W3 Web Accessibility Initiative, you should ensure line height is at least 1.5x the font size and spacing following paragraphs is at least two times the size of your font.

Setting your line height to 1.5 can make a significant difference for those with low vision or other cognitive disabilities like Dyslexia. Doing this guarantees that your site offers an inclusive digital environment. Another option is to use a unitless value. If you do this, the line height scales proportionally as visitors zoom in to adjust the text size.

Got additional questions about website accessibility? This checklist can help you ensure your website is fully accessible for visitors with disabilities. 

CSS Line Height Example 

Here's a CSS line height example to help you get a better understanding of what using this property looks like.

Get started using the CSS line height property today.

Ready to implement CSS line height into your web document? You now have all the resources necessary to do so. Happy creating!