Typography Guide for Beginners: Type Contrast
What is type contrast? It's visual harmony between letters and the space around them. It's the epitome of typography. You know when you see multiple fonts paired on a page that look like they just belong together? Type contrast is why. Type contrast gets the important information across and it also makes your design stand out like magic! Words can be visually compelling as well as meaningfully compelling.
So, how do ya do it? While there are no absolute formulas in design — much like life — there are fundamentals that are widely accepted and practiced. Carl Dair is the man behind the 7 fundamentals of type contrast and he started publishing books in 1964, which is pretty wild when you consider the amount of time that has passed since. Even over 50 years later, designers are still using the method he wrote about. Design trends come and go but the fundamentals never go out of fashion.
In order for you to start practicing your typography skills, you'll need to have fonts to choose from. If you're using the fonts bundled with whatever software you use, that's great! Make sure you have a wide variety from skinny ones to chunky ones to script ones. If you're lacking in fonts, you can get free ones (for personal use) at Lost Type, League of Moveable Type, or Font Squirrel. Don't focus too much on how pretty or cool the font is. The simple looking ones often look the best and pair well with other fonts. It’s easy to get caught up in all the fancy fonts that look awesome with detailed flourishes, but download more of the simpler ones! Now, let's get to the good part... how to use your fonts successfully with type contrast.
The 7 Fundamentals of Type Contrast
Size is the easiest fundamental to use and it's used everywhere! Size matters, it's true. It's even on this post to differentiate headline text from paragraph text. Naturally we look at the thing that's different first and then our eyes scan the rest. Use that to your advantage in your designs and set your important text in a font size that's much different than the rest. What do you want the viewer to see first? Make it BIG! Or make it really little (but let's be real–go big or go home right?). As long as the font size of your important text is different than the text around it, you will bring attention to what's important. The contrast between font size is easy and effective.
Another easy and simple fundamental is color. Use different colors to draw the eye to certain text. Let's think of it this way... if you're reading a book and all of the text is black, and then you turn the page and there is one word that is bright red in the middle of the page, you're going to look at that bright red word no matter how small it is on the page. It's different from the sea of black text so your eye is drawn to it. Use a pop of color in your designs to draw the eye to important text. Emphasize what you want the viewer to see.
Use different directions to guide the viewer and create emphasis as well. It's really as simple as rotating text. Notice in the photo above that I've used direction, color, AND size to create contrast between '7' and 'fundamentals of type contrast'. The fonts fit snugly together with the help of a little change of direction and the viewer is pulled to that diagonal line. Put your important text at a different angle to shake things up a bit.
Weight has multiple meanings. The first meaning is the thickness of the font and you can create contrast when you pair a thin font next to a bold font. They look great together and this is one of my go-to fundamentals when I design. It's so convenient to set some type in bold. Really it's just the push of a "bold" button to create contrast. However, the other meaning of weight is more abstract and touches on the previous fundamentals. You can use color and size for weight. Black looks heavier than lighter colors like pink... black is just a heavy color in general. And big text visually weighs more than smaller text. It's like your mind has a scale out and ready to place things on it to see what's heavier. The bigger things weigh more and the scale tips in their visual favor. (Of course that's not always scientifically true but we're talking about imaginary scales so to hell with gravity.)
Let me confuse you temporarily: fonts are not actually called fonts. What the general public call fonts, like Times New Roman and Ariel, are actually called typefaces. Fonts are the families within a typeface, like bold and italic. In this entire blog article I have called typefaces "fonts" since that's what everyone understands. But for this particular principle (and only for this principle), disregard everything you know about the word "font". For the form principle, you can use varying fonts in a typeface to achieve type contrast. This includes the normal font versus the italic font, or the condensed font versus the e x p a n d e d f o n t. Most commonly, form type contrast refers to UPPERCASE versus lowercase text. By using one of these fonts, you create visual interest to an otherwise plain typeface. Ok, back to the regular meaning of font...
One of my favorite fundamentals is structure. This is when I can use those typography terms that I paid so much money to learn in college *heavy sigh*. Basically every font falls into a category of fonts. There are script fonts, serif fonts, san-serif fonts, display fonts, slab fonts, etc and you can click this link to learn more about them. When you pair two different categories of fonts together they create a nice visual contrast. A great example is the very first image in this blog post. I used a san-serif font with a script font to make it look interesting and to make the word 'typography' stand out. Not all fonts work together so it takes a bit of trial and error to get a pair that feels right.
Texture is the most abstract principle of the bunch–it involves using fonts not for emphasis on what the text says but rather how the font looks. This is when you bring out the decorative fonts that are hard to read. You can use a word repeatedly to make a wall of text that looks like a texture (like in the example below) or you can use letters as a compositional element. Imagine a magazine spread with a huge letter S horizontally spanning both pages, wrapping itself around text and images. The letter S is being used for the way it looks and the way it curves, not because the designer wants it to say "S". Form type contrast is all about the form of a letter—not the meaning. This method can add interesting elements to your design.
Simple examples of type contrast in action:
They are numbered to correlate with the list above.
I was taught to always use at least 2 forms of type contrast together in a design. These fundamentals work best when you use them together. When you're designing anything with text, keep all 7 fundamentals in mind. It takes a little bit of work and self-reminding but eventually your subconscious does this automatically when you're designing. I'll catch myself doing type contrast even in Evernote, I just can't help it.
Who can benefit from using type contrast? Just about everyone who uses text and you too since you're reading this text. Whether you're a graphic designer, blogger, author, web developer, chemistry student, or whatever else... it's always great to know how to emphasize important text and make it look great.