Typography Basics - Blogging, Small Business, Web Design & Hosting Tips - A Small Orange

Typography Basics

Photo by arnoKath

The possibilities for web typography have expanded in recent years, and designers have far more to choose from than the old standbys of Times New Roman, Verdana, and the usual gang of familiar web fonts.

Whether you’re a designer who is just getting started, or if you’re someone who wishes to broaden their typography knowledge, we’ve collected some fantastic type-related resources for you below. The first few links are basic introductions to typography, from families of fonts to the anatomy of letters themselves. After those, we put together a nice set of type-focused tools for you to try out.

If you know of any additional resources on this topic, let us know in the comments!

Let’s start with the basics

This article from Noupe gives you am awesome introduction to letter anatomy, the histories of different fonts, and when certain types should be used or avoided. This is a fantastic place to start if you’re diving into typography specifics for the first time.

This site gives you a quick get-in-get-out overview of popular fonts organized in a neat timeline. In addition, the interactive anatomy page lets you explore different features of typography in an easy to use format. When you’ve finished exploring, quiz yourself on what you’ve learned by clicking on “The Quiz.”

Now that you have a sense of the history and features of fonts and typefaces, use this great post from Smashing Magazine to help you choose the perfect font for your site. Woven into this article are some good examples of the essential role typography plays in the effectiveness of your site.

Now that you’ve starting to get a sense of how the type on your site should look, dive into this post for some tips on how to effectively organize it on your pages.

The fun stuff

Check out these typography-related games/exercises:

“Kerning” is the art of spacing letters perfectly and evenly for maximum readability. Try your hand at kerning these letters and track your skill progress.

Shape Type
Shape Type lets you shape existing letters that are bent out of shape and scores you on your ability to take and ugly letter and make it a thing of beauty.

Deep Font Challenge
Take a shot at the letter that corresponds to the font name printed below it. Rack up points and see how you match up with other designers!

KERN takes the practice of kerning and gives it to you in iPhone form. Interesting.