Typography

The ideal line length & line height in web design

Today, you’ll draw a line in the sand, look at its length and height and commit to always consider it! Best opener ever – I know – but seriously, this is something a lot of people don’t pay attention to. Line height and line length are crucial if you want to set your text properly, and in this article and video will tell you what you should pay attention to when setting it.

TL;DR: For reading text on desktop devices, the ideal line has a length of 60 to 80 characters with a line height of around 1.5 to 1.6. It always depends on your typeface, and the shorter the line, the lower the line height can be, especially for headings. Over all, make it as compact as possible but as loose as necessary.

This article is the second part of my miniseries about the basics of setting your text right, and follows the one about font size. There, I already covered the concept of the holy trinity of typography – font size, line length, and line height. So let’s move on to worship the duality of the two latter. I will mostly focus on setting continuous long reading text for web design, but I’ll also cover mobile, touch on headings, and other display text as well.

What’s the goal behind it all?

The goal with well set text is an even typographic color. And by color I don’t mean blue or red, I mean that you want your text to be inviting to read, not too dense and not too loose. You’ll get what I mean when you take a look at the examples below and pay attention to what you feel by just looking at them, not necessarily reading them. If you read this article on a phone, you might want to rotate it to landscape orientation, since the line length is oriented towards desktop screens here.

The goal with well set text is an even typographic color. And by color I don’t mean blue or red, which I love, what you can obviously see on my shirt, this website, this text, and so on. I mean that you want your text to be inviting to read, not too dense and not too loose. This text is set too dense. Yes, you save space when you set it this way. But just looking at it gives you the feeling that this will be hard. It will be work. It will be cumbersome to read. And you don’t want that. The lines are so close together you will have a hard time focusing, and you might also lose the line when you really try to read that. It feels like someone is forcing you into a tiny little room, everything is messy and stuffed. It’s not structured, there’s no air to breath. Please, someone, open a window or let this text break free! It does not deserve that. It does not deserve to be trapped into that tiny box. This is torturing a typeface and the reader at the same time, a classic lose-lose situation! So just don’t do that. If you really read the whole paragraph here, I’m impressed. Tell me in the comments, I’ll give you a virtual hug.
😩 Line height: 1.2 – definitely not what we want. This typographic color is too dark.
This text looks better then the one before. You don’t feel that preassure, it’s not cramped, but it’s not ideal either. It is obviously set too loose. This means, the text visually almost falls apart. It will be hard to combine it with images or headings. It feels wasteful, even if it’s not printed. It forces you to scroll more than you should. This text has a lot of space to breath, too much, actually. Furthermore, now it might even hyperventilate! Someone get a paper bag, quick!
😕 line-height: 2.2 – better, but not what we want either. This typographic color is too light.
This is it what we were looking for, a nice and even typographic color. Just beautiful! I have climbed highest lines, I have run through the measures, only to be with you, even typographic color, only to be with you … Not sure how I came up with this now. I really liked U2 back then, when I was in my late teens. It was in the mid 2000s. I loved the old stuff from the eighties and the crazy stuff from the nineties. Like Lemon, it’s just insane! Now they basically just produce crap. Sad. But whatever, tastes change. I tend to like it a bit looser when it comes to setting text, but this might change as well. What I want to say is, that there always is some wiggle room for your decisions. So take them, enjoy them and evolve along the way. Isn’t typography wonderful?
🤩 line height: 1.6 – Yes! This typographic color is just right!

All the examples above are set in the same typeface, Inria Sans, at the same font size and have roughly the same line length of about 75 characters. The thing that differentiates them is the line height. So you see how much influence it has, how compact or airy you set your text.

There is no magic number that will always look right

But for many typefaces, there is a range of numbers that will look okay, often better than the browser defaults. I’ll share mine with you at the specific points of the article. But what I most want this article to be for you is an eye-opener. If you’re new to the subject, or you lack confidence in it, I want to guide you through the process and teach you what you should pay attention to. Why it looks better or more appropriate in a certain way. Typography is more art than science, all my advices here are guidelines base on my experiences as a UI designer for the past 15 years. In the end, always make your own decisions.

Choose your typefaces first

The first step should always be choosing appropriate typefaces for your different kinds of text (display text, body text, and functional text). Why? The visual appearance and the metrics of each font can be different. In some cases, it is obviously different, like when switching from a monospace font to a proportional serif font. In other situations it is not, like when switching from Helvetica to Arial – which you would never do, because you would never have used them in the first place, right? But the risk is always having to adjust everything again. So decide upon your typeface first, then tinker with setting it. This will save you a lot of time and hassle.

Same font size, same line height, different typeface. What worked for Inria Sans does not work for Merriweather Sans anymore. That’s because the metrics of Merriweather Sans are different. The characters are wider and a bit larger. So less text fits into one line. Where there was space for 75 characters, now only about 61 fit into one line. The text now seems darker. To avoid changing evening all over, choose your typeface first, then adjust the line length and line height. This will save you a lot of time. Changing the layout and your design components later, because you switched to a different typeface, is always a risk that mostly results in unnecessary extra work.
😕 Too dark and too large. Hard to believe, but what looked smooth in the earlier example with Inria Sans, now only looks okay with Merriweather Sans.
Same font size, same line height, different typeface. What worked for Inria Sans does not work for JetBrains Mono anymore. That’s because the metrics of JetBrains Mono are different. Every character has the same width, and the characters are also a bit larger. So less text fits into one line, 51 characters to be exact. It now seems noisier and too large. What I want to illustrate her is, that every typeface might need a unique treatment. Monospace fonts are very exceptional, of course, but it’s a good way for me to make a point.
😩 Oh no! Same line height and font size again, but a very different result with JetBrains Mono. It seems dull, dense and too large.

So before we really dive into it, here’s the over all process again:

  1. Choose an appropriate typeface
  2. Set it in the right font size
  3. Pick a decent line length
  4. Adjust the line height accordingly

Then set your measure, aka max-width

In typographic terms, line length is called measure, and traditionally we want to avoid very long lines. For reading text, the ideal line is said to be around 60 to 80 characters long. Please know, this is not backed by research, shorter lines do not seem to increase reading speed, as Mary Dyson points it out brilliantly in her recent in depth article Line length revisited. Nevertheless, these 60 to 80 characters are something we might be familiar with from books, and relating to that is not a bad idea. And even if it was not for the reading speed, the reason why you want to set a max-width is, that it becomes more compact, and you can base the line height on it later in the process.

When you set your text in relative units, like rem, you can assume that one rem is approximately two characters wide. This means you can set your max-width between 30 and 40 rem. Decide on what looks better on the right margin of your left aligned text. In what situations do most words fit into one line, and you will achieve this even typographic color we are looking for?

This example is a bit tricky. Even though, the top one has the least steps in the right margin, the bottom example might be the most practical one. That’s because the lines are shorter. I just want to encourage you to take this into consideration.

Of course, this depends on the language your text is written in. English has shorter words than German, so a slightly longer leading might be beneficial. Always avoid lorem ipsum in your designs. If it’s available to you, use the actual text for your design. If not, use a draft or at least a dummy text in the language the text will be.

As Kim pointed out in a comment, I should not leave unmentioned that there exists a characters unit in CSS. The ch unit is based on the width of the 0. The advantage here is, that you don’t have to take the font size into consideration when setting the max-width, it could look like:

p {
  max-width: 64ch;
}

A reason why I don’t pick it, is because I set the rest of my spaces in rems and wanted to stick to them. But there are definitely cases where it will be helpful!

Set the line height according to the line length

Leading, that’s the fancy typographic term for line height, always goes hand in hand with measure. And you should almost always adjust it. Depending on the user agent, desktop browsers use a default value of roughly 1.2. For body text, this is obviously too little.

Longer lines need more line height, shorter lines need less. When long lines are too close together, it’s harder to catch the beginning of the next one. This effect shows itself in paragraphs with more than ten lines. You lose orientation, feel the urge to use a ruler or highlight the text with your cursor, or to just seek revenge for this experience. Because it is not your fault, it is bad typography’s fault. I’ll repeat the examples from the beginning of the article to show you that.

The goal with well set text is an even typographic color. And by color I don’t mean blue or red, which I love, what you can obviously see on my shirt, this website, this text, and so on. I mean that you want your text to be inviting to read, not too dense and not too loose. This text is set too dense. Yes, you save space when you set it this way. But just looking at it gives you the feeling that this will be hard. It will be work. It will be cumbersome to read. And you don’t want that. The lines are so close together you will have a hard time focusing, and you might also lose the line when you really try to read that. It feels like someone is forcing you into a tiny little room, everything is messy and stuffed. It’s not structured, there’s no air to breath. Please, someone, open a window or let this text break free! It does not deserve that. It does not deserve to be trapped into that tiny box. This is torturing a typeface and the reader at the same time, a classic lose-lose situation! So just don’t do that. If you really read the whole paragraph here, I’m impressed. Tell me in the comments, I’ll give you a virtual hug.
☠️ Line height: 1.2 – long lines and little line height are a deadly combination. Pretty easy to lose orientation here.

With a measure of let’s say 34 rem, and the font size set to 1 rem, the line-height could be something like 1.6. This looks clean, open and friendly in the typeface I choose.

This is it what we were looking for, a nice and even typographic color. Just beautiful! I have climbed highest lines, I have run through the measures, only to be with you, even typographic color, only to be with you … Not sure how I came up with this now. I really liked U2 back then, when I was in my late teens. It was in the mid 2000s. I loved the old stuff from the eighties and the crazy stuff from the nineties. Like Lemon, it’s just insane! Now they basically just produce crap. Sad. But whatever, tastes change. I tend to like it a bit looser when it comes to setting text, but this might change as well. What I want to say is, that there always is some wiggle room for your decisions. So take them, enjoy them and evolve along the way. Isn’t typography wonderful?
🤗 Line height 1.6 – ideal for a wider column, and in this typeface.

Now we come to the part where line height and line length are connected to each other. What looked too dense with a line height of 1.2 in a wide column, almost seems okay in a narrow column. You will most likely not lose your orientation when reading this, because the way to the next line is shorter. Nevertheless, it is not ideal either and still seems very dense. With an increased line height to a value of 1.35 it looks much better.

What looked too dense in a wide column looks almost okay in a narrow column. Nevertheless, the line height of 1.2 is not ideal for body text. It still seems very dense, dark, and cramped. You will most likely not lose your orientation when reading this, because the way to the next line is shorter. I hope this shows how all things are connected with each other.
😕 Line height 1.2 – looks better on mobile, but it’s still too dark.
Now we are talking! This looks so much better for mobile. A small difference, but it’s there. Even a narrow column benefits from some extra line height when it comes to body text. I set it to 1.35. More space means more air to breath, more space to focus, and for your audience to connect with the content you designed.
😁 Line height 1.35 – a small but noticeable change makes a big difference.

And when you take a look at what worked for desktop with a line height of 1.6 it’s not that ideal on mobile again. There, it’s too loose but still better than the first version with a value of 1.2.

What looked good in a wider column on desktop is too much on mobile with a line height set to 1.6. It’s better than 1.2, but not that ideal. Everything is connected, adjust things to each other. Pick a typeface, choose the font size, set the max-width and then the line height.
😕 Line height 1.6 – a bit too much for a narrow column.
Now we are talking! This looks so much better for mobile. A small difference, but it’s there. Even a narrow column benefits from some extra line height when it comes to body text. I set it to 1.35. More space means more air to breath, more space to focus, and for your audience to connect with the content you designed.
😁 Line height 1.35 – as a comparison again.

I hope this made it clear, how it all connects. If you want to play around with the settings, you could use my example on CodePen for that. And there is the perfect triangle game by Matej Latin that illustrates how font size, line length and line height are interconnected in an interactive fun way. Try it out! And thanks to Paul for sharing it in the comments, where you can also see how I scored 😂.

What does this mean for mobile and app design?

On a phone, measure is not that important, since the screen is very narrow anyway. Don’t set the text too small (14 to 15 px minimum). Then you automatically won’t fit that many words into one line. This means your column might have a width of something around 20 to 25 rem. Now you can mostly fiddle around with the line-height. The narrow column, is more forgiving, especially when it comes to larger line heights. I’d go for a value between 1.3 and 1.45, again, depending on the typeface.

If you have to use one value for desktop and mobile, I’d go for around 1.5. It might be too little for desktop and too much for mobile, but it’s better than the default. And sometimes it’s not possible due to technical limitations to adjust it.

In an ideal world, you could make the line height fluid and locked to the column width. There are techniques for that, and I’m thinking about creating some content on this as well. If you’re interested or have any great resources about it, let me know in the comments!

Different kinds of text need different line heights

This article was mainly focused on body text, but now let’s just briefly cover the other kinds of text.

Headings

Headings should be set compact, a lot of websites tend to forget about that. When set at a larger font sizes than the body text, they could have a line height of around 1.1. Just make sure, that the ascenders and descender won’t overlap. Always look at your headings with line breaks in between. You never know when it will be too long and go across multiple lines. I focus on that in this typographic review of a fashion website.

The example of my review: On the left side the line-height is set to 1.3, the heading seems to fall apart. On the right side, it is set to 1.1 and more compact.

Other display text

Like a lead paragraph that is set in a larger font size. When you fit less text into one line, you can decrease the line height as well. I show this in a review of a blog here.

Before: lead in is too light
Before: lead in is too light and too far apart, with a line-height of 1.8.

After: lead in is stronger and has less line height
After: lead in is stronger and has less line height now (1.5).

UI Components

Short info text, notifications, buttons, or navigational elements, benefit from a shorter line-height as well. They are set in a smaller size, a value of 1.2 to 1.3 is something I often use. In rare cases, like with buttons, I set it to 1, so no line height at all. This way, they won’t use up that much space, which is always helpful when it comes to UI design.


If this article was helpful to you, let me know and share it with a friend who might benefit from it! If you have any questions or additions, I’m happy to read them in comments.

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Every second Tuesday a short article or a video from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads. Your email will only be used to send out the newsletters, unsubscribe anytime.

15 Comments

  1. Very well written, thank you for refreshing and updating my knowledge. You are very considerate of readers getting an overall understanding while talking about the very necessary and also the somewhat nerdy details. Very entertaining, as always.
    Also I want to thank you for bringing up LEMON by U2, which I haven’t listened to in ages. I too was into them once and completely forgot about Zooropa, so thanks! “Dressed up like a car crash” … wow. The pathos, the nostalgia!

    1. How cool, Paul! I know and honor Matej, have his book, but I did not know the game! Just quickly clicked through it – scored 49/100 😂 LOL. Should have taken a little more time to do it. I added the link to it in the article!

  2. I was a bit surprised that you didn’t mention that it is possible to set max-width to the `ch` unit in CSS. `ch` is “The advance measure (width) of the glyph “0” of the element’s font.” according to MDN, which means that you don’t have to take font-size into consideration, when setting the width.

  3. Great overview of some basic principles for legible text. I appreciate how you emphasize the necessity of observation in tandem with adjusting elements rather than providing a single number. It’s also helpful how you show ranges of possibilities rather than a single “right” answer. Including the tighter leading of display type was a useful reminder.

    1. Thank you, Matt, for sharing how you received it. This was exactly my intention – wanting to support people in making their own educated decisions. 🤗

  4. Coming here for Christmas 2021 because lonely and covid just to say I put in the effort in reading that first dense paragraph so maybe this virtual hug I am promised makes me a little less lonely.

    (Okay it’s not that bad, but let’s go back to reading!)

    1. Danke für die Frage! Erstes schnelles Feedback – Größe ist okay, Zeilen sind etwas lange, bei manchen Überschriften ist es merkwürdig, warum sie kleiner sind. Den Blocksatz würde ich wegnehmen. Trotz Silbentrennung ist der mobile sehr kritisch, weil dadurch große Lücken zwischen den Wörtern entstehen. Aber ich nehme es im Detail gerne für das nächste Mal Pimp my Type Live, im Februar auf, wenn das für dich passt?

      1. Hi Oliver!

        Vielen Dank für deine Meinung!
        Ja, wenn du möchtest kannst du das ganze für das nächste pimp my type aufnehmen.

  5. Hallo Oliver,

    ich habe meinem Bekannten, der die Website erstellt hat, über deinen Kommentar und deine Empfehlungen informiert.

    Er hat gemeint, dass die Zeilenlänge für ihn eigentlich noch in Ordnung gewesen ist, aber er hat sie nun doch etwas reduziert.
    Die Schriftgröße der Überschriften wollte er eigentlich schon längst überarbeiten, weil das so natürlich noch nicht gepasst hat, aber das hat er dann wohl doch vergessen. Diese sind nun etwas größer. Oder deutlich größer.
    Der Blocksatz wurde bei den Smartphones und ähnlich kleinen Geräten entfernt. Das mit der Silbentrennung funktioniert leider eben eher schlecht als recht um bis jetzt war die Hoffnung da, dass das ganze nun bald ähnlich gut funktioniert.

    Ob die Seite aber für dein pimp my type live so geeignet ist, da bin ich mir jetzt nicht mehr sicher.
    Gib doch bestimmt interessantere Internetauftritte

    Eine gute Zeit und alles Liebe wünsche ich dir
    Simone

Leave a Reply

Your email address will not be published. Required fields are marked *