UI/UX Principle 3: The text box size should make your content easy to read

One element in web design which is often overlooked is the text area width of your written content.

Text boxes that are too large can lead to a lower bounce rate and content being missed. This can have an impact on your overall user experience, and can also worsen your SEO ranking; meaning your site will appear lower in search results.

The most important thing is that your text box should be small enough to make it easy for readers to see, while also making sure the content is clear and legible.

The ideal width varies depending on the device, fonts, and layout. Smashing Magazine and Baymard Institute recommend line lengths between 45 and 85 characters. However, characters are not the only way of measuring text box width.

Although there are different views on the length of the line and the width of the text box, the bottom line is the text box width that allows the best readability on your website.

The text should not take up all of the horizontal space on a large screen

Fluid and responsive web design are important factors in the layout of text areas. This is particularly true for responsive design, and how it affects the horizontal and vertical real estate on your page. The width of a text box (which can be controlled by an invisible box or contained box limit width) directly affects the readability and useability of an experience.

High-end images may respond to different screen sizes and span across them completely, but the text doesn’t have to – and it shouldn’t if usability is being kept in mind.

The experience is being consumed on many different screen sizes and devices. We should consider the different screen sizes and devices when designing text boxes for responsive design. Reading text that is too large for a large monitor on a desktop is difficult.

Text boxes with substantive text should be 700 pixels in width

Many times, we mistakenly increase the size of text boxes. A text box that is more than 700 pixels (2.33in) wide is not as efficient for site design and reading. The text box should not exceed 700 pixels, no matter how large your browser is.

This is the same as measuring line length using the number of characters. The target is between 45 and 75 characters per line. It is just another unit of measure. It’s just another unit of measurement.

Medium – An online publishing platform that has over 30 million users per month, Medium blogs have a maximum width of 700 pixels. The minimum width of the text box is 350 pixels if you shrink your browser. Because users are trained to read books with shorter lines, blog text is usually only 700 pixels long.

Analyze the final results to find what is most easily readable

One commenter in a thread about typography on StackExchange offers a great rule-of-thumb: Test the column width yourself!

If you have to move your head or neck to read the text, it is probably too large. The ideal situation is for the reader to be able to scan each line by simply moving their eyes. It’s possible that different media/devices can be read at different distances. Different people may also prefer different reading distances.

Analyze what is most readable. This should be balanced with other important elements like succinct copy, engaging content, and a scrollable layout.

You may like to read UI/UX Principle Scrolling is Faster than Paging.