Just a college student trying to make it through Web Design

Typography Badge

It is a common misconception to believe that design is all about the drawings, pictures, and photographs. However, the key to good design is typography. In fact, the key to great design is typography. With haphazard font-usage or complete disregard for type, the entire vision for a web page, print ad, or anything else can be instantly lost. As long as the designer remembers a few crucial design rules, his or her final creation will be even better. In the following two examples, one for the web and one for print, one can see several elements of critical typography design.

There are many examples of terrible web typography out there. Whether it is because some designers are in a hurry to get the information needed up on the Internet or for some other reason, bad typography is hard to find.

The example used here is from the testimonial page of the Penny Juice website, a company that provides natural juice to daycares and schools. According to Laura Franz’s video tutorial on typography on Lynda.com, good typography should always promote reading. No one wants to try to read when they have to compete with all caps and neon-colored backgrounds. Additionally, the navigation bar to the rest of the pages on the website was at the very bottom. If a user got distracted, or more likely frustrated, he or she could likely move on to another website because the links are not easily visible.

In the revised version of the Penny Juice page, emphasize is now on the readability of the content. Although this web page is only created with the web-safe fonts Georgia and Verdana, rhythm and tension throughout the page is used to promote engagement with the information. The crazy colors are exchanged with subtle colors, with the bronze color emphasizing the Penny Juice name.  To fix the inaccessible links at the bottom of the page, the links are now placed right-aligned to the left of the testimonials, again helping with the tension of the page. Additionally, the inspiration for the fruit photo banner in-between the title and the content is from Jon Tan’s website, jontangerine.com. Last but not least, hierarchy is used with each testimonial. The name and school each person is from is in 14pt Verdana while the city is 10pt italicized. The actual testimonial is in 12pt Georgia. This mixture of font and sizes creates a visual hierarchy. According to C. Knight & J. Glaser, “Visual hierarchy is undoubtedly the key to memorability, persuasiveness and communication.”

I LOVE PENNY JUICE SO MUCH AND I LOVE COLOR

I LOVE PENNY JUICE SO MUCH AND I LOVE COLOR

pennyjuice2

Hyperlinks at the bottom?

Revised Penny Juice Typography

Revised Penny Juice Typography

In regards to the example of print typography, the piece chosen was a print advertisement for a New Zealand online lottery company called My Lotto. Although this design is very fun and creative, the legibility easily gets lost if one is not focusing completely on the text. According to Laura Franz, it is necessary to use different fonts and sizes to convey meaning, but too much of a good thing can be a bad thing. Additionally, it is important to pay attention to fonts’ bowl shapes and x-heights, which are both factors that are sometimes lost.

Cool idea, but not entirely legible.

Cool idea, but not entirely legible.

In the revised version, the look is much cleaner. Instead of using different fonts for the main text, Trebuchet MS is utilized. However, the important parts of the message are either in all caps or in a different color to signal to the reader that this is the most important information. For the headings, Georgia is used along with Script MT Bold for the word “instant” to further express meaning.

Revised Lotto Ad

Revised Lotto Ad

Whether the design is for web or for print, also keep typography as the number one concern. If the reader cannot read the information, even the most beautiful designs are disregarded.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: