Type Effects in Web Design: It’s All About Moderation

Some type effects are so common that we may not even notice them in design. Bolding and italics, for example, have dedicated keyboard shortcuts in most all editing software. Many font families also include many variations of the same typeface with multiple widths and slant options.

So what do you choose? Where do you draw the line when it comes to good versus poor typography? Simply, keep it simple. Limit yourself to two or three typefaces on your site. Then limit yourself some more and try to avoid using more than three additional type variances. The toughest decision you will be left with is which effect(s) to use.

Bold and Italics

Bold and italics are the most common type modifications. Even with fonts where the family does not include bold or italic options, most computer software allows for bolding and italics. These options are also built into the framework of HTML with “strong” or “b” for bolding and “em” or “i” for italics. Note that strong and em (emphasized) tags don’t exactly mean bold and italics; most browsers just render them that way.

If your font family includes bold or italic variations, you may like the look of these options better than the default computer or HTML settings. These variations sometimes have small detailed changes that only register when making a “font change”.

Effective uses: Both, bold and italics are most effective when used sparingly. Each of these effects cues in a reader that a word or phrase has added importance and both are commonly used for breakout text. Bold letters can add extra emphasis and pop when text is used as an art element as well. Thicker strokes can equal added emphasis and weight. Serif-font italics are sometimes associated with femininity because the slant and extra detailing in the letters has a more elaborate and decorative feel, while sans serif italics have more masculine sub-contexts.

Distracting uses: Large blocks of bold or italic type can be difficult to read. Most type specifications, such as leading, kerning and set width, are not designed for letters with wider strokes or slant. This can make lines feel tighter and more squeezed, greatly affecting readability.

Strikethrough and Underlines

Using strikethrough and underlining are two of the trickiest type options. Underlining is commonly associated with links and strikethrough is difficult to read. That being said each effect can have a place in some design projects.

Underlining and strikethrough also have HTML tags: “u” for underlining and “strike” for strikethrough.

Effective uses: Strikethrough is an effective tool for commonly updated text. Many sites use strikethrough to note items that are no longer valid or that have expired without removing posts or text from the site. Using strikethrough is a great device here because it keeps you from removing a post that someone has already seen; this can add to the credibility of a site that specializes in providing information or news.

Within a block of text underlining can also be used to add emphasis in the same way bolding and italics are used. Its use though can be confusing because of the common association with linking and is best used for large letters such as in logos or artistic elements. Try using underlining on text you want to emphasize that includes a link.

Distracting uses: Strikethrough only really works when used sparingly. Use it too often and your text has a feeling of irrelevance. Underlining in large blocks of text will lead to confusion because of the effect’s connection to hyperlinks. Use another effect for emphasis. Both effects add visual depth to the vertical spacing of text and will make it appear tighter, which affects overall readability.

Strokes and Shadows

Adding strokes (or text outlines) or shadows to text can be tricky. Text outlines can work beautifully for big words or art elements, but fall flat fast at small sizes. The same is true of shadows. Both effects are best used to create art from text and not for text that needs to be read. Commonly these effects are used together for maximum impact.

Depending on use, a stroke or shadow can add weight or even remove it. Strokes added to colored letters appear thicker and heavier; the thicker the stroke the heavier the context. Using a stroke to outlines letters that are clear or white adds a sense of lightness and allows text to almost fall into the background. Dark, solid and sharp-edged shadows add heaviness and weight to letters. Lighter, softer shadows will almost lift text off the background, using a cloud-like effect.

Effective uses: Strokes and shadows work great for logos and art elements. While strokes are harder to use in small spaces, shadows can be added to text for emphasis. This site, for example, uses a drop shadow on each of the headlines and section headers. Because the effect is used on only a few words and typically not in multiple lines of text, the effect creates a clean, definable style.

Distracting uses: Any use of stroke or shadow effects in mass quantity can be overwhelming. Be very careful when setting the size of a stroke or shadow. Because each effect adds mass to letters takes away from the designed strokes with added width. Too wide of a stroke or shadow can cause letters to lose their shape or bleed together, making letters indistinguishable or difficult to read.

Tilting, Twisting and Distortions

There are an almost unlimited number of other effects that can be applied to text as you create a design. Titling, twisting and distortions are all tools that can be used to manipulate text (think back to some of the “word warp” modifications you made when you first learned about the feature in Microsoft Word as a child). The key to these changes is understanding that just because you can do it, does not always mean you should. All of these effects should be used in moderation and only as artistic elements because these effects dramatically impact the readability of text.

Effective uses: Use dramatic modifications to create logos, entry pages or art elements.

Distracting uses: Avoid dramatic modifications for blocks of text or in situations where reading every word on the page is important.

Analysis

Many designers will tell you it is typographic sin to alter a font in any way. It is, after all, a unique design in itself. That’s a pretty rigid philosophy. And one I do not wholly subscribe to.

In blocks of text and in basic design, leave fonts alone. Choose a typeface that fits your needs and use it well. Let the letterforms work for you. Using a font without extras can be more readable and works best when massive amount of copy is involved.

When creating more elaborate design projects, work with type and effects to create visually stunning work. Modifications and alterations to typefaces can work brilliantly when used in more artistic or creative elements on your site. Logos, the image on your landing page or even some detailing can benefit from creating text with additional pop. Experiment with combining multiple effects for a special visual, such as the text distortion and shadow effect used by Planet Propaganda.

Any effect can work when executed well, but just as easily an effect can be disastrous. Understand your own strengths and weaknesses when playing with type effects. When in doubt, keep it simple and stick to bolding and italics for emphasis. Remember to limit effects in the overall design. Text effects are used to create emphasis and impact. They are most effective when there is no competition from other dramatically-styled text.

Image Credits: Typography by tarale