Remember when your best friend told you about that hot new Italian restaurant in town?
They’d been droning on about it for weeks.
Chic décor. Decadent cuisine.
So you decided to see what all the fuss is about.
A waiter guides you to your table.
You nose around. Yep, cool crowd.
This is very you.
And then you lift up the menu ..
What a vain, popinjay of a font. What a chintzy menu.
If the food is this self-opinionated, you’re in the wrong place.
You make your excuses and skedaddle.
You won’t be coming back.
Okay, I’m not talking about a restaurant here, although this did happen to me once.
I’m talking about how websites often get everything right — Tasty design. Sumptuous content.
Then spoil the whole experience with the typography.
And despite all the selfies, TED Talks and cat videos, the web is still 95% words.
When we visit a new website, our eyes flit across the screen like autumn leaves blown across a driveway, asking ourselves:
- Does the site live up to its search engine results billing?
- Does the imagery and content look and feel professional or personal?
- Is this the place to solve our problem/buy the thing we are looking for/learn something new or be entertained for the next few hours?
Does the content/products/service look like it comes from a company or person we can trust — that others have trusted?
We answer these questions fast, with a surfer’s intuition burned so often as to ‘err’ on the side of caution.
And the clock is ticking ..
Not only does the page have to load fast (according to Kissmetrics, half web users expect a site to load in 2 seconds), but you’ve got to get your award winning pitch over — typically in words — across in the remaining 8 seconds or so.
And the question that drives all these micro-judgement is this one:
Is this website or blog worth reading?
Attention is the reader’s gift to you.
Should you fail to be a respectful steward of that gift — it will be promptly revoked.
And if the font looks cheap.
If the body copy is a forbidding wall.
If there are too many clever pop up pick me distractions getting in the way of what might be really great content, that really great content will really go unread.
And Google is watching.
Ranking sites not on their aesthetics but on things like bounce rate and dwell time, signals not just of quality content but a quality read.
SEO optimised content might be King, but the Queen is a reader.
And that impatient, time-poor, royal reader is mobile.
SO find that sweet spot where the font, layout, and design work together to serve up the perfect mobile reading experience and engage your website visitors with something you know they’ll love to read.
Fonts influence you.
They evoke particular experiences and associations.
They have different personalities.
They create trust, mistrust, give you confidence.
Make things seem easier to do or make a product “taste” better.
They have their own history, personality and style, their own quirks, as well as their own rules.
Typography helps text do its job: tell a story, sell a product, impart an idea.
But it also appeals affects how we feel.
The font you pick will only be the right font if it both conveys information and touches the emotional core of your website readers.
And the quality of your site is determined largely by how the body text looks.
Typography works alongside verbal language to create, enhance and alter meaning.
It sets the tone for entire experiences.
And when it’s done well, no one notices.
Like the editing of a well-made film.
Or the way furniture is arranged in a room.
People will always say, that was a great movie, or, this café is really nice.
Yet, for most, typography is an afterthought, if it is even thought of at all.
Marcin Wichary, another typographer, demonstrated twenty subtleties hidden in a paragraph:
Twenty typographical details he found gorgeous.
I find them gorgeous too.
And it's the BIGGEST upgrade to a site that money can buy.
Of course, you pay an agency for a professional website or an ad, not the drop—caps.
And ok, you’re not a typographer.
Or a web designer for that matter. (That's why I'm here!)
But at the very least you should invest the perfect font.
And you should optimise your content for the perfect mobile reading experience.
That is, if you want to keep your potential clients reading.
Let’s look at a few examples:
Huffington post and Buzzfeed (and many others) both use ‘Proxima Nova’ for all their copy and content.
Just image this font, ‘Griffy’, being used on the Huffington post — what would readers say —
How would they feel?
Incidentally, Lapham’s Quarterly probably chose this font as much because it ‘talked’ perfectly to their rarefied and exclusive customers, as much as the fact that the font has one rarefied and exclusive twist to it.
As copywriter and editor, Christina Vasilevski, points out, notice the Q:
As she says:
I want to talk about a new rule I’ve decided upon for fonts: all fonts must have at least one extravagant or distinguishing feature or stroke… Here, I love the tail at the end of the capital Q. Look at that thing! It stretches out and goes sideways like nothing else in the font, yet it still looks dignified and in keeping with the rest of the alphabet. Capital Q, you are the brave peacock of the Caslon typeface, and for that, we salute you!
The typographer — or web designer — picked a font that appealed to their refined audience and had a distinguishing characteristic that was perfect for the brand. That win-win isn’t common, but is worth looking out for.
Fonts can also be playful.
Thanks to Chiara Aliotta, Italian designer and self-confessed typography addict, whose post - ‘Evoke emotion through typography’ — featured this example (please don’t ask me what font that is):
Using offbeat fonts in unexpected places can surprise and amuse — while also serving a practical purpose.
Does the sticker make you smile and the action is more fun to perform?
It's a great idea.
Fonts can change our expectations.
Hat tip to ‘When Typography Speaks Louder than Words’ by Carolyn Knight and Jessica Glaser, authors of The Graphic Design Exercise Book, for pointing me in the direction of London based hand lettering artist extraordinaire, Alison Carmichael:
Fonts can tell the naked truth about a brand — if they chose to use it.
This one from a very amusing series of ‘honest logos’ by innovative Swedish graphic designer Viktor Hertz is worth checking out.
Thinking of users as readers who need to connect emotionally with the typeface means taking traditional customer personas into new territory.
So let’s pick your perfect font with the help of Reader Personas.
In a nutshell, reader personas are working portraits of your target audience.
- Who they are.
- What they do for a living.
- What content is your client disseminating? or What type of books and magazines do they read?
If you know your customers are Hunter S. Thompson aficianados, the design, content, and the font you pick can and should reflect those customer insights.
A reader persona is your golden ticket to finding the kind of font you need.
What you are after with your font choice is a font that your clients find easy on the eye.
A font that is somehow familiar.
A font that they would choose if they were you.
Here are six good questions to ask of your final font choice:
- Does the mood of lettering match the words being read?
- Is the main body copy readable and legible at various modular sizes?
- Has a clear contrast and hierarchy been established between headers, quotes, captions, navigational aids, side notes and paragraphs?
- How will this typeface pair with colour or images that you know you will need to use?
- Does this typeface offer the full variety of styles and weights?
- Does this typeface provide Open Type features such as ligatures and true small cap characters? (Note the Twenty subtleties hidden in a paragraph.)
The importance of typography was inspired by a 2015 video by Tim Brown.
In this video, Tim argues that the goal of body text to be ‘invisible’:
Body text is everywhere.
It’s the majority of text you want people to read.
And now you know the power of this subtlety.
So it’s shocking when we see typefaces eliminated from mobile experiences, which are increasingly people’s primary computing experiences.
A Typography First approach is how text and page layout looks best responsively, and is the cumulative result of many small decisions — like the font in use, the font size, the line length (for example, the width of a paragraph), the line spacing and page grid structure.
It’s the result of more subtle things too ..
Like the style of characters chosen (some fonts offer many different versions of the same character), and the presence and arrangement of punctuation and every element in a site’s composition leveraging the Golden Ratio, from paragraphs to headings, lists, navigation, forms, and more.
As well as the spacing between and around those elements including the actual layout grid measurement itself.
It’s a method of designing from the content out, rather than the canvas in.
The most beautiful thing we can experience is the mysterious. It is the source of all true art and science.Einstein, Albert (1879-1955)