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!

Pimp my Type on Patreon

Get several benefits while supporting my content creation.
Join Patreon

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

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2500+ typography enthusiasts, unsubscribe anytime.

35 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. Oh, Patrick! Love that you actually read that copy šŸ˜‚! Yes! I think Iā€™ll have to listen to Achtung Baby again.

    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

    1. Stimmt, jetzt passt es im GroƟen und Ganzen eh. Also vielleicht ein andere Projekt dann mal fĆ¼r PMT Live šŸ˜‰.

  6. A long time ago, I remember hearing anything between 1.2 and 1.5 was an acceptable range for line height, but as you say it really depends on the typeface. Over the years I’ve come to use 1.5 as a baseline for regular text, and a custom line height for headings.

    Your screenshots were a great addition to this article. Sometimes it’s hard to guage the difference in spacing when coding, but seeing them side by side you can really tell the difference.

    1. Thanks for your comment, Steve! Iā€™m glad you found the comparison helpful. And 1.5 is also my starting point in most situations when it comes to desktop full width columns of 70 characters.

  7. Great article! I usually add -0.02em or so letter-spacing to larger headings as the gaps between the letters become more pronounced as the text gets bigger.

    1. Very cool, thanks for sharing, Ben! šŸ™Œ Thatā€™s about the value Iā€™d also use and a whole topic of itā€™s own, that Iā€™ll definitely cover in detail in in upcoming video or article!

  8. Hello sir good day! I just want to thank you for a very informative article. One of the best articles about line length and line height on the internet so far.

  9. Hi Oliver – great article – thank you. A lot of web designers I work with struggle to achieve the optimal line length in their DESKTOP layouts without feeling compelled to fill in the “gaps” either side with images or additional content. As you know, some web-page components have naturally narrow columns of text (e.g. proof points), making it easy to achieve the recommended line length. However, others (e.g. page introductions) comprise text and nothing else. You either have to run the text across the entire width of the page or – to reduce the line length – find some other element to put alongside the text, so the page looks reasonably balanced (seldom a good solution). Can you suggest any workarounds – a way of achieving a readable line length in DESKTOP web-page components that are exclusively textual (i.e. containing no images, icons or other graphical elements ) while still maintaining good visual balance? (This is obviously less of an challenge in tablet layouts and not an issue in mobile layouts.) Thanks!

    1. Good question, Bryan! In my designs I actually always introduce a max-width, and then the text block is either centered or left aligned, depending on the layout. Centered often is the preferred method, but I tend to not fill the space with wider screens. But one thing I do is scale up the font size as a whole, since I assume that with a wider screen, its further away from the spectator (more about this in my font size article).

  10. hi there, thanks for sharing this article, it’s very comprehensive and add depth and method to the equilateral triangle of the perfect paragraph.
    I liked that you mentioned the color of typography. I interpreted it as the texture and contrast between foreground and background that we are looking to optimise.
    Wouldn’t be the case then, when picking the font, to consider not only the typeface but also the weight? In other words a bolder text should have an increased leading?
    If so, this can also be true for optical illusions. As we perceive a white text on a dark background chunkier, should we increase the leading for it accordingly?
    thanks

    1. Good question, Gianluca! The weight ist definitely important when picking a typeface. It should have sufficient contrast to be readable enough against the background. When setting light text on a dark background, the weight can be decreased a bit to make it not as bright. I write a bit about this here with Action Text. I would not increase the tracking with bolder type, if the bold weight is intended to emphasize certain parts of the text. But if you have an example, share it, and Iā€™ll take a look. I think thatā€™s easier šŸ˜‰.

      1. I see. Well, when itā€™s a lighter weight than you might have to adjust the tracking to make it use up the same space as the regular weight. Or youā€™re using a typeface with a specific style for that (like Darkmode or Action Text) or one with grade.

        Yes, it can be hard. But in most cases these are the tiny details that will not have the most impact on the overall impression. So donā€™t be too hard on yourself and enjoy the process šŸ˜‰.

  11. Iā€™m an editor who rarely, if ever, emails or comments on posts. I needed this information! Thank you for an excellent article in the internet sea of posts.

  12. Thanks for the great article. Off-topic, my main takeaway from reading this is how much readable an article can be when blockquotes have a background color!

    1. Thanks, Robert! You mean my examples? At least they separate themselves a bit more from the other content šŸ˜‰.

  13. Hi Oliver,

    i understand the ratio between font-size and line-height. But i don’t unterstand well the ratio between line-height and line-lenght. I tryed to find some webpages where I can get some infos but it’s no easy. Can you help me

    1. Of course, Henz! So when you have shorter lines (around 30 characters), you can make the line-height more compact, like 130% or 1.3 times the font size. The longer your lines get, the higher your line height should be, so that it is easier for the eyes to travel from the end of one line to the beginning of the next. At a length of 60 to 80 characters it could be something like 150% or 1.5 times the font size, even more. Does this make it clearer?

Leave a Reply

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