To make web content work, text on a page must be readable for all visitors. Following a few basic rules will ensure that your text is as legible as possible:

It’s your duty to resist pressure from clients to fill the page with content. More text tends to create a crowded design, forcing font sizes to become smaller to compensate and overwhelming the casual visitor. Writing for the web is a skill that drives content in the opposite direction: making body copy as concise as possible.

The number of characters per line of body text (the CPL or measure) should fall below 100 characters: 80 – 95 characters per line is ideal. In most cases, text size should be based on this requirement: i.e. fonts should be scaled up or down, or the width of containers adjusted, until you have roughly 95 characters per line. Most sidebar text should be set to approximately 35 characters per line. These settings will need to change as screen sizes narrow, using the principles of responsive design.

Generally speaking, readers want text to be larger than most designers are comfortable with. As a designer, you are looking at the content of a page every day; after a period of time, you will stop “seeing” it, and assume that everyone reads the text as instinctively as you do. It’s generally a good rule to size text slightly larger than you think it needs to be.

Leading is as important as font size for legibility. The vertical space between lines of text should be adjusted to optimize the readability of text.

To this end, there are a few practical measures to take when writing the CSS for a site to create conditions of optimal legibility:

1. Set a base size for text in your CSS.

   1. The lazy, long, works-with-IE8-and-lower method starts your stylesheet with the following declaration:

      body {
      	font-size: 62.5%;
      }

      This “mini-reset” sets 1em = 10px, allowing you to easily convert between the two units. Typically, you would follow this with declarations for text elements:

      p, li {
      	font-size: 1.6em;
      }

      There are two disadvantages to this approach. First, you have to size every text element in your stylesheet, including paragraphs, headings, and list items, as the base size of 10px / 1em is far too small. Second, em units “cascade up”, meaning that certain combinations of elements, such as nested lists, will render larger than expected on screen. These can all be compensated for, but I prefer an alternative approach:

   2. The better, faster, method that works with all modern browsers, including IE9+, starts with the following:

      html {
      	font-size: 62.5%;
      }
      body {
      	font-size: 1.6rem;
      }

      Now every text element is set to a default size of 1.6rem (rem = root em unit). This becomes the baseline for all text, and the basis for a grid system. After these style rules, you only have to provide sizes in your CSS for elements that are different from the base size, such as headings. Weird text cascade effects are also avoided.

2. Set a line-height that optimizes legibility. This is often a “by eye” judgment, as leading will change depending on the style and weight of the font. Multiplying the base size by the golden ratio can be a good place to start:

   html {
   	font-size: 62.5%;
   } 
   body {
   	font-size: 1.6rem;
   	line-height: 2.56rem;
   }

3. Turn on auto-ligatures and kerning pairs

   html { 
   	font-size: 62.5%;
   } 
   body {
   	font-size: 1.6rem;
   	line-height: 2.56rem;
   	text-rendering: optimizeLegibility;
   }

   Read an in-depth explanation of automatic ligatures and kerning pairs with CSS.

   Size containers to allow text to be read easily

   As an example:

   * {
   	box-sizing: border-box;
   }
   p {
   	margin: 3.2rem 0;
   }
   article {
   	width: 150rem;
   	padding: 3rem;
   }

   Together with the CSS above, the <article> element will allow approximately 92 characters per line.

There are many more aspects to text legibility on the web, including color and typeface selection, but following these basic rules and practices should avoid most calamitous issues.

Banner image by arnoKath, licensed under Creative Commons and used with permission.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.