I had mentioned earlier that the task of trying to decide which of the hundreds, if not thousands, of typefaces to choose for a particular job, can be a daunting one.\u00a0 However, making the right type choices is not difficult when you know how. This knowledge will be indispensable when creating a brand or logo, laying out a website and using CSS, or even writing a CV.<\/p>\n
There are many ways to effectively contrast type and different designers will advocate their personal preference.\u00a0 However, most methods are usually found within the following descriptions of contrast:<\/p>\n
- \n
- Size<\/li>\n
- Weight<\/li>\n
- Shape<\/li>\n
- Type Category<\/li>\n
- Direction<\/li>\n
- Color<\/li>\n<\/ul>\n
Good type contrast can be achieved by using only one, or a combination, of these methods.\u00a0 While it\u2019s not necessary to use more than one, it is often recommended for a greater degree of contrast. Don\u2019t get too carried away, as it\u2019s not always the best idea to use all six at the same time.<\/p>\n
<\/strong><\/p>\n
Size<\/strong><\/p>\n
<\/strong><\/p>\n
The contrast of size is a common on when discussing graphic design.\u00a0 A good way to think about this idea, is to remember that when things are slightly different in size, the often don\u2019t have enough contrast.\u00a0 You might say that they actually create a conflict instead.\u00a0 Therefore, if it\u2019s not different enough, it looks like a mistake.\u00a0 For example, headlines set at 14 points and body texts (paragraphs) are set at 12, the contrast is usually ineffective.\u00a0 Set those headlines to 16 or 18 instead and add some other contrasts like weight and color for maximum contrast.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-1-300x142.gif\" "\\"designtype2-1\\"")
<\/a><\/p>\nThis example shows the importance or emphasis of the word huge. It\u2019s the first thing you look at, letting the viewer know what is most important.\u00a0 Notice how the text is also making use of more than one contrast.\u00a0 Weight is also being employed by the HUGE text to make it stand out from the text on top.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-2-300x106.gif\" "\\"designtype2-2\\"")
<\/a><\/p>\nThis example uses size (as well as some other contrasts) to emphasize the name of the company.\u00a0 It\u2019s not more important to know that they\u2019re incorporated than to know their name. \u00a0 The information is there if needed, but not overpowering the company name. See how incorporated is also more spread out so that it aligns with the edges of the larger text.<\/p>\n
Weight<\/strong><\/p>\n
<\/strong><\/p>\n
The contrast of weight can be understood by thinking about the thickness or how heavy the strokes of the typeface look.\u00a0 While it\u2019s generally recommended not to mix more than one typeface from the same font category or family, this can still work if the contrasting font is a bold or thicker variation.\u00a0 We saw how all of the previous examples used size and weight as a contrast.\u00a0 Both also use type from the same category, sans serif in the first, and slab serif in the second.\u00a0 If weight and size had not been used, the contrast would have been too ineffective.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-3-300x161.gif\" "\\"designtype2-3\\"")
<\/a><\/p>\nIn this example, the contrast in the main title is quite noticeable. It is the main focus and as such, it is the biggest element of type.\u00a0 The weight of the slab serif, which is repeated in the smaller headlines, is a start contrast from the thinner sans serifs in the paragraphs. As well, the black and white contrast in the title makes it heavier and easily the main focus.<\/p>\n
Shape<\/strong><\/p>\n
<\/strong><\/p>\n
The shape or form a word takes is directly related to whether it has been set in Upper or lowercase letters.\u00a0 As we learn to read, we begin by phonetically breaking down the sounds of letters (C-A-T spells cat). However, once we learn what the word cat looks like, we eventually abandon the phonetic pronunciation and instantly recognize the way that word looks due to years of practice.<\/p>\n
Surprisingly the shape of the word cat is easier to recognize when it is in lower case. In fact all text is easier and faster to read when set in lowercase, or a mix of caps and lowercase, than when it is set in all caps.\u00a0 For this reason, you should never set your body texts, or paragraphs in all capital letters.\u00a0 It is too difficult to read and it looks atrocious.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-4-300x142.gif\" "\\"designtype2-4\\"")
<\/a><\/p>\nThe shape of guys and girls are easier to make out when we can see lowercase \u201cg\u201d and \u201cy\u201d dropping below the baseline on the rest of the lowercase letters. The same can be said for the dot in the \u201cI\u201d and the lowercase \u201cl\u201d.\u00a0 However, notice that the shape of the uppercase examples both form square shapes.\u00a0 This makes their shapes indistinguishable and more difficult to read at smaller sizes.<\/p>\n
Shapes can be used as an effective means of contrast as is seen in this example.\u00a0 Along with size and weight, the mixes of upper and lowercase text help to improve the contrast of these words.\u00a0 The same is true of the previous example of \u201ckillersites incorporated\u201d. What is also important to note about shape is the amount of space between letters.\u00a0 The word incorporated was much wider spaced than the word \u201ckillersites\u201d, which was much closer together, affecting its shape.<\/p>\n
Category of Type<\/strong><\/p>\n
In our last article, we looked at how to categorize any typeface.\u00a0 By looking for 3 distinct hallmarks, we were able to place any font into the categories of Oldstyle, Modern, Slab Serif, Sans Serif, Script or Decorative.\u00a0 As was mentioned earlier, it is usually most effective to contrast typefaces from different categories. For example, contrasting two fonts from the Sans Serif category only works when other contrasting methods are employed.\u00a0 When thinking of which categories to use for a contrast, remember to avoid anything with too many similarities. A serif font will always work with a san serif.\u00a0 Always remember to avoid contrasting 2 different scripts fonts.\u00a0 They will compete with each other for attention and ends up creating confusion on your page.\u00a0 It\u2019s kind of like too many divas fighting over who will be headlining the show.\u00a0 If script fonts are divas, then decoratives are like toddlers fighting for their parent\u2019s attention.\u00a0 Avoid using more than on decorative on any given page, for the same reasons as before.\u00a0 As well, never mix a decorative and a script font, they usually don\u2019t work.<\/p>\n
When in doubt, always remember: do not to mix more than two different categories<\/strong> in any given situation.\u00a0 At best, and only if you know what you\u2019re doing, should you attempt to use three.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-5-300x142.gif\" "\\"designtype2-5\\"")
<\/a><\/p>\nHere is the same example from before, but notice how we\u2019ve now contrasted a sans serif with a slab to heighten their differences.\u00a0 It also uses contrasts of size, weight and shape.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-6-300x142.gif\" "\\"designtype2-6\\"")
<\/a><\/p>\nThis example effectively contrasts a script with a sans serif.\u00a0 Size, shape (all lowercase in the sans serif), and direction in the lines are also contrasted here.<\/p>\n
Direction<\/strong><\/p>\n
Direction is a useful contrast that draws interest by changing the way someone reads type.\u00a0 It is best when used with the other contrasts and can be used to contrast headlines, and logo elements as well as anything else.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-7-300x142.gif\" "\\"designtype2-7\\"")
<\/a><\/p>\nNot only is this example contrasting direction, but it also aligns the number into the negative space of the letter \u201cL\u201d. This creates a box shape with the rest of the uppercase letters.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-8-300x120.gif\" "\\"designtype2-8\\"")
<\/a><\/p>\nThis example directs the user\u2019s attention down in the direction of \u201c.com\u201d.\u00a0 It\u2019s also aligned from the top to the bottom of the letter \u201cm\u201d.\u00a0 When aligning text shapes, this about fitting a puzzle together.<\/p>\n
Color<\/strong><\/p>\n
<\/strong><\/p>\n
Color contrasts are a great way to add a simple element for emphasis or effect.\u00a0 Color would need a whole article to cover all of its complexities and psychological implications.\u00a0 However, we can simply state that the use of color as a contrast in text can be one of the easiest ways to communicate a message to your audience.<\/p>\n
Some things to remember are the differences between hot and cold colors.\u00a0 Reds, yellows and oranges, represent the hot colors which advance, or seem to jump off the page.\u00a0 Blues, dark greens and purples; represent cool colors that usually recede into the background. For more information on mixing colors see adobe.com\u2019s excellent tool for creating color swatches at http:\/\/kuler.adobe.com\/<\/a>.<\/p>\n
![\"\"](\"http:\/\/www.killersites.com\/magazine\/wp-content\/uploads\/2010\/03\/designtype2-1.gif\" "\\"designtype2-1\\"")
<\/a><\/p>\n