Don’t Overlook the Importance of Text Width

We all love our bright and beautiful wide screens on our monitors, laptops, and even mobile devices, but they have created a new problem for communicators: text width. You can write the most expertly crafted content and ruin it if you overlook the behavior of text as screen size grows. Your paragraphs may look nice on your screen, at your browser size, but what happens when the browser is maximized or what if your reader is using a screen larger than yours? It can stretch out and become unreadable. Too many words per line can cause reader fatigue and fatigued readers give up. This is not only a readability issue, it can be considered a usability issue. You can also consider this a responsive design issue. In other words, it is important, so let’s not overlook it.

This article discusses text width, gives some advice on general style techniques, and shows how you can control text width in Doc-To-Help 2014 v1.

Live Comparison

Let’s start by looking at a simple comparison. There are two online Help systems linked and pictured below. Either visit the links and view them full screen or just look at the screen shots. The first has no constraint on text width. The second is constrained to 600 pixels. Which one do you think is more readable?

NetHelp with Full-Width Text

Visit the live sample.

NetHelp with full width text.

NetHelp with full width text.

NetHelp with Text Constrained to 600 Pixels

Visit the live sample.

NetHelp with text width constrained to 600 pixels.

NetHelp with text width constrained to 600 pixels.

Seems simple, but the difference is significant.

Layout Principles

It helps to see the technical thinking behind the concept. Go to Google and search something like “Optimal text width for the web” or “best line width for text” and you will see a collection of articles that repeat the sample two rules, which are backed by print layout standards.

  • About 50 to 75 words per line.
  • About 100 characters per line.

Studies show that anything beyond the above causes reader fatigue and, as I said at the beginning, that causes people to stop reading.

There are problems with these rules, though. There isn’t a style setting for word and character count and optimal line length depends on things like font size and the layout of the rest of the page.

The easy way to apply these principles to online content is to use a pixel width for your paragraphs. The rules above translate to roughly 600 pixels. This doesn’t mean you need to restrict the width of your entire site to 600 pixels, just text paragraphs. Images and tables can even go beyond that length. You just want to keep the reader engaged with the text.

By the way, modern Web design principles dictate that websites should be viewable at a 960 pixel total width. This ensures that they will look nice on small screens. That fits nicely with our text width rule. That gives you 360 pixels for other elements such as sidebars.

Applying the Principle to CSS

I have convinced you to constrain your text, now I should tell you how. The good news is that it is really easy. You just need to use the CSS width attribute in the tags you use to markup text — typically <p>, <span>, or <div> — like so:

p {
     width: 600px;
}

It is that easy. Of course, I have generalized it. The width attribute will probably be one of many, you may want to use it in a special calls, or you may prefer to apply it to a specific class, but you get the idea.

Setting Text Width in Doc-To-Help

Starting in version 2014 v1, Doc-To-Help’s Theme Designer has a text width setting. All you need to do is enter your desired width and Doc-To-Help will change the style sheet for you. Quick instructions follow. Remember, to change theme settings you need to create a new Theme. Doc-To-Help requires this in order to preserve the base themes.

Start by dropping down the Theme list on the Home tab of the ribbon and select your theme.

Opening the Theme Designer

Opening the Theme Designer

When the Theme Designer opens, you should see Text Width as the third setting under Topic settings. Enter your pixel width there and Doc-To-Help will do the rest.

Setting Text Width

Setting Text Width

As always, feel free to comment if you have questions.

This entry was posted in Doc-To-Help and tagged , , on by .

About Dan Beall

Dan is a 15-year veteran of the software industry with experience including from web development, technical writing, marketing, and product management. Since 2003, he has worked on the Doc-To-Help team as a product manager. Most recently, he has used his experience to put Doc-To-Help on the path to be the go-to tool for web content delivery in the technical communication and administration industries. Today, Dan is responsible for the general marketing and position of ComponentOne’s entire portfolio of products.

Leave a Reply