The Encyclopedia of Typographic Contrast

Typography is an essential part of web design, and something I know that I could do a better job with. So, I figured I would start to assembly a mini-encyclopedia on some of the elements you can use to create contrast. One of the main complaints I always here is that text is boring, but it doesn’t have to be with the proper contrast. Here’s the how-to on sprucing text up and building an interesting, text-centric design.

1. Caps

Use all capitalization to increase the emphasis on the heading. You can also use small-caps to develop the presentation of sub-heading and subheadings.

You want to avoid making long sentences that are all capitalized because it substantially reduces readability. Therefore, keep capitalization for headings and away from the body.

2. Style and Decoration

Don’t use underlining for any text that is not a link, instead, use italics.

Style combines nicely with other features, such as size, color, and weight, to create deeply textured text (that is, text with multiple effects that are different than the preceeding text)

3. Emphasize with bolding

But, don’t make everything bold. My suggestion (though I don’t always do this) is to bold the text in the heading, but to italicize text in the body.

4. Size

Sizing is the main technique used to highlight and emphasize important text. Generally, designers use large text to emphasize headings, logos, and slogans. While you can use large font to emphasize text, you can also use small font deemphasize and minimize content.

Generally, headers and logo text should be larger than body text, and non-essential text like meta data for blog posts should be smaller than the body text.

5. Direction

Turning a word sideways can create a dramatic effect. It reorients the horizontal presentation of a stream of text, and adds dynamic contrast in much the same way an image would.

6. Typeface

Generally, you can only use serifs or sans serifs on the web in order to ensure the font displays correctly on a diversity of browsers and operating systems. Of course, you can get around that limitation by using CSS Image Replacement. To do that, create the text in Photoshop, and create a heading — let’s say an h1. Set the background of the h1 to the image of the text you created, and move the plain text all the way off screen to the left so that it isn’t displayed.

The best way to use typeface for alternation and variation is to use a serif for the heading text and a sans-serif for the body text, or vice versa.

7. Color

You can use colors to emphasize and deemphasize font much in the way that you use size. The benefit of using color, though, is that color preserves and conserves space in a way that 64-point font does not. Further, you can combine size and color to further deemphasize text.

Create emphasis with a brighter color.

8. Spacing

Spacing plays an essential role in typographic contrast because it dictates the usage of space on the design. Modify and vary the tracking, kerning, and leading of text in the headings so that they are different than that of the body text. For the body text, set an appropriate line height and spacing in between paragraphs.

9. Alignment

Depending on the style and content of the design, you may want to vary the extent of ragged edges on font. Font that is justified or hyphenation looks smoother and is generally much more readable than text that is ragged. Yet, ragged text could work for large text paragraphs used for stylish effect in ragged designs. For body paragraphs, I prefer a smooth edge because ragged edges are hard to read.

It would be much easier to read through the placeholder text if it was hyphenated or justified.