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 baymard.com 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.
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Image by m4tik
Related Articles
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 123 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 9,200+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 619 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
Premium Research
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Audit Service
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
Joshua LayNovember 1, 2010
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 InstituteNovember 1, 2010
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.
CareActiveAugust 28, 2019
I agree with you Lay. As better visibility leads directly to the better usability.
LeonNovember 2, 2010
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 InstituteNovember 2, 2010
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 HudsonNovember 3, 2010
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 InstituteNovember 4, 2010
Yes great point. Inter-line spacing is definitely closely tied with line length, we might take it up in a future article.
John NunemakerNovember 3, 2010
Completely agree. I talked about this a while back:
http://orderedlist.com/our-writing/blog/articles/scannability-equals-profit/
KarenNovember 3, 2010
Great post! It’s very important to keep your audience engaged especially when there’s pertinent information you need to share.
Jose GranadoNovember 4, 2010
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 InstituteNovember 4, 2010
Glad you could use it.
Vladimir CarrerNovember 4, 2010
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 InstituteNovember 4, 2010
A fine initiative, many sites will surely benefit from that project. Great to see that we each came to the same ratio.
John NewmanSeptember 14, 2016
I’m going even further. 240/16 = 15. I call it Even Better Web Readability Project.
Maria MalidakiNovember 4, 2010
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 InstituteNovember 4, 2010
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 JarrettNovember 4, 2010
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.
goreNovember 5, 2010
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.
MissyNovember 22, 2010
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 StarrJanuary 1, 2011
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!
JohnJanuary 1, 2011
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)
DRossJanuary 2, 2011
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.
SergioJanuary 2, 2011
Really, really, really interesting post and blog. Congrats from Spain.
Charles RoperJanuary 21, 2011
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 InstituteFebruary 13, 2011
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!
JustinMay 22, 2011
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 SMay 25, 2016
Agreed, the leading is too tall and it’s not my browsers. Undercuts the credibility of the article for me.
Badmonkey BotanicalsSeptember 21, 2011
Sounds like you need to alter your browser font settings. It looks fine to me.
MichWalkdenNovember 1, 2011
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 AndersonNovember 15, 2011
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 InstituteNovember 20, 2011
Hi Mike,
That is a really great post, and an even better blog design.
波希米亚December 1, 2011
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/
TorkilDecember 13, 2011
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 :)
BricolageDecember 21, 2011
Thank you for this report.
Is it the same for other languages like French?
TimJanuary 26, 2012
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.
TrentOctober 15, 2012
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.
RonanNovember 30, 2012
It is interesting that since this article was written, your layout has become fluid. And retained both its readability and style. Good stuff guys.
nitpickyDecember 21, 2012
“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
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 SeltzerJanuary 13, 2014
Thank you. This is just what I was looking for.
David SurianoJune 26, 2014
I know this is an old post, but fixed width is not necessary. Javascript to the rescue: http://simplefocus.com/flowtype/
Perks of the modern, flexible web.
KoffetarNovember 29, 2014
Or better, one can use viewport sized typography: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
@YD_esignJuly 2, 2014
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 FirmansyahMarch 10, 2015
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 HazeSeptember 8, 2015
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 botsfordDecember 29, 2016
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.</div>
AlexJune 14, 2017
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.
AlexAugust 22, 2020
Just in case anybody comes across this today, set a max-width on your elements that contain your text.
Example:
.content {
<p class="content"> blah blah…. </p>max-width: 600px;
}
CharlieAugust 25, 2017
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 AzevedoAugust 26, 2017
I’m surprised there is no mention of using the CSS ch (character) unit. A common use case could look something like:
article{
min-width: 50ch;
max-width: 75ch
}
The ch unit is widely supported: https://caniuse.com/#search=ch
David GoldbergDecember 10, 2017
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.
Stephen DavisApril 2, 2018
Is 75 characters per line with, or without, spaces? Many thanks.
paymentsJune 25, 2019
Without.
I use 58-65 characters per line without spaces with 1.5 line-height.
AliceAugust 25, 2019
Personally, I find websites with a narrow band of text and wide spacing to be very unreadable. Every time I scroll, it breaks my concentration on what I am reading. Particularly when a website has no way to navigate within what I am reading all the scrolling results in me losing track of what I am trying to find.
EdwardDecember 12, 2019
Interesting, because I find this article too narrow, and the font too large.
Shveta uppalJanuary 23, 2020
I work in the textbook making. To maintain uniformity in our books, in our house style, we have categorised different sizes of books, hence different text areas and fonts.
From primary classes, bigger books with bigger fonts.
As a rule, no line length is supposed to be more than 30pics and stretchable to 33pica. After that is a ‘no tolerance’ zone.
So, I just needed to know, would the 60 character no be effected by the font face and size?
Sophia ExintarisFebruary 10, 2021
You can actually set line length or width in CSS in number of characters. Specifically, in “ch” units, where ch corresponds to the width of the zero character in the chosen font.
Setting a width of 65ch will give you the desired line length for your copy. Just test it with various font sizes to check it doesn’t look silly on the various screens it will be consumed on.