I need my space

We did a few detailed design walkthroughs last week, so I thought I’d pick a simpler topic for today’s issue: line height. One value, one little concept – should be easy right?

Boy, was I wrong.

I ended up reading a ton about the topic and even bought a book on typography that went into detail about it. Turns out, there’s a lot of art that goes into picking line height.

I’m not a designer, so I find relying on art pretty unhelpful when I’m working on a page, so let’s see if we can use rules and a bit of science to set our line heights responsibly.

Let’s begin!

PS. Apologies in advance for some of the spacing and line break issues. I fought Beehiiv forever trying to fix them and lost quite a few battles :(

What exactly is line height?

Let’s start with a simple definition of line height.

Line height is the height of the line box (the part of the box model that contains the text) plus the space above and below it.

Line height vs. leading

You might have heard of another related term, “leading.” Conceptually, it describes the same result (space between lines of text), but there’s a slight difference. While line height measures space above and below a line of text, leading measures the space from the baseline of one line of text to the baseline of the next.

Here’s an illustration, courtesy of CSS-Tricks:

Leading is generally used in print and graphic design, but the two concepts collide in our world, thanks to Tailwind.

Tailwind uses a class called “leading” to set the CSS property “line-height.” Spicy.

Why is line height important?

Line height might not feel very important on the list of design things you have to worry about, but setting a good line height can make a big difference when it comes to 1) readability and 2) usability.

Let’s tackle readability first.

• Readability
  
  As we read text, we’re putting our eyes to work. The longer we read, the more tired our eyes get. When we reach the end of a line, our eyes get a nice little break before getting back to work again.
  
  If our line height is too small or too big, we make it hard for the user to find the next line easily, making the text more difficult to read.

  
  Check out this example, with a line height that’s a bit too tight. How does it feel to read?

  

  
  It was pretty hard for me. We need more space!

  
  And here’s an example on the other end of the spectrum – too loose. How does this feel to read?
  

  

  
  That’s a bit too much space for me! With that line height, things start to feel too messy and disconnected.

But there’s also the issue of usability.

• Usability
   
  When you look at a block of text on a screen, you have to decide: do I read it or do I skip it? In other words, do I want to use it or not?

  
  Text with a line height that’s too short feels packed, dense, and overwhelming. It’s too intimidating to read.

  
  Text with a line height that’s too tall feels loose and disorganized. It’s too messy and difficult to read.

  
  A line height that’s well set makes the text approachable and invites the reader in.

How do you measure line height?

Before we get into picking line height, we need to know how to measure it.

I’m used to seeing line heights with no units at all, so I was surprised to learn that line height can actually be measured in a range of units!

Here they are:

body {
   line-height: normal;
   line-height: 2;
   line-height: 1em;
   line-height: 1rem;
   line-height: 200%;
   line-height: 20px;
}

I’m going to do a dedicated issue on units in CSS (with the help of the incredible Kevin Powell!), so for now, we’re going to stick to the option that has no units at all.

That option is a multiplier – whatever it’s set to, you multiply by the font-size of that text and that’s the value of your line height.

Ex: If your font-size is 16px and your line-height is 2, then your line-height for that text is 32px. Nice and simple.

But don’t I get a default line height? Can’t I just use that?

You sure do and you totally can! If you don’t manually set a line height, your browser will set one for you, and it’s usually 1.2. If you’re using Tailwind, the default line height is 1.5, although it changes based on the size of your text.

That’s not bad, but we can often do better. We’re going to unpack how to pick a better value along with some shortcuts to help you make good design decisions.

Great, so what value should I pick?

Now that we have some background on line height, let’s dig into actually picking a value. We’ll start by asking some questions about our text.

1. What kind of text is it?
   
   Text that needs a line height is usually a header or body text. Buttons and nav items are usually just a word or two, so I don’t really have to think about line height when it comes to my UI elements.
   

   There’s a simple rule you can follow when it comes to how we can think about text and line height:
   

   • Bigger text = smaller line height

   • Smaller text = bigger line height
     

   In other words:

   • Headers = smaller line height

   • Body text = bigger line height

   
   Let’s look at examples of this in action and see what we think.
   
   Headers
   
   Here are headers with Tailwind’s different line-height values.

   
   

   
   
   
   
   
   

   
   For headers, a line height that’s smaller usually works better. In fact, if you’re using Tailwind and pick a bigger font-size from their predefined classes, it’ll automatically reduce the line height for you.

   
   To practice sharpening your design eye, take a moment to look at the above and see which one feels most 1) readable and 2) usable to you. Which feels most approachable? Which feels most organized?

I personally find myself drawn to “leading-tight” for bigger headers. Large text takes up real estate and can feel like they’re floating in space. Decreasing the line height can pull them back together again and make them feel nice and cohesive. When in doubt, this is a safe choice for larger text.

Body text

And what does body text look like at my different line height values? Here are some examples:

Let’s take a moment to pause and reflect: Which of these feels most 1) readable and 2) usable to you? Which feels most approachable? Which feels most organized?

I find myself pulled towards the “.leading-relaxed” example the most, but let’s see if we can put some science behind that feeling.

2. Calculating your line-height
   Line height sounds like one simple value, but in my research, I was most surprised at how dependent it is on three other elements: typeface, font-size, and line length.

   
   This is where the art comes in – you start with a typeface, you pick a font size, you play with the line-height, you adjust the line length, then you go back to fix the font size, then modify the line-height, and on and on until it “feels right.”

   
   I don’t know about you, but a process like that is lost on me. I need some rules to follow. Let’s see if we can come up with a framework to get us a great line height.

   
   1. Pick your typeface

   
   Since we’re designing for a screen, we’re going to pick a typeface that 1) is sans serif and 2) has a big x-height (ideally, 70% or greater). For more info, I wrote an issue on x-height and picking a typeface here.

   
   Short cut: When in doubt, Inter is always a safe choice. For alternatives, Work Sans, Open Sans, San Francisco, and Roboto are all good options.

   2.Pick your font size
   
   Since we’re talking about body text, this one is fairly straightforward. There’s a small range to pick from, but these seem to be the agreed upon best practices:

   • Mobile: 16px

   • Desktop: 18px
     

   So far, so good! Next, we’ll pick our line length.
   
   3. Determine your content width

   
   Content width is determined by line length. Line length can be measured by 1) how many characters are in a line or 2) how many pixels (or other fixed unit) long it is. Since we’re optimizing for readability, we’re going to start with the number of characters.

   
   I did a bunch of research on this, and it looks like the most agreed upon line length for body text is between 50-75 characters.

   
   But as developers, we don’t size content based on characters. So what is 50 - 75 characters in pixels?

   
   That depends on your typeface and font size. Let me illustrate.

   
   If we picked a font size of 16px, here are the different widths for 5 different typefaces at 50 characters.

   

   
   At a font size of 18 px, here are the different widths for 5 different typefaces at 75 characters.
   

   

   As you can see, there’s some range here, but our screen friendly options, predictably, take up around the same amount of space compared to our serif font, Times New Roman, and our low x-height sans serif option, Futura.

   
   It’s important not to make your text too wide, since that will make it hard to read and feel unusable. To make it easier, here’s a reference of suggested widths for your future projects, assuming you pick one of our screen-friendly sans serif fonts:
   

   

   
   And finally, we can get to line height.
   

   3.Calculate your line height

   Now that we have typeface, font-size, and content width, all that’s left is determining the line height.

   
   It was harder than expected to find a straight forward rule on line height. The answers seem to be either a blanket statement like 1.5 for everything (ok, but not great) or a frustrating “it depends.”

   
   But I did find one resource that I’m excited to share with you. It takes your font size, typeface, and content width and uses the golden ratio to calculate a good line height.

   
   It’s called the Golden Ratio Typography and I offer it with a grain of salt: there’s a lot of controversy behind the legitimacy of the golden ratio as it applies to graphic design (and in general). I’ll cover that topic in a different issue.

   
   But regardless of its legitimacy, it serves as a helpful starting point for those of us who are still sharpening our design eye. Let’s dig in.

   
   For easy reference, here’s a table of suggested line height values I calculated for Open Sans and Roboto (those were the only two of our five typefaces they had, sorry!).

   

   If you want to use Tailwind’s predefined line height values to implement this, you’ll have to use “leading-relaxed” which is 1.625. After that, it jumps to “leading-loose” which is 2 and way too big. Otherwise, you can always define your own.

   
   As you can see, the line heights aren’t widely different.
   
   But how do our calculated line heights compare with the 1.2 browser default and our 1.5 Tailwind default? Let’s see.

   
   
   
   

   
   Let’s take a moment to reflect on these options compared to our two defaults and see how it performs in terms of 1) readability and 2) usability.
   
   

   
   For me, I see a pretty big difference between our browser defaults and our calculated line heights, and I like the results of our calculated line heights much better.

   Going from the Tailwind 1.5 default to our calculated line heights is more subtle, but I can still feel the difference. I think the extra room gives it just a bit more readability and usability and really serves the user.

   What about you? What impact did this exploration have on your future line height decisions?

Whatever you do, it’s important to take a moment to think about the 1) readability and 2) usability of the text on your page and make sure your line height helps your users do their jobs as easily and quickly as possible.

Here are today’s takeaways on line heights:

• Headers should have a smaller line height

• Body text should have a bigger line height

• Determine typeface and content width first, then figure out the line height

• Content width should be based on a target line length of 50-75 characters for body text

• If you’re using Tailwind classes and want to give your body text more space, go with “leading-relaxed”

This was a bit more of a tactical issue than my usual breakdowns and walk throughs. Which do you prefer?

Happy designing!

❤️ Saron