3 Text Spacing Principles Every Designer Needs to Know

Many typographic decisions are based on spacing. This is something that has always been true with printed type, and became applicable to web type with the advent of CSS. Regardless of whether we’re talking about using type for print or for the Web, there are two directions in which we can control spacing — horizontally, and vertically.

Horizontal Spacing

Kerning and tracking are two terms you’ll often hear in conversations about horizontal letter spacing. Kerning is the process of adjusting the space between individual letters. Often when you’re working with type, you’ll notice pairs of letters that appear too close together or too far apart. Most fonts have a set of rules that determine the spacing between specific characters. The kerning between the letters “Wa,” for instance, should be — and is — much tighter than the kerning between “WV.” Most of the time, the rules for the font are sufficient to make the text readable. If not, you can adjust the individual letter pairs within your image creation software of choice.

Kerning examples -- notice the spacing differences

For the text in a web page, it’s impossible to make letter-by-letter kerning adjustments. What you can do is adjust the letter-spacing CSS property, which is known in the print world as adjusting the font’s tracking. Like kerning, tracking adjusts the horizontal spacing between letterforms, but applies to the space between each letter. If you want your text to have a more open, airy feel, try adding a pixel or two to the tracking value. Figure 4.9 shows an example of the effect of spacing. The text in a web page is normally fairly tight, as you can see in Figure 4.9, so assigning a negative value here would probably reduce your text’s legibility.

Another horizontal spacing option in CSS is provided by the word-spacing property. This property can take a positive or negative length, or the keyword normal. As you might expect, this property affects the amount of whitespace between words.

Letter spacing example

Vertical Spacing

In print design language, the vertical space between lines of text is known as leading (pronounced to rhyme with “bedding”). This term comes from the early days of letterpress when blank strips of lead were used to separate lines of metal type. When there were no added spacers, the lines were said to be set “solid.” Text with added vertical space is much easier to read, but as you can see in the first paragraph in Figure 4.10, the default spacing between lines of text is very small. In the second paragraph in Figure 4.10, we’ve adjusted the CSS line-height property:

line-height: 1.5em;

An em is a CSS unit that measures the size of a font, from the top of a font’s cap height to the bottom of its lowest descender. Originally, the em was equal to the width of the capital letter M, which is where its name originated.

Leading example

Text Alignment

Have you ever noticed that the text you see in books and magazines is often aligned along both the left- and right-hand sides of the page or column? This type of text alignment is known as justification. When text is justified, the letter and word spacing is automatically adjusted so that each full line of text has a word or letter that lines up against the left and right edges of the text area. Many print designers will use justified text for any text block that’s over two lines long and isn’t too narrow. You can take this same text treatment to the Web with CSS by setting the text-alignment property to justify. Before you go and justify the whole Internet, though, let me give you two warnings about justified text:

A river runs through it.

Occasionally, a gap created by wider spacing in one justified row will line up with a gap in the next row, and the next, and the next … and you end up with a canyon or river in your type, as shown in Figure 4.11. This can be distracting for the reader. Print designers can makes adjustments to fix this sort of thing, but on the Web, it’s difficult to predict and impossible to fix.

What? Are? You? Saying?

The river problem gets even worse with narrow columns. Words will often get isolated against the left and right margin or stretched over the entire width of the column. Most word processing programs fix this problem by hyphenating words where necessary. Browsers cannot do this kind of auto-hyphenation, so web designers should avoid using justified text in narrow spaces.

Justification problems -- can you spot the three other rivers present in this lorem ipsum text?

If you don’t want to change the text-alignment of your text to justify, your other options are left, right, or center. When text is centered or aligned along the left or right edge of the page or column, the spacing between the characters and words remains constant. The river problem can occur with any text block, but it’s much less likely to cause legibility issues in text that’s centered, or justified on one side only.

If you want to see how some HTML text will look with different leading, tracking, and alignment settings applied, a great tool to check out is Marko Dugonji’s Typetester.

Typetester gives you an interface to which you can apply any conceivable text options to three columns of text; you can then compare the displays side by side. Once you have some settings you like, you can click on the Tools tab to obtain the CSS that creates the effect.

What text spacing tips do you use to sharpen up your designs? Share them in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/tjameswhite Tim White

    Two quick updates for you:
    1) for line-height use unitless measure (see Eric Meyer http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/)

    2) CSS3 does have a hyphen property which, when used with vendor prefixes, can automatically hyphenate words. It doesn’t work everywhere yet, but it certainly won’t hurt.

  • http://twitter.com/tjameswhite Tim White

    Two quick updates for you:
    1) for line-height use unitless measure (see Eric Meyer http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/)

    2) CSS3 does have a hyphen property which, when used with vendor prefixes, can automatically hyphenate words. It doesn’t work everywhere yet, but it certainly won’t hurt.

  • http://www.climaxmedia.com/ Climax Media

    Typetester is awesome. We use it often to test different alignments.

    • http://www.martialwebs.com Jen

      I agree, typetester is an awesome tool. 

  • http://twitter.com/MikeWoodsSGF Mike Woods

    Has anybody here tried using the phpHyphenator? What’s your opinion of this plugin?

  • http://www.think7.co.uk jason_voip

    Websites that read right look so much better. In fact, it’s really no different from press and print typography. Just a ‘case’ of getting it right.

  • http://www.printingray.com/sticker-printing.html vinyl stickers

    Thanks so much for providing individuals with remarkably
    pleasant possiblity to read from this site. It is often so lovely and as well ,
    stuffed with a good time for me and my office peers to visit the blog at a
    minimum thrice a week to read through the newest issues you have got. And of
    course, I am at all times satisfied with the awesome principles you serve.
    Selected 2 tips in this posting are essentially the very best we have had.

  • Bob Bill

    my ass is aflame with 9 black dicks.

    • Rayshan

      im black man #1

  • Eddie Shipman

    You should have a legend for your images. How am I supposed to know which one is Figure 4.9???

  • Dave Cruikshank

    Coming from a print background, justifying text almost always decreases readability. Newspapers do it wrong. If you want your site to look like a newspaper, justify text, if you want your type to be readable, embrace the jagged paragraph edge as a design element :).

  • http://gauravmishra.com/ Gaurav Mishra

    There is small correction in
    the property is text-align rather text-alignment.
    Please take care.
    Article is GOOD!
    Kerning is also put as adjusting the negative space?
    & thanks for the term – “river problem”

  • http://www.modred.co.uk Scott

    Do you think the person who created the FedEx logo got their kerning wrong by mistake?

  • http://www.printingray.com/sticker-printing.html custom stickers

    . Betty loves participating in
    internet research and it’s easy to understand why. Most people notice all about
    the compelling means you make practical guides via the website and in addition
    invigorate response from other individuals on that point so my girl is without
    question being taught so much. Have fun with the remaining portion of the New
    Year. You are always conducting a wonderful job.

  • http://www.e-nile.com SEO Egypt

    I think it is really important tips

  • Adam Yayati A.

    Hello Sir my name is ADAM YAYATI A.
    Sir I want to know How am i arrange the booklet title or any Brocher title for
    better look