The way you say some thing is just as important as what you say.
It is therefore unfortunate that even today a number of designers continue to paint every ‘elegant’ message with Monotype Corsiva and every ‘fun’ announcement with Comic Sans.
Typography, the art and science of typefaces, is one of the most important aspects of web design and has roots in print and graphic design dating back to the 15th century. Yet despite typography’s rich history and undeniable importance, many designers continue to pay little attention to it.
Let’s not blame it all on designer laziness. To accommodate the limited number of typefaces available to end users, website designers could previously only utilize a handful of typefaces without using graphics (which, of course, presented SEO problems). But with services like Adobe’s Typekit, we now have access to hundreds of typefaces that we can use to our heart’s content and deploy generously across the web. To benefit from the possibility of using real fonts in our work, we clearly need to get savvier with typography.
Typography = Pretty Font. Right?
There’s a gross misconception that typography is simply ‘font choice’.
This oversimplification undermines how important the right typeface is for making text pertinent, effective and persuasive. As designers, we tend to be sensitive to all aspects of the visual medium including typography but we sometimes tend to overlook just how important the text packaging is.
Typography entails everything from typeface choice (including leading, tracking and kerning) and the color palette to layout and design integration. It can make or break the overall effectiveness of any communication message and directly impacts audience perception, interest and level of engagement. To deliver your message successfully, you need to choose typefaces that bridge the gap between your graphics, your text and your objective.
Typography = Visual Summary
Typography can be viewed as visual summary. The sense and mood of everything from an isolated word to extensive blocks of text can be effectively visually expressed through the right typeface.
The reverse is also true: You might draft up the most seductive copy in the history of landing pages. But it would fail to be persuasive if it’s delivered through a 22 point bright yellow Lucida Calligraphy.
It’s not that I have anything against the typefaces I mentioned even if I am admittedly pretty vocal about my dislike for them. I have just seen them abused so many times and so incessantly that I automatically find myself repulsed whenever I encounter them. It would be unfair to call these typefaces inherently bad though. They can certainly be used successfully if they are applied appropriately and effectively to generate a desired effect.
It’s time we all learned that there is more to picking a typeface than choosing the first typeface, or the one that’s most frequently used, in the drop down list of your design software.
Here are five good questions you should ask yourself before selecting the typefaces for your brand new website:
Typography Rapid Fire: The 5 Question Process For Finding The Right Font
1. Purpose and Mood?
Typefaces have personality. Do you want a typeface that is the font equivalent of a floral shirt and Bermuda shorts or a crisp business suit? Or do you want to mix and match for the various sections of the content?
Remember, you can only choose the right typeface if you keep the nature of the content and target audience in mind. But since using Times time and time again (see what I did there?) gets boring and a fun new pictorial font can easily outlast its welcome, the key is to strike a balance between the trusted classics and the snazzy, stylish and novelty-laden personal favorites.
Hierarchy wise, for body text, it’s always advisable to use a non-gimmicky, legible and formal typeface like Helvetica or Garamond. Sure, there’s nothing wrong with a bit of character but be wary of going overboard aka using highly characteristic display fonts (think Ravie in the image above) for extensive text. If you want the typography on your website to stand out a little from 99% of the web, try using a distinctive yet sufficiently low-key typeface that does not upstage the actual content.
You can get more creative with headings, banners and text bites by using your favorite display fonts. But remember that most end-users only have a limited number of standard typefaces installed on their computers. So if you want your supercool and crazy creative typeface to show up exactly like it is on systems worldwide, convert it to a graphic or source it from a web font service.
2. Serif or Sans Serif?
A quick way of organizing possible typeface choices is to use the most widely used typography categorization: serif or sans serif. Most of us will know what these terms mean but, for the newbies, serif fonts have ‘feet’ at the ends of the letterforms while sans serifs don’t. You will be able to see this difference clearly in the snapshot above which includes the classic serif font Garamond and the sans serif Admisi Display.
They say that serif fonts provide continuity and engagement, and therefore improve readability but detractors (read: sans serif supporters) call that a typography myth. Generally serif fonts are more traditional and ‘old style’ while sans serif typefaces are seen as modern and futuristic. However, these broad adjectives can easily be challenged with typefaces from both categories that defy such classification.
Whether you choose Serif or Sans, there are a plethora of great choices within both categories. To learn more about type classifications, start by looking up commonly used categories like geometric, humanist, old style, modern, transitional and slab serif. And you can always come up with your own groups and labels for your collection of typefaces. That way you can get more organized and easily reach out for the type of font you need.
3. Corresponding or Contrast?
When two design elements are placed next to each other they only create a remarkable impact if they correspond or contrast. In the current context, this basically means that multiple typefaces should only be used together if they match (correspond) or present an engaging divergence (contrast).
However, if you use two typefaces that are significantly similar yet different enough to cause confusion over whether they are the same or not, you distract the reader from what’s really important: the content. An example of this would be picking two similar typefaces from the same category- geometric or old style for instance.
Of course, there’s rarely any need to use multiple typefaces if one will do. So if you are happy with how your web page looks using a single typeface, there is no need to introduce another just for the sake of it. By using different weights (Bold, Regular, Light etc.) and styles (Italics, Condensed etc.), you can have effective variation using the same typeface so it’s always useful to work with typefaces that come from a large extended type family.
4. Experiment or Fall Back?
Over time, you will start building a collection of typefaces that have served you well.
These could be the top 20 typefaces taken straight from FontShop’s 100 best list or they could be the result of your own personal experience. Either way, building this list is essential as you will need it in times when nothing seems to be working. There’s a reason why typefaces like Helvetica and Univers are so widely acclaimed and it has to do with how versatile, robust and reliable they are. You can use these trusted typefaces like a safety blanket: you can always return to them with peace of mind in case the cool new font you downloaded from an independent typeface designer’s site or a flashy display font double cross you and threaten to put your design in jeopardy.
That’s not to say you should always play it safe. The biggest risk is not taking one and there are always opportunities for experimenting. So feel free to try out new typefaces that are versatile and reliable while adding something refreshing and individualistic to your list of favorites. Remember, everyone has access to tried and tested ‘best of’ lists. But only the best designers possess the skill, knowledge and intuition to successfully utilize a new or unconventional typeface.
5. And Finally, Follow the Rules or Break Them?
Sometimes, the process means nothing if the result isn’t worthy.
At the end of the day, we utilize typography to effectively convey written communication. If you think that purpose is best served by using a display font across the entire website or using a variety of sans and serif typefaces in conjunction, go for it! But as you can probably tell from even the descriptions, these instances of creativity are very volatile and need to be dealt with very carefully. Only when you are knowledgeable about typography and familiar with its conventions and rules are you in a position to break the existing rules to successfully produce something new and compelling. Typography can be approached both systematically and intuitively and there are no hard and fast rules, just guidelines. But you have to know your basics before you can get innovative.
To answer the question posed in this article’s title, ‘What’s your type?’ My go-to typeface is Avenir.
I find other fonts to be beautiful, artsy or highly functional and use them abundantly but I have grown attached to Avenir. And whenever I’m choosing between the hundreds of typefaces I have unwittingly stored on my system, I follow my personal motto of ‘when it doubt, use Avenir’. We all have a typeface or two that we use frequently and keep going back to- and I would love to hear about yours.
What’s your type? Sound off in the comments below!
- Conversion Wireframing: A Revenue Oriented Design Process - June 1, 2018
- Designing for Subscription: 6 UX Musts for Increasing Sign Ups - January 9, 2018
- Are You Losing Money Due to Poor UX? Fix These Nine Mistakes and Profit - November 2, 2017