Award Winning Typography

Clio Awards Banner pulled from
https://clios.com

The image used in this post is the main image on the Clio homepage. I can be found at https://clios.com. I chose this image because the typography is excellent. The different typefaces and fonts contrast and don’t conflict with each other.

Serif Typeface

The designers of this graphic used a Modern typeface in a bold and regular font. There is a dramatic transition between thick and thin lines in the letters, this is especially notable in the A and V that I have accentuated. Another way to tell that it’s a Modern typeface is by the serifs. They are straight with no slant. The capital E in “evening” has an easily recognizable Modern serif. Also, note that the g’s are the same in both fonts, this makes them concordant.

Sans-Serif Typefaces

The Second typeface (pictured above) used by designers is a Sans serif category. There are no serifs on the letters in this eye-catching headline. Take a look at the “A” and “N” I have circled the space where the serifs would be if this were a serif typeface. Also of note, there is no transition from thick to thin lines in the letters.

This third typeface is also in the Sans serif category. It ties both of the other typefaces together though because it has a pretty strong thick to thin transition like a Modern font and no serifs like in a Sans serif font.

Contrast

There are three contracting typefaces

These three typefaces look good together because they contrast nicely. Take a look at the “A”s in these differing typefaces. One is a white Modern typeface that has a dramatic transition between thick and thin lines, another is a heavy black Sans serif typeface made of bold lines that don’t vary at all, the third typeface has elements of the others but still contrasts because of its color and weight. It is gold with a black background, has a slight transition between thick and thin lines, and no serifs. These elements contrast and add interest to the banner.

Conclusion

This banner is an excellent example of how typography enhances a design. The designers used contrasting typefaces with differing weights and color to draw our eyes around the page and give us the information they wanted us to know. The most important information is in a bright white typeface on the left of the banner. This draws our eyes to that text first, the next block of text is black on a white background the white flows from one element to the other and draws our eye to the next block of text. This contrasts but doesn’t interfere with the important text because of the contrasting elements. The last block of text almost hides at the top. The black background draws our eyes to it third and it doesn’t interfere with the rest of the text. Looking at the details in this banner enhances our understanding of good typography and helps us to recreate it in our own work.