A few months ago, I wrote an article about the value and importance of typography on the web, in which I noted, "…if your knowledge and understanding of typography isn't up to par, you risk damaging the user experience of your work. Typography is the foundation of design; it alone can make or break a website." I encourage you to give that piece a read before continuing on here, as it will provide some insight into the whys about typography… it's time to look at the hows now.

Lesson 1: Typography Transcends Mediums

This article may be called "Three Lessons In Using Type Effectively In Web Design" but I must emphasize that typography on the web is not really all that different than, say, in a novel. Of course, there are some differences, but the underlying principles are fairly consistent.

Learning about typography as a whole is valuable to know. We are at the point where (almost) any decision we could make with typography in print, we can replicate -- and enhance -- in web design. We are getting closer to breaking through technological limitations, and the only thing standing in our way is our imagination and creativity.

Print design (poster, left) and web design (website, right) are at the same point of capability.

Lesson 2: Typography Is About Communication

The most important thing to remember is that typography is all about communicating -- be it an emotional, a concept, an idea, or a literal message. Selecting a typeface to appropriately convey what is important about the content is what typography is all about but choosing a typeface can be challenging. As Richard Hendel writes in On Book Design:

"Although some designers claim to be able to design a book in all its essentials before choosing a typeface, I cannot. The typeface I use influences so many other parts of the page that until I can settle on which to use, I am unable to carry on. It is the basis for everything else."

In a setting where the written word contains literal messaging, it would be more appropriate to choose something legible and readable. If it is long-form text, such as an article, choosing something with even character shapes is a good idea. Compare the following two examples below.

The block on the left, set in Source Sans Pro, is more appropriate than the flourished text on the right. Typekit says on Source Sans Pro, "Its letterforms are wider and more widely spaced, more modest than monumental, which makes sense in a body text setting."

While maintaining a block of text's literal meaning is appropriate to highlight the content's meaning, sometimes it would be more appropriate to highlight it's emotional (or abstract) messaging. Acclaimed graphic designer David Carson once typeset an entire interview in a magazine in Dingbats -- a typeface made of icons and symbols, not letters and numbers. Carson's interpretation was to make the text unreadable, as he felt it conveyed the same boring nature as the content. Carson decided the interview communicated more emotionally than it did literally and chose to express it as such.

Lesson 3: Typography Can Have Personality

One of the most common pitfalls is making type choices too boring. Yes, Georgia is an excellent typeface that renders excellently on screens, but could you use something a little bit more uncommon instead? How about FF Meta Serif? Or maybe FF Tisa Pro?

Typography will breathe life into design regardless of what typeface is chosen. How should the piece be known? Will you use Helvetica, a boring, seen-everywhere typeface that is illegible at small sizes? Or will you perhaps use Adelle Sans, a typeface with interesting curves and edges that gives its letterforms unique and playful angles? The choice is ultimately up to you to make… so much power!

Always be adventurous

Services such as Typekit and Cloud.typography make it easier than ever to inject wonderful typefaces into your web design, so don't be afraid to  branch out and try new and interesting type selections.

What makes designing on the web so much fun is how dynamic and versatile things can be. Unlike in print, you have the ability to swap out and change font choices in a live setting, and see what works best. So go ahead and try type that you have never worked with before, be adventurous!

Filed in // Design