web typography study guide

Line Length

Line length, or measure, is an important factor that influences both aesthetics and readability. A line length that is too short causes the eye to jump too frequently from one line to the next. If it is too long, it causes the reader’s eye to double back.

tip  An ideal line length is based on the font-size. Robert Bringhurst suggests in The Elements of Typographic Style a line length of 45 to 75 characters.

Line length also affects Line-height. The general rule is -

  • The longer the line length, the taller the line-height should be.
  • The shorter the line length, the shorter the line-height should be.

Some designers use a points-times-two rule. Double the font-size to get the proper line length in picas. For example, if the font height is 11 points, then the line length is 22 picas or about 3.5".

The challenge of setting up line length on the web is how to establish a value that stays within the optimal range no matter what default font-size the user has set in their browser.

The width of a website layout can be either fixed (an absolute number) or flexible (a percentage). With fixed-width layout, the column width could be set based on the size of the font. If the font-size is set to 14 to 16 pixels, then the text column could be set  between 365 and 420 pixels wide. The challenge of flexible layout, however, is that the column width changes with the varying width of the browser window.

One solution is to set column width using the unit of em.

    In CSS, an em is a relative measure of length that inherits size information from parent elements.

If the parent element is body, then the size of the element is determined by the user's browser font settings. So using em as the unit to define text box width can ensure that the width always relates to the browser font-size.