Graphic Design | Typography

Web Typography

Trekcore, a Star Trek fansite, was chosen as an example of poor web typography for the purposes of this exercise. The typography on Trekcore’s website is varied to its detriment — at least five different fonts are featured on the homepage, each in different weights and colors. This jumble of typefaces and colors contributes to an overall cluttered feel, and negatively impacts the users’ experience. In the article on Smashing Magazine, “One More Time: Typography is the Foundation of Web Design,” designer Paul Scrivens explains that “For 99% of the designs out there, typography and white space are going to be your underlying foundation.” Trekcore uses neither of these well, so much of the design of the website had to be drastically changed in order to make a significant difference to its current typography.

Image

A mock-up of a proposal for TrekCore’s new typography, featuring the fonts Rockwell, Carrois Gothic, and Roddenberry.

In the revised mockup of Treckore’s website, which can be seen here, these problems were addressed by simplifying the color palette and number of fonts. The new layout uses only three total fonts — Rockwell, Carrois Gothic, and Roddenberry. The main color scheme was changed to mostly whites and dark grays, with a bright blue accent for important information such as the title of articles. According to web designers Knight and Glaser, in their article Creating Visual Hierarchies, “…type needs to be broken down into different levels, such as topic, importance and tone of voice,” so a serif (Rockwell), Sans Serif (Carrois Gothic), and novelty font (Roddenberry, the Star Trek font) were used to visually break up the site into different levels of importance and style. Carrois is used for all the smaller text and navigation bar, while the other more stylized fonts are used sparingly to denote something more important — the logo or the title of an article.

The old Trekcore logo used two separate, very different novelty Star Trek fonts. This new one only uses Roddenberry, but with “Trek” in white and “Core” in bright blue and italicized. This creates contrast without dissonance and ties the rest of the typography together.

Print Typography

The example of poor print typography that was chosen was an article from a series of online historical pamphlets and faux-magazine articles found on the Teachfind Archive. The article, which can be viewed here, is titled “Monthly War,” and suffers from some poor font choices, color selections, and overall layout structure. Most of the main text is

Image

written in a script font, which makes it difficult to read, and the oversaturated blue accents distract the reader. Glaser and Knight explain that “color has numerous roles to play in creating hierarchy, adding a dimension to the order of information,” but when the color selection is actively distracting and seemingly random, like in Monthly War, there is no order to the information, and the overall graphic design and readability suffers. This problem was a top priority to change.

The revised version of this print text can be seen here. The main body text was changed from script to serif and sans-serif, the color palette was toned down, and the number of columns was reduced from three to two for ease of reading. Orange accents on a single pull quote (as opposed to two) were also added to break up some of the tedium of the two-column layout. Now, the article’s different type faces — Quattrocento Roman, Intro, and Blue Highway — work together to be as readable as possible while remaining visually and aesthetically appealing instead of confusing the reader.

Every graphic choice made on these mock-ups of Trekcore and Monthly War was done with the intention of improving user experience both from an angle of ease and aesthetics. By displaying varied but complementary color choices, contrasting fonts, and using white space, these two poor examples of typography were transformed into much more robust specimens.

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