Article overview

Readability: the Optimal Line Length

· By · 37 comments ·

You should have around 60 characters per line if you want a good reading experience.

Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?

  • Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
  • Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).

In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping it within the range of 50-75 characters per line.

How to achieve the optimal line length in web design

In web design you can achieve an optimal number of characters per line using em or pixels. (You achieve the best results with em but it can also be a bit more tricky to work with than pixels.) Regardless of which one you choose, your layout will have to be in a fixed width if you want to achieve an optimal line length for the majority of your visitors.

This is one of the reasons we don’t recommend using liquid layouts – you practically force the user to resize their browser window if they want a good reading experience on your site. When you consider the myriad of different window sizes used nowadays, it’s obvious that a liquid layout will result in a more or less random line length.

Here at baymard.com we use Arial in size 17 for our articles. With a 504-pixel wide article container, we end up with about 65 characters per line.

Do you know your line length in characters? Is it within the 50-75 range? It should be, if you want your visitors to have a good reading experience.

Voice your thoughts in a comment.

Image by m4tik.

Joshua Lay November 2, 2010 Reply to this comment

What would you say the optimal line length would be for mobiles?

My thinking would be that mobile displays already force a short line length; due to screen width. The main crux would be getting a good font size.

Since a smaller font becomes harder to read, but fits more content. A larger font would be easier, but fit less on a line and increase scrolling.

Jamie, Baymard Institute November 2, 2010 Reply to this comment

For mobile devices I’d suggest going for a semi-fluid layout where you define a max width (for large screens), but allow content to be scaled down (potentially below 50 characters per line) on smaller screens or if orientation is changed from landscape to portrait.

Font-size is generally more important than line width so I’d always go for a good font-size first. If it can be combined with an optimal line width, then that’s obviously the ideal solution.

Leon November 2, 2010 Reply to this comment

I’m not sure that there is an ideal line length (or rather, we’re pretty adaptable). Apart from the fact that other elements (colour, font face, font size, leading etc.) can affect the figure, there’s a lot of contradictory research around (see http://blog.fawny.org/2005/09/21/measures/, for example).

I recently moved to a % based layout and find the lines readable across lots of resolutions. Of course, that is just my opinion, and I’m sure it wouldn’t look right on a really wide screen.

Jamie, Baymard Institute November 2, 2010 Reply to this comment

It’s highly dependent on other factors such as screen, color, font, etc., which again will vary from device to device. Getting it 100% right across all devices is of course impossible, and not hitting ideal line length is far from the biggest legibility issue one can run into.

I think we’re very adaptable, but I also believe in the notion of an ideal line length. We can cope with 200 characters on a single line, and if the content is interesting enough, we’ll read that line, but ~60 characters would undoubtedly be more comfortable (and easier) to read.

William Hudson November 3, 2010 Reply to this comment

You don’t mention inter-line spacing, which goes hand-in-hand with line length. Your text on this page has generous inter-line spacing, but if it were half what it is now, the lines would have to be shorter to be read effectively.

Christian, Baymard Institute November 4, 2010 Reply to this comment

Yes great point. Inter-line spacing is definitely closely tied with line length, we might take it up in a future article.

Karen November 3, 2010 Reply to this comment

Great post! It’s very important to keep your audience engaged especially when there’s pertinent information you need to share.

Jose Granado November 4, 2010 Reply to this comment

Thanks! This was interesting to read. I’ve been lately working on my new site and I think I’m on my way to increase the font size after reading this. I think I’m on range though.

Cheers.

Christian, Baymard Institute November 4, 2010 Reply to this comment

Glad you could use it.

Vladimir Carrer November 4, 2010 Reply to this comment

I think we came to the same conclusion you are using 504px(width) / 17px(font) = 29,647 . For my Better Web Readability Project http://code.google.com/p/better-web-readability-project/ I am using 480px(width) / 16px(font) = 30

Christian, Baymard Institute November 4, 2010 Reply to this comment

A fine initiative, many sites will surely benefit from that project. Great to see that we each came to the same ratio.

Maria Malidaki November 4, 2010 Reply to this comment

Very interesting post :) How about suggesting limits for the width of the layout instead of having it completely fixed or liquid? This way you can balance between adjustability on web browsers and keep a good line length.

Jamie, Baymard Institute November 4, 2010 Reply to this comment

Setting a maximum and minimum width – a range – is certainly a viable solution. It lets the user control the layout to some degree without ever hurting readability.

Although as a publisher, you’ll have to consider the implications of this, especially with regard to images that are part of the documents flow.

Caroline Jarrett November 4, 2010 Reply to this comment

As so often in typography and reading, you start tweaking one factor (characters per line) and then you have to begin thinking about other factors (William Hudson: interline spacing, Joshua Lay: mobile i.e. delivery medium, yourselves: choice of font) .

Here are some other things that are worth thinking about:
- the type of material. Does it have long words like ‘internationalisation’? If so, you’ll need more characters per line so that each line has a good chance of a coherent thought, and to reduce hyphenation/raggedness
- the circumstances under which it is read. If it’s going to be read in a hurry, or as a bulleted list of instructions, you might want a shorter line length
- other types of delivery medium. I reckon you’re thinking mostly about relatively information-rich web sites. Typography on (say) a road sign would have different considerations.

And there are many more. Welcome to the fascinating world of usable typography – and the equally fascinating, related world of aesthetically enjoyable typography.

gore November 5, 2010 Reply to this comment

I spend a lot of time in mono-spaced code editors on a 1280×1024 monitor.

In general, my lines run between 40 and 100 character columns. In most of my editors I display a margin at 80 columns – but that’s only because it “looks right” to me with a 10pt font.

Usually, I avoid writing a line of code that extends beyond 100 characters, simply because it’s almost never necessary and it makes it difficult to figure out logic that could be more easily understood if broken into chunks of manageable size.

The way that whitespace in code is formatted can dramatically affect it’s readability – when tabs/spaces/newlines are used thoughtfully, it can make the intention of the code much easier to decipher.

It’s been noted before that bullet points and chunks of information make for better readability on websites – it sounds to me like it’s all a matter of how you manage your whitespace, including where a new line starts.

Missy November 22, 2010 Reply to this comment

The line length may be “optimal”, but I don’t like the layout. It’s dull. There is no contrast. The font is too large (I’m far sighted). The comments block doesn’t stand out from the copy. While there may be a scientific reason for your advice, it doesn’t work for me as the reader. Sorry!

David Starr January 1, 2011 Reply to this comment

Love this! Very practical and excellent advice and you’re focusing on an aspect of the user experience that is easily overlooked (yet, as you have pointed out, is key).

Thanks so much for this!

John January 1, 2011 Reply to this comment

Robert Bringhurst’s "The Elements of Typographic Style ", is the Typographer’s authoritative manual on this subject. It covers line-length in relation to character width and optimal legibility on a per-typeface basis. Arial is, of course, a sin against humanity. (http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063)

DRoss January 2, 2011 Reply to this comment

Type that’s too big is harder to read too.

17px Arial is a little big. 15-16px is better.

I agree and about line length and readability but when a font is a little too large it kind of defeats the purpose. I usually see it done by designers who are mainly print designers.

Sergio January 2, 2011 Reply to this comment

Really, really, really interesting post and blog. Congrats from Spain.

Charles Roper January 21, 2011 Reply to this comment

You’re averaging about 65-70 characters per line in this article in the browser I’m using (Chrome 9 on Windows XP), which is consistent with Bringhurst’s advice of “The 66-character line (counting both letters and spaces) is widely regarded as ideal.” For example, the line that reads "Here at baymard.com we use Arial in size 17 for our articles. With a " consists 69 characters, including spaces.

I’m interested to know why a) you reckon you’re using 60 characters per line and b) you recommend the 50-60 character advice (which I find a touch too narrow) over Bringhurst’s advice.

I am using the following bookmark to do my counts, btw. Very handy for this sort of thing!

http://www.gbsheli.com/2009/04/wc-word-count-and-char-count.html

Christian, Baymard Institute February 13, 2011 Reply to this comment

It’s a bit browser/OS dependent. On my combination (Chrome 9, OSX 10.6.6) it’s 60-71 characters depending on the characters used in the specific line. (The specific line you mentions measures 67 characters on my combination).

a) you are completely right, fixed it to 65.
b) the advised range in the article is 50-75, but I have now corrected the bolded sentence that probably made the actual recommendation a bit unclear.

Thank you very much for the link to the word count javascript bookmark. Truly a handy tool!

Justin May 23, 2011 Reply to this comment

Why is this article so painful on the eyes? Not exactly the best place to be taking readability advice from.

Ubuntu 10.4, Chrome 10

Badmonkey Botanicals September 21, 2011 Reply to this comment

Sounds like you need to alter your browser font settings. It looks fine to me.

MichWalkden November 1, 2011 Reply to this comment

The old newspaper rule was columns of no more than 15 pica. Seems to be in line with your character count.
This was for type of 12 point of less (normally much less).
Interesting that the “modern” comms world is following tried and trued old school methodology.

Mike Anderson November 15, 2011 Reply to this comment

Christian,

I’d be interested in what you think about the design of this blog that I tried to keep to your rules. I did a post that quotes you to explain why I designed it that way here:

http://mikeyanderson.com/optimal_characters_per_line

Christian, Baymard Institute November 20, 2011 Reply to this comment

Hi Mike,
That is a really great post, and an even better blog design.

波希米亚 December 1, 2011 Reply to this comment

Hi Christian,
Your post is so great. I have translated your article into Chinese for more people who is interested in readability. Based on your article, I added some of my finding, which makes chinese characters to display more friendly.

Here is the url: http://blog.b3inside.com/userexperience/line-length-readability/

Torkil December 13, 2011 Reply to this comment

Fluid (responsive) layouts can indeed work with strict rules too. As you say yourselves, you recommend staying within a certain interval when it comes to characters pr line. Media queries will allow you to both change your layout and your type at the interval’s boundaries, so it can most definitely be done :)

Bricolage December 21, 2011 Reply to this comment

Thank you for this report.

Is it the same for other languages like French?

Tim January 26, 2012 Reply to this comment

There’s a limit to how far across a pair of human eyes can comfortably read, ie scan horizontally. Like all top predators in the animal kingdom (ones that use eyes for hunting), our central vision is very sharp but it’s pretty limited. It’s basically the distance between the centre of our pupils or about 3 inches. The ideal line length 2-3 times that. It’s better to think in terms of absolute distance instead of character length because the latter can vary.

Trent October 15, 2012 Reply to this comment

I personally despise pixel based fixed layouts. The DO NOT work on small pixel-dense or large low resolution displays. my preferred method is to use max-width in em, base font size in pt and larger/smaller sizes in em.

.article { max-width: 50em; font-size: 12pt; }

works for me, allows liquid-resizing when required, and does not force your expectation of their screen size or viewing distance on the user.

Ronan November 30, 2012 Reply to this comment

It is interesting that since this article was written, your layout has become fluid. And retained both its readability and style. Good stuff guys.

nitpicky December 21, 2012 Reply to this comment

“Here at baymard.com we use Arial in size 17 for our articles”

Actually, that’s not true today 21-Dec-2012 – the font family you use is actually “ff-tisa-web-pro”,​Georgia,​serif", not Arial.

Mark November 1, 2013 Reply to this comment

Hello, I was counting the length of the lines on my website. I already knew it was way too long, I felt it. haha. Anyway I am resizing it, should I also count the spaces or just the characters?

Marion Seltzer January 13, 2014 Reply to this comment

Thank you. This is just what I was looking for.

Post a comment!

Close overlay