Typography – The Secret Garden of Web Design

One of the greatest travesties I see in design is the dis-use and mis-use of fonts (heretofore known as typography) in web design. Working in our market, all-too-often we settle on the tried and overused basics of type within our designs. Arial, Verdana, and Times New Roman have been used ad-nauseum since the dawn of the internet and while we now have robust, open source resources to expand upon these typefaces, are we really using them to their full potential?

I’m not sure we are.

mix2Some of the latency comes from our clients, who may feel that the mixture of “wild, untried” fonts is unprofessional and some of it comes from us, not wanting to push against that wall where we expand what can be in this design element – either through fear that said client will vehemently reject our “artiness” or fear that we won’t be able to explain the purpose of mixing a typeface to boost the way in which we convey the brand’s message.

Typography and Typeface Selection Tells a Story

There are really two types of text we deal with in our work, banner text and body copy. And what we all need to remember is that first and foremost, typography and typeface selection makes up the vast majority of our web design (check out Oliver Richtenstein’s article on the subject). Because ultimately, we are in the business of trying to effectively communicate information to end-users. If the typeface is too small in the body copy, for example, we have lost an opportunity to successfully communicate our client’s message to the end-user (I’ll get more into that in a moment).

mix3At the same time, when we take a risk and select a typeface (or typefaces) for a banner value proposition or tagline that has some personality, we can visually reinforce the words being used and implement type as a visual medium that showcases the content’s tone and voice. And when done right, has as much power as a photo to drive the client’s message.

The “Rules” of Typography – Some Things to Consider

As I started to note above, body copy (a.k.a. the large swaths of content that displays within specific pages), display is probably the most important decision we as designers will make in our day-to-day work. Type that is too small, line spacing that is too tight, colour pairings (the colour of the font versus the colour of the section background) that are low in contrast impede the effective communication (readability) of the ideas presented on the page. In addition, type weight plays a major role – body copy typefaces should have the heft needed to allow for readability while not being too heavy, which can look muddled on an end-users screen.

darkBgType

Sites that do not take these objectives into consideration run the risk of losing end-users to a competitor who has given consideration to how the type looks and reads on any given page.

Typography Sets The Mood…Really!

As we move more and more into mobile environments and the overall platforms on which we convey information becomes smaller, typography helps us to convey an overall theme and mood of our sites in a way that can (and should, in many cases) allow us to replace traditional photographic images with type. The replacement of images with type allows for faster load times in mobile devices and strategic brand messaging to display in a streamlined experience, designed to get end-users engaged and taking clear and decisive action.

But how is a specific theme or message conveyed through type?

Type should be selected to reflect the business need of our clients. Is the client a highly-respected, firmly established business with decades of experience dealing in corporate law? Then the typeface should reflect this. As a designer, I would never recommend something too casual or whimsical for this client. But a client who is an up-and-coming criminal defense lawyer who is looking to make a splash and build his (or her) business allows us to select something more explosive and eye-catching.

type_DosDonts

Nuances within these two extremes also exist and allows us to assign specific typographic visuals to specific statements of purpose and the mixing of type. It is the job of the designer to decide the best strategy for these mixes to convey the brand message, while still maintaining readability and usability within a specific project.

mix

Education Through Example

Design can certainly do more to defend our work and the typographic choices we make to clients, but we need to be cognizant of how that discussion occurs. Are we, as designers using clear and compelling communication when explaining the reasoning behind type selection? When we do, we see less push-back from clients and more openness to taking such a risk. And the risk, in the end, is worth the discussion.

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