Reverse Engineer – M's Musings

Reversed Engineering Post – Typography

Introduction –

I am using my company’s website as my example. NAVEX Global is a software company specializing in ethics & compliance. This is a screenshot from www.navexglobal.com and was created by our amazing Marketing team who at the time of this was headed by Chris Morton, Director of Marketing. I am always proud to direct our clients to the corporate website because its modern design and easy to use navigation.

The use of different font types attracts attention as well as the white space surrounding the main mission statement in white. The green “Get Started” buttons beg to be clicked on.

First Font Style – OldStyle

The white mission statement or tag line is right aligned on the website. The font is Oldstyle and is very professional with the stroke marks mimic brush marks. This font is easy to read yet is distinguished.

Second Font Style – Sans Serif

The smaller type surrounding the main tag line and the menu items at the top are in Sans Serif. The mono weight is very simple and even from black to white are distinctive without any serifs. This font seems to be very common in digital formats, and are used many times over in the website. The logo in the top left actually includes a decorative style using a dot instead of a line for the letter A.

Contrast between the fonts

The serifs of the Oldstyle have an elegance to the letters showing to me that the tag line should draw my attention first. It’s professional look elevates the message. The white color against the picture background make it stand out without overwhelming the reader. The diagonal stress on the o’s are noticeable at this size of font.

The smaller Sans Serif font shows contrast by having the same weight of the letters. Without the serif’s there is less emphasis on reading, and more on invitation of clicking. The action tabs with the green and with text makes it easy to see where to click for more information. The black menu items at the top still offer information if needed, but the eye is drawn to the green.

The logo showing the NAVEX in decorative style and in orange helps draw attention to the name. Global is used in many company’s names, but NAVEX is unique and memorable.

Conclusion –

The different font styles show a mature design style intended to draw the reader in. The designer is not afraid to contrast Oldstyle with the Sans Serif font. The use of colors to instruct users to find more information is clever.

Introduction

This M&M Yellow Peanut advertisement was listed in the April 2014 issue of Ebony. I found this on Google images, and this ad was part of an article called “Representations of American Culture in Food Advertisements in Mainstream, Latina, and African-American Magazines”. The photo credit in the image is by Martin Wonnacott.

Proximity

This ad grouped together the tag line of “A Nut Above the Rest” and the description close to the images. The quote was centered about Yellow, the peanut M&M character.

Alignment

The lines of the text are divided into columns, with using center alignment for the quote, and left-aligned for the description column.

Repetition

The use of all one color, with slightly different tints and shades add to the theme. The image of the peanuts that spread across the full bottom help reinforce the type of M&M.

Contrast

The use of the white quote against the yellow background and tying it together with the white of the gloves and “m” on the front make a striking image. The black writing on the right is different to show it is not part of the quote.

Conclusion

This ad was very pleasing to look at. The use of a dominant color reinforced the character, and the play of cartoon with the real images of peanuts made it seem this character was real. Overall, the contrast was simple, and the alignment easy to read.

Category: Reverse Engineer

Varied Font Styles Draw Attention

M&M’s Yellow by Design