Readability: the Optimal Line Length

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 wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.
  • Too narrow – 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 readers, 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 your text 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 by restricting the width of your text blocks 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 entirely 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.

Article update, June 2014: With the advent of media queries, semi-fluid layouts are now possible and can give you the best of both worlds: a fluid layout that adapts to the reader’s screen, while still retaining sufficient control over the width of text blocks to ensure optimal line lengths.

Here at we use Minion Pro in size 20 for our articles. With a 560-pixel wide article container, we end up with about 72 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.

Post a comment or Share:

User experience research, delivered twice a month

Join 17,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Image by m4tik

Related articles

All Research Topics

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, 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.


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 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.

John Newman September 14, 2016 Reply to this comment

I’m going even further. 240/16 = 15. I call it Even Better Web Readability Project.

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. (

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 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!

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

Mary S May 25, 2016 Reply to this comment

Agreed, the leading is too tall and it’s not my browsers. Undercuts the credibility of the article for me.

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


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:

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:

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 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.

David Suriano June 27, 2014 Reply to this comment

I know this is an old post, but fixed width is not necessary. Javascript to the rescue:

Perks of the modern, flexible web.

Koffetar November 29, 2014 Reply to this comment

Or better, one can use viewport sized typography:

@YD_esign July 2, 2014 Reply to this comment

Would you say that this can be also applied to books and printed magazines as well? So far they have done pretty great with very various line lenghts… :)

Fiki Firmansyah March 10, 2015 Reply to this comment

Hey thanks, Im using 600px width with 16px fonts, its nicely readable. :) and fixed width is a bad idea because people going to mobile (responsive). just my opinion.

Jenna Haze September 8, 2015 Reply to this comment

50 to 60 characters including spaces at times seems too less when it comes to give give a heading that includes complex things in it.
Also typography is an important issue to deal with. Thanks for the info though !

sherwood botsford December 30, 2016 Reply to this comment

A year ago I redid my CSS and spaced everything in rem. My default for tablet and up is 35 rem. This works out to 10-12 words per line or 50 to 60 characters.

On a wide display it makes for wide margins.

My photos, however are floated almost to the margin. They are sized by width of the content div, so a photo is stuffed into a <div class="pic3r"> which is styled at 30% float right. This will usually mean that there will be a column section with fewer than 60 characters per line. I try to avoid photos close enough together that there is a section with pix on both sides. Makes for too narrow a column.

When I made this change, and also increased my font size by 20% and by leading by 10% my time on site jumped by a factor of 3.

Alex June 14, 2017 Reply to this comment

How to set the width or line length at only 60-80 character per line?(7-9 letters per line)
I have been trying to break the line in a way people can read easily without squeezing their eyes.

Charlie August 25, 2017 Reply to this comment

I’m fine with narrow width only when the article I’m trying to read is short, like this one. If the article is really long, then it becomes a hassle to continuously scroll many times as I’m reading the article. In that case, I prefer much wider pages.

Larry Azevedo August 26, 2017 Reply to this comment

I’m surprised there is no mention of using the CSS ch (character) unit. A common use case could look something like:

min-width: 50ch;
max-width: 75ch

The ch unit is widely supported:

David Goldberg December 10, 2017 Reply to this comment

Two other problems, and they exist in your message. For readability, do not use fonts with serifs. And for the love of God use black type, not medium gray. The old rule, still true, is that form should follow function. You want your customers to be able to actually READ your message and do so with ease.

Post a comment!

Close overlay