Elance Blog

Step Up Your Web Typography With These Tips

As a Multimedia Journalism major way back in my college years, part of the required curriculum was to take a semester long course covering one single topic: Typography. At the time, I thought to myself, “A WHOLE semester? On just typography?”

I learned very quickly that there’s a lot more to learn in the world of typography than “Times New Roman” and “Font Size”.

With blogging and user-generated content constantly growing on the web at record pace, the importance of typography is grows as well. You could have the most relevant, pertinent information on the web, but if it doesn't look good (or at least half decent), no one will want to read it. Michael Owens over at Net Tuts+ recently published a fantastic article that provides a solid crash course on improving your web typography. Now, I won’t say this will replace a semester long course at your favorite alma mater, but this list is definitely handy for web developers or anyone else that wants to make their web text pop out a little bit more.

Here are my two favorite items from the article (via Net Tuts+):

1. Typographic definitions: This section covers a ton of the basic definitions and lingo you need to understand before moving forward. This section covers ascenders, baselines, cap height, descenders, kerning, leading, letter spacing, ligatures, line height, measure, rendering, weight, word spacing, and X-height. (Whew!) All these definitions should be etched into your memory, so break out the flash cards if you have to. Trust me, it’s worth it.

2. Vertical rhythm: In a nutshell, this section specifically deals with the space in between lines and how much you should have to improve legibility with your web text. This section gets a bit technical, so it’s best if I leave the explainin’ to the pros:

The vertical rhythm of line spacing that provides the optimal spacing for the eye to follow. To create this rhythm it is best to follow a baseline grid. From my experience, online vertical rhythm is best set at or near 1.5em. NETTUTS+, for example, uses a vertical rhythm of 1.6em, which equates to roughly to a 17.6px line-height (based on a 11px font-size).

Intrigued? Check out the article in its entirety over at Net Tuts+ (6 Ways To Improve Your Web Typography). It’s seriously chock full of tips that every web developer should know, like developing within the browser, image replacement techniques, additional resources, and more.

Happy typing! And as always, feel free to leave us your tips and tricks in the comments below.

UPDATE: Smashing Magazine posted an excellent article that studies the way typography is used on the web. Tons of good information here (Did you know 60% of major websites today use sans-serif fonts over their serif counterparts?). Be sure to give it a read!

Net Tuts+ - 6 Ways To Improve Your Web Typography
Smashing Magazine - Typographic Design Patterns and Best Practices
Elance Blog - Awesome Online Tools And Resources For Writers
Elance Blog - 10 Ways To Produce A Winning Blog


Alex, thanks for sharing tips about typography. As a word processing specialist, I became known for being a perfectionist. I think it was a loving misnomer by those who did not understand how important it was for me to manipulate space and text to attract and keep the interest of a reader.

Anyway, I'm on my way to "6 Ways." Happy typing to you! Thanks again!