Sunday, September 26, 2010

Typographic Content Review

One of the most powerful tools at a Graphic Designer's disposal is Type. This has been repeated many times, but it's possibly one of the most important lessons you will learn as a designer. It took one very passionate Typography Professor to truly make me appreciate that.

I actually took a couple of Graphic Design/Digital Imaging classes in High School, but they only really covered the absolute basics.

  1. Your type must be legible
  2. Know the difference between a Serif and Sans Serif font
  3. Know about Leading and Kerning

And that was basically the curriculum...

Yet here I am in College finding out that there was so much more to that. Type is everywhere, even if we don't really notice it. Well.. we do. We're usually just too preoccupied with reading it in the paper or the advertisements on the subway to notice that the fact that we can read it is one attribute of a successful design.


Legibility:

...Or Readability (yes that's a word) is essential to any design containing text. For example, web design! Creativity in your layout and images can attract many potential viewers, but if they can't read the text on your buttons or links, how are they supposed to navigate your site? How do you read tiny text if you've got Astigmatism in your right eye?


Spelling and Punctuation:

This can go hand in hand with Legibility. Sometimes you'll get folks who can manage to figure out what you mean by sounding out the word, but you should never count on it. Folks on large forums tend to get chewed up and spit out for poor spelling and l33tsp34k, especially when said person is trying to present a topic for debate. How are you supposed to take them seriously when they t4lk l3ik diz?

On a website or forum dedicated to creative writing endeavors, it can be considered downright insulting.

My personal pet-peeve (though I've decided that it's counter productive to nag about it every time I see it), is improper use of contractions. It's just so common to see writers mix up 'Your' and 'You're', or 'Their','There' and 'They're'. (My absolute favorite is when they omit the apostrophe altogether)

The difference?

'Your' and 'Their' are both possessive. As in 'Your dog' or 'Their cat'.

'You're' and 'They're' are shortened versions of 'You are' and 'They are'.

'There' describes a place. 'Over where? Over there!'

A potential remedy for this would be to (in the case of a written letter or document) carry some sort of pocket reference, or (in the case of typing on a computer or keyboard) install a good spell-checker program. Preferably one that recognizes the difference between Canadian and US spelling of words.

And in the case of this nonsense, there isn't much plausible use for it outside of that chain e-mail that's been circulating... Intended to provoke a bit of thought, then to be passed along.


Grammar:

According to Wikipedia...

"Grammar is the set of structural rules that govern the composition of sentences, phrases, and words in any given natural language."

Following or Ignoring the aforementioned structural rules can make the difference between legible text and near gibberish. Yes, sometimes we type things in a hurry, but it's still important to give it a quick once-over before you hit the 'post' or 'send' button.

For example, "I give you present" VS "I've given you a present", "I'll give you a present", "I'm going to give you a present" etc.


Context:

You need to be very careful with context. Your choice of words can sometimes cause your target audience to think of a totally different meaning. Some designers can use this to their advantage. They think up clever puns that address the topic at hand, and purposefully parody another topic entirely. But it only works if you know your target audience will think it's humorous.

It's not an advertisement but if you've ever seen the picture of that obese looking cat with <b> and </b> on either side, <b> is an HTML tag to make text bold when wrapped around it. In this case, it appears to be making the cat, fat. (There's also a motivational poster of it but it seems as if only one person has bothered to do it, and it's not that funny at all)


Colors:

The color of your text and the background it's set upon can greatly affect legibility, and can even cause eyestrain and/or headaches in some individuals. There are exceptions however, provided that whatever color you're working with is used reasonably. Consider the following...

  1. Contrast:
    Solid Black text on White can help reduce eyestrain, wheras White (or other bright colors) on Black can have the adverse affect. Yellow text on White should generally be avoided as it's difficult to make out.

  2. Saturation:
    Bright colors, such as the Primaries and Secondaries, may look good and even complement one another in a Design or Illustration, but it can make reading text harder if it's all written in Red or all in Blue (Blue isn't as bad, but you could still substitute for a darker blue if you absolutely need some kind of Blue in your design).

  3. Frequency of Use:
    How often are these colors used? For example: Sometimes text can get highlighted in bright colors to draw attention. Red text can effectively communicate a warning or caution. For example, the following screenshots are taken from a website I regularly visit. The person who runs it creates models for Freeware 3D animation software MikuMiku Dance.




    Image Borrowed from Sayaka Project

    The way the site is set up, each 3D model is given an image, a quick description, and a download link. The screenshot above was taken as Google Translate was active...




    Image borrowed from Sayaka Project

    This screenshot however, was taken while viewing the page in it's original Japanese Language. Naturally, the Red Font remains constant (Google Doesn't have the technology to override stylesheets on just any given webpage... if they did they'd be subject to absolutely scathing reviews) and in both cases is enough to draw your eye.

    Even if you don't understand the language the text is written in, you can still understand that it's been cited as important. In this case, the model download is rated '18+' or 'Restricted' by the creator. They're fully aware that English users visit this site (and you can search 'MMD Kakomiki' or 'MMD Sayaka Project' on Youtube to confirm it), so they took the extra step to get the message across.

  4. Length of the article:
    How much text is there to read? If you can help it, try not to subject your readers/viewers to prolonged eyestrain. As noted above, it's sometimes acceptable to use bright fonts to highlight a piece of important text. (I still wouldn't recommend Yellow text, unless you use it like this)

Language:

This is just something I'm throwing in, because it's come up for me before.

I'm not going to say 'Always use the Queen's English!' because there are designers who may be fluent in more than one language, or who design for clients in other countries. Perhaps you're even one of them. Whatever the case, you should always know the language of your target market. At least enough of it that you won't unknowingly offend anyone, or make accidental reference to something inappropriate.




Sometimes you'll see typefaces or fonts inspired by other languages. While most of it is purely ornamental, I'd advise that if you were to design one yourself, triple check to make sure each character doesn't resemble something inappropriate in another language.

Sometimes it's okay to incorporate foreign words and phrases into your design, because even as English speakers we're still familiar with phrases like 'Carpe Diem', 'Ave Maria', 'A Mari Usque Ad Mare' or perhaps 'Nom De Plume'. Even the world 'Agenda' (meaning: 'Things to be Done') is used in our daily life. And 'Carpe Diem' is the slogan my Aunt's got printed on the back of her boat.

That about wraps it up for this post,  I hadn't intended it to sound like a lecture or a tutorial, but for some reason that's how it came out. Nonetheless I think I've layed down the guidelines I'll be working with. If anything doesn't make sense you can always comment about it and I'll address what needs fixing ;)

No comments:

Post a Comment