Typography 101: What is it and Why you should care

Typography 101
I would like to start this article off with a confession. For most of my career as a design student in interactive media, I did not give much thought to typography. Not that I am totally at fault. A lot of my instructors followed the common layperson’s approach to design: forget about typography and show me the those poppy shapes and colors.

Content is king and typography is 95% of design. These are two statements that designers can discuss night and day. Whether or not typography constitutes the vast majority of a design, rock star designers take it into consideration. Ignoring typography would mean the difference between something mediocre and something solid.

In the follow paragraphs, I am going to outline the basic terminology of typography and how you can use it to make your content more accessible to your users.

Type Terminology

What’s the difference between Typface and Font? You may have heard your designer use these terms, and maybe you may have thought, “They’re probably the same, right?” Not really.

Typeface is a collection of letterforms that have been designed to go together. This often happens when a design creates a logo or poster with an original letterform.

Fonts are created when the typeface is carried through for the rest of the characters in the alphabet, numerals, punctuation and icons.

Wait, it gets better. Type Style refers to a modified versions of the font such as bold or italics. Grouping all of the type styles together with the unmodified font makes it a Type Family.

What’s it Communicating

sans serif is neutral
serif is classic
italics mean go!
bold means attention

Actually, I’ve seen both bold and italics used to emphasize something in the content. Technically, italics should be used more in accordance to the rules of the grammar taught to us in school. Now, that you’ve shaken off that disturbing flash back, think of italics as a tool for writing titles of books, foreign words, and newly defined terms. There’s a bigger list, and you can check out this site that combines grammar and Web design.

Tips

Combining fonts
1. Limit yourself to 3 fonts on a site. You can make contrasting fonts work for you to draw the user’s eye to titles and other points of interests.

2. Consider Legibility and Readability. Legibility refers to whether or not an individual character is recognizable. Some typefaces may look great, but won’t work well when applied to a different set of characters for a logo, title or paragraph. Don’t kill yourself trying to be original. Just be good.

The same is true when applying a font to a title or the rest of the copy. While the ease of reading a short title with a certain font may not be an issue, readability may become a problem when the same font is used for a larger volume of content.
Display fonts
3. Keep it simple… smarty. A little can go a long way. If you’re looking to add some extra energy and you want to look beyond conventional fonts, you’ll probably wander into Display fonts. They’re funky and there’s a ton. Use is sparingly and call it a day.

Let your conventional fonts do the heavy lifting and the display fonts as accents.

Resources:
Basic Rules of Typography
Typography: Why You Should Care?
Further Reading”
Tips on How to Improve your Typography
Typography Deconstructed
Inspiration
I Love Typography

Be Sociable, Share!

Matt Eng

Matt's a Web Designer in Austin, TX. When he's not glued to a screen, you can find him drawing squirrels in comic book form or riding his bike. As a former resident of Japan, he is trained to speak 日本語 eat sushi any place and at any time.

More Posts - Twitter

If you like this post, you might like these!

One Response to Typography 101: What is it and Why you should care

  1. Pingback: Picture Perfect: Choosing the Right Images for your Site. | eng-ming.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>