Add Impact to Type-driven Projects

When working with type-driven projects it is of utmost importance to create a distinct hierarchy in the design, while adding emphasis in all the right places. This sense of logical progression from one element to another on will help users better understand your website and navigation tools.

Creating hierarchy is about much more than size. While type appearing at larger point sizes will serve as a guide, it is not enough. The best type-heavy projects use a combination of fonts, sizes, weights and flair to create an effective overall design.

Size

Varying font sizes can create a sense of scale and hierarchy for most projects. Typically the size of words used for the main text on your site should decrease by text volume. In other words, headlines should be larger than subheads and subheads should be larger than the main text. (Note how size is used for the text on this website; it follows the formula.)

There is no set rule on the best sizes for text elements, but all should be readable. (Actual point sizes also relate to the fonts selected.) Use the eye test when experimenting with fonts. Does text feel too large or small? Blocks of text that are too large tend to look less professional than properly scaled typefaces. In most cases it is best to keep very large text to a minimum.

To create impact and drama, stick to one extra large or oversized bit of text. It can be a header, logo or even text used as an art element. Let this element stand alone; set aside logos and other text elements that are used as art when considering the size of letters for copy.

Fonts

The makeup of your font selections also affect how large (or small) type appears.

Typefaces with wide set widths – the horizontal space from the left side of a letter to the right – will appear larger than those with tighter set widths. (Note the typefaces above; each are the same point size but have dramatically different set widths.) Font variations with very tight, such as condensed or compressed typefaces, will always appear smaller than their wider counterparts from the same family, even at the exact same size.

The overall shape of your typefaces can also impact how they appear. Fonts with more round shapes tend to be shorter but have larger set widths. The spaces within letter strokes and between the letters are also more open. More oval-shaped typefaces tend to have increased x-heights but smaller set widths with less white space in and around letters. Each font style can carry weight and work in a variety of projects.

The kerning, or amount of horizontal space between each letter, can also impact the weight of words in your design. Extremely tight kerning, where the edges of letters begin to touch, can feel very tight and blocks of text can look heavy, and be intimidating for readers. Very loosely kerned text is very light. Be careful of kerning extremes. Text that is too tight or too loose is not very readable when used for large blocks of text; it is best used for only a few words in special design situations.

Stroke Weight

One of the most important factors when considering a typeface is the stroke weight. The thick or thin lines that compose each stroke of each letter can carry considerable weight. Typefaces can contain any combination of thick, thin and average strokes for each letter.

Fonts with thicker strokes carry considerably more weight than thinner ones. It is also possible for fonts in a single family to have varying weights as well. You can determine stroke weights within a family by looking at the font name – Arial (or Arial regular) is the base type style and has an average stroke weight. Arial bold is somewhat thicker and heavier and Arial black has an extremely thick stroke weight. This variation of fonts is quite common and most type designers use the same names (thin, roman, medium, bold, heavy, black) to denote weights within a family.

Just as more rounded fonts have a more open feel, typefaces with thinner strokes do as well. Fonts with thicker strokes have more punch and impact. For the best results, use fonts with medium to average stroke weights for blocks of text. Use super thin or thick letter forms for accents such as headlines or smaller headers in copy.

Be careful using fonts with thick and thin strokes within each letter, such as Bodoni. In large blocks of text, these typefaces can be more difficult to read and work best as accent typefaces.

Color Considerations

Also be mindful of your background color and type color in combination with your font selections. The contrast created by color choices can also impact the weight of each typeface.

High contrast combinations, such as black text on a white background or white text on a black background, work best with average size and weight or heavier, larger type choices. Letters with thin strokes and at small sizes can sometimes get lost or appear to blur.

Thin letter forms work best with less contrast, such as on lightly tinted background with black or dark colored text. Letters will appear sharper and easier to read.

Low-contrast designs (such as a navy background with blue text or the brown on brown theme used by Night Owl Interactive) work best with weightier, thicker typefaces. Small, thin fonts will fall into the background when there is little contrast to emphasize letters. Type, though, with more heft can have a lot of impact in monotone or high-color designs.

Flair

Finally, you can always add weight to almost any bit of type by adding color or using a novelty typeface. These things, though, should be done in moderation.

Add color to a single word, phrase or text-heavy logo to make an item stand out from the other type. Color can bring emphasis to letters even if they are not actually any larger than other characters. Avoid mashing too many colors together or using too many hues in a small space; this can be distracting and actually do the opposite of what you are trying to accomplish.

Apply the same theory using a novelty typeface. Distinct lettering can also draw the eye in a text-laden design project.

Conclusion

Remember, the most effective type-driven websites combine multiple typefaces and styles while creating a distinct feel and hierarchy. Mix and match type categories (serifs, sans serifs and novelty fonts) and sizes to get the best overall effect.

Also keep moderation in mind. Type-driven projects are among some of the most difficult to accomplish. While you want to establish a creative and visually appealing site, readability should be the top priority. Avoid using too many different fonts. Select one or two families for each project and stick to those typefaces throughout, but use variations within each family and color to add emphasis and contrast as needed.