Home Tutorials Web Typography: Line Spacing

Web Typography: Line Spacing

Author

Date

Updated on

Category

In my last tutorial, I explained some of the reasons behind the use of various line lengths, known as a column’s measure. I mentioned that a column’s line-spacing, or leading, plays a significant part in the choice of a line’s length. Line-spacing plays an important part in a lot of things typographically, as I’ll explain.

The first thing we have to recognize about line-spacing is that there is no one perfect setting. Each circumstance calls for a different use, so the trick is to find the basic principles involved.

So what is line-spacing to begin with?

Line-spacing, also known as leading, is the white space between each line of type in a paragraph. Adding or subtracting from this white space greatly effects the readability of the text, and being able to set it properly is essential to the readability of the design.

In CSS terms, line-spacing is known as the the

line-height

property.

  • style=”line-height:normal;”
  • style=”line-height:1;”
  • style=”line-height:1em;”
  • style=”line-height:100%;”

The line-height property value can be set in a number of ways as follows:

  • style=”line-height:normal;”

    This will set the text to the default setting, if, for instance, you specified a strange line-height somewhere in the cascade above it.

  • style=”line-height:2;”

    You can specify a number to act as a multiplier. This number is multiplied by the font size to determine the line-height. For example: if your font size is 12px, 12px times 2 equals 24px.

  • style=”line-height:1em;”
    style=”line-height:1pt;”

    You can use standard measurements to set the line-height value:

    • mm

      (millimeters)

    • cm

      (centimeters)

    • inch

      (inches)

    • em

      (ems)

    • pc

      (picas)

    • px

      (pixels)

    • pt

      (points)

    (In particular, if you’re creating a scalable design, the use of

    ems

    can help prevent it from breaking if the size is changed by the user.)

  • style=”line-height:1%;”

    Finally, you can use a percentage of the typesize, including the % sign, as the value for line-height. For example, if your text is 10pt and you set the percentage to 120%, the line-height will then be 12pt. The default line-height setting is typically this amount, unless specified otherwise.

The default line-height setting does not always equate to being the ideal line-spacing, so as a designer it is your duty to specify the correct one. How do you determine that?

The longer the line, the greater the line-spacing needs to be

Remember, we read left to right. Readability is enhanced if we leave an easily discernible trail for the eye to follow. Adequate line-spacing helps the eye to travel along the text smoothly, without hesitation or thought.

Using images from the previous lesson on column widths, we can clearly see that the second well-spaced example is much easier to read because the line-spacing is more appropriate for the line’s length.

line-spacing-smallline-spacing-larger

Shorter column widths allow you to use tighter line-spacing than you can, or should, use on larger column sizes.

The x-height of the type specified affects the line-spacing

A typeface’s or font’s x-height is the ratio of the lower case letters to the upper case letters. This effects the perceived size of the typeface. Two typefaces, or fonts, can have different x-height ratios, making one appear larger than the other, even if both are set to the same point size.

Notice how Helvetica, on the left, has a larger x-height ratio than Times New Roman, on the right:

line height

 

The Times New Roman font thus appears to have more line-spacing, when in fact both typefaces are set at the exact same type size and the same line-spacing.

This means that a typeface with a small x-height can use less line-spacing because of the additional white space that is built into the font. Larger x-heights, however, require greater line-space to make the perceived white space adequately readable.

There is no one correct way to determine the proper line-spacing to use in a particular setting. The best bet is to use the greatest tool available to you, in designer-speak known as the “Mark 1 Eyeball.” Use your eye, and if it looks too tight, then it is. If it looks too loose, tighten her up a bit. Whether out of ignorance or out of laziness, too often designers fall back upon the default settings. If your determination is to create a design that is both useful and beautiful, then make sure to adjust your line-spacing appropriately.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments