One easy way to see typographic colors is to squint at a layout until you canвЂ™t read it anymore, but can still see the text in terms of its overall tonal value. Typographic color is the combined effect of the variations of font weight, size, stroke width, leading, kerning, and several other factors. It might be a bit heavy-handed but there is no confusion as to what the reader is supposed to look at first. On the right, weвЂ™ve set a Myriad Black above Minion, normal weight. However, we want the readerвЂ™s eye to go to the heading, not the body copy, at least initially. The Myriad Light, when set above a Minion Bold, tends to fade back and lose visual authority. In the example on the left, we have a decent size contrast, but not enough font weight contrast.

In addition to variations in size, make sure you are creating clear differences in font weights to help guide the readerвЂ™s eye around your design. When in doubt, define! Contrast Font WeightsДЄ sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. But even in that choice, we have a great variation of size, weight and function among the fonts used.ДЄll in all, there are 4 fonts from 3 typefaces being used here, and they all pull together into a cohesive design, because each role assigned to a font is fixed and is very clearly defined in the typographic hierarchy.

We saved the highly-distinct Rockwell for attention-getting headlines, and fallen back to a conservative sans serif heading and serif body copy combination we discussed earlier. Finally, the second level heading is Akzidenz Grotesk Medium. Our body copy intro and body copy typeface is Bembo at different sizes. We then use Rockwell Bold for the article heading. In the next example, we have used Akzidenz Grotesk Bold in all-caps in an author slug on the top. One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it. This combination works quite nicely as a result.Д¬hoosing typefaces from different classifications at the start avoids needless tension in your design and typography later. At the same time, it backs down and lets Clarendon have all the personality it wants. New Baskerville is a versatile transitional serif typeface with wide glyphs that goes nicely with the heavy-set Clarendon. The Clarendon Bold header is paired with the much-more neutral New Baskerville. Now notice the example on the right side. Putting two slab serifs together can create a needless and unsightly tension. Slab serif typefaces are known for their distinct personality, and they like to dominate any area in a design they are used in. The body copy on the left is Officina Serif which is also a slab serif. In the first example on the left side we have a heading set in Clarendon Bold, which is a slab serif. Their distinct personalities donвЂ™t play well off of each other and create a kind of typographic mud if careful attention is not paid. Typefaces of the same classification, but from different typeface families, can easily create discord when combined. Both typefaces, in this context, are on the same mission, and that makes for a great combination. They are both focused on bold clarity with highly-readable glyphs due to their tall x-height. Sabon, which is a serif typeface, works very well with Trade Gothic. WeвЂ™ve replaced Bell Gothic with the stately Sabon. Now letвЂ™s look at the example on the right. This kind of tension is likely not part of the design goal, and should be avoided. Trade Gothic wants to get to the facts, but Bell Gothic wants to have some fun. Putting these two together creates an unwanted conflict in the design. Bell Gothic, on the other hand, is much more dynamic and outspoken. Trade Gothic is arguably a no-nonsense typeface. A good rule of thumb, when it comes to header and body copy design problems, is not to create undue attention to the personality of each font. However, they have very different personalities. In the example below - a typical article layout - we have Trade Gothic Bold No.2 paired with Bell Gothic on the left side.

Wide block font