Oct
25

Why Typography Matters on Your Website

Image of designing with type
Maybe you’re wondering what typography has to do with social media and our answer is a lot. One of the philosophies Shelby and I agree on (yes, sometimes that does happen) is that your blog or website is the home base of your online presence. This means your first conversion goal is to get people from social media outposts like Twitter and Facebook to your blog where you have more control over the user experience than Twitter or Facebook will ever grant you. When you achieve that goal and get folks to your site, it would be a shame to let bad typography kill your great content.

This will be our topic for tonight’s #shehechat on Twitter at 8 p.m. CST. Below our individual synopses, you will find more specific aspects of this topic that we will cover in the chat. Also, if you have any suggestions for future topics, please let us know and we will cover it on our website and during a subsequent chat.

Why Jim and Shelby love type so darn much

Jim Says:

It’s been almost 30 years since I had the required typography classes to complete my degree in Printing Management. Back then (in the early 1980s), typography was based almost 100 percent on the world of ink on paper. We learned that basics back then still apply today. The one I shared with Shelby earlier this week is probably the most violated by those with a lack of typography knowledge (such as many technical people building websites). There should never be more than three typographic contrasts in any printed or online piece. A typographic contrast is a change in font, size, or style (bold, italic, etc.). There are tons of other rules to follow, but if all sites on the internet just followed that one rule fewer kittens and puppies would die because of poorly designed sites. And before I turn this over to Shelby, here’s a cool resource from Chris Pearson if you’re trying to figure out what size type to use on your site.

Shelby Says:

My first rule is to always use Comic Sans. Stop. I’m kidding. Don’t do it.

I graduated from Ball State University with a journalism degree specializing in graphic design. Back then (in the mid- to late 90s), the online world was still considered fairly new so my typography skills were also mostly honed for ink on paper. During college, I had one professor for several classes and he held typography up on a pedestal as the place where all good – and bad – design began. Therefore, no matter which class I had with him, I had come to expect pop quizzes on font recognition. The quizzes weren’t as simple as determining a serif font from a sans serif. There would be a sentence printed out on the quiz and I’d need to be able to tell him that it was 12 pt. Helvetica Condensed bold. I dreaded these quizzes then, but throughout my career I have learned to appreciate what they taught me about typography and how important it is. Websites – just like print – have a goal and that is to get people to absorb the content. If a site isn’t visually appealing or easy to read, the chances of someone staying on the site long enough to grasp any of the content are dramatically lowered. After my transition from print to online, I have acquired a few new tools for designing with better typography. Here are two of my typography secrets:

Web safe fonts: When a font is printed on paper, it doesn’t change for any reader. However, viewers of websites have many more variables at their fingertips such as browser preference and sometimes fonts don’t translate well between browsers. I use web safe fonts in my designs to try to avoid this problem.

Typetester: This online gem merely lets you compare and contrast fonts with all the variables such as leading, kerning, style and color. It’s particularly helpful if you are trying to find a font similar to another one.

Note: While I believe typography choice is important to any design – print or online, I have never known bad font decisions to kill kittens or puppies. If that ever happens, I may have to change careers.

Tonight’s #shehechat topics

  1. How important is typography for readers/viewers?
  2. What do you think about standardizing fonts for websites (having only a few to work with)?
  3. Do you have any typography rules, tricks, tips or resources you use?
  4. Do the same typography rules apply to both print and online? Why or why not?
  5. What is your favorite font and why? What’s your least favorite?
0 comments
Sort: Newest | Oldest