Typography Matters

typographyYou may not think what you are writing on the web and the way it is written is important. But it is just as important to your web page and it’s graphics if not more. Typography (I’m talking about fonts, you rookie) speaks volumes and, in my opinion, is far more important than the visuals themselves sometimes. Now, I am not going to cover every definition of type from Humanist Sans to Geometric Sans. But, what I will say is typeface can inspire a feeling depending on weight, point size, and whether it has serifs or not.

Long before the web, there were thousands of typefaces perfected by hand. And, many come with amazing stories. Same goes for the web and the design of how they can be appropriately displayed for maximum readability.

First and foremost, you want to pick a type referred to as “web safe”. These will generally go in your body copy and not in your images. A reason for this is, when you browser grows and shrinks, you start to expand or compress distance between characters all around. (Look up “leading” and “kerning” for a further definition.) And, depending on the weight, san serif/serif, kerning and leading these characters can become a “dark sea of death” or too “airy” which makes readability difficult. This also creates personality in your type, which you may not have wanted, that conflicts with your overall theme.

Personality in your typeface is something you really want to be wary of. I recommend doing a typeface analysis on your web graphics and body copy before every project. This is simply the process of laying out different styles of type that match the message and theme of your webpage. Simply gather different typefaces off your image editor (like Illustrator for your graphics) and maybe some off Google Fonts for your body copy. Lay them out in different weights and sizes to get a feel for how they look visually. Put them in a string to form a mock paragraph to see if you get the “dark sea of death” or “airy” look. Here are some examples of typeface analyses.

Type Face Analysis
An Analysis of Typography on the Web

Photo credit for the above graphic goes to Tuts+. They also give a fairly good explanation on type analysis for the web.

Further, try your fonts in colors, if necessary, and pair them with your web graphics. Have others look at your analysis and ask them describe how they feel or what they see. Finally, be sure to not mix types if you can help it. Clashing personalities can look like bad design and throw the message you are trying to convey of your site off. It is best to stick to one or two typefaces per project and separate them by visual hierarchy, meaning you could have a serif header followed by a sanserif caption in a lighter weight as seen below.

This is Verdana Typeface Header

This is Times New Roman

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s