Design App To Arange Words In Differnt Sixe And Lines

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

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 93 major e-commerce sites ranked by e-commerce UX performance
Page Designs · navigate 8,400+ manually annotated full-page screenshots categorized by page type

Products & Services:

Baymard Premium · full access to all 582 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)