The Design Canopy

Typography. Typography. Typography.

Typography

Moving past the banal title, a higher level of design can be achieved if the typography in your designs is addressed. What I’m presenting in this post is a few CSS tips for improving typography, ways to use CSS to adhere to typography principles and several links to resources that have helped me. So think of it as an acute tutorial for stepping in the right direction towards better typography.

Breathing Room

We’ll use a paragraph of text as an example to demonstrate a few simple techniques for improving typography. For sake of example, let’s say that the markup in Figure 1 and the CSS in Figure 2 produce the block of text in Figure 3.

The default version (Figure 3) is functional when it comes to readability, but not optimal. Our task will be to increase the leading and to optimize the measure for maximum readability.

Now, if you’re like me before reading Mark Boulton’s great articles on typography (links included at the end of this post), you won’t know the definition for the terms “measure” or “leading”. Basically, the measure is the width of the block of text, and leading is the space between lines of text. In CSS, leading is controlled by the line-height property, and the measure by a variety of different properties depending on the context of the element being styled.

The first step we’ll take to improve the typography in our example paragraph is to increase the leading. In Figure 4 the line-height property is added to the CSS to produce the results seen in Figure 5.

With this simple property added to the CSS, the block of text is much more readable. The next change we’ll make isn’t a matter of advanced CSS but more typographical principle.

The width of the text block is about as wide as I would go for the size of the example font, maybe even a little too wide. So we’ll reduce the measure by adding more padding to the right and see if the results are more favorable than the current condition. There’s no fancy CSS here, just increasing the padding property (Figure 6) which produces the results seen in Figure 7.

I like the look of the paragraph in Figure 7 better than Figure 5, but we’re beginning to get into the more abstract realm of personal opinion and away from established principles. Although, if the paragraph in Figure 5 were twice as wide, then clearly we would have a problem. That would be too wide and the eye would tire from having to follow a single line for that amount of length. As a general rule (that I learned from Mark Boulton’s articles) I like to keep the number of characters on a single line in a range of 52 to 78 characters (including spaces).

Finally, CSS allows us to do some neat things with our test paragraph. For example, you can add the pseudo-selector :first-line to an element to style the first line of the text differently from the rest of the paragraph. In this example we will transform the first line of our paragraph to uppercase (see Figures 8 and 9).

This adds a touch of professionalism to your design, and will probably earn you a “nice work” from the client! However, make sure you use your advanced CSS skills wisely within the context of your content.

Discovery

As you experiment with typography you will begin to develop your own best-practices. Your knowledge base grows and you become more proficient. For example, while designing this site and choosing Georgia for the body copy, I found that when sizing with pixels, even numbers looked better than odd numbers. Compare the different sizes in Figure 10 and see if you agree.

Resources

Not to leave you empty-handed, I’ve ended this post with links to the “Five Simple Steps to Better Typography” series that has helped me immensely and one invaluable CSS resource in case you have not been using it.

CSS
A quick, easy and effective way to learn (and refresh your memory) the properties of CSS.

• WestCiv’s Complete CSS Guide

Typography Principles
Mark Boulton’s five simple steps to better typography.

• Part 1: Measuring the measure
• Part 2: Hanging punctuation
• Part 3: Ligatures
• Part 4: Typographic Hierarchy - size
• Part 5: Typographic Hierarchy - weight