By definition, typography is the art and technique of arranging type to make written language most appealing to learning and recognition. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs.
In other words:
When comparing typography on a website or other written outlets and compare it to a spoken commercial or sales pitch, typography can make the difference between a monotone voice reading something possibly well-written,
but missing a wide variety of audience members due to completely ignoring the power of presentation and a well-voiced announcement or interesting way to keep a product on people´s minds.
What we as consumers react to is association
If you make something sound and look interesting, we are going to pay attention.
If we appear to be bored with it while presenting it, how can we expect anybody to go for it?
It is therefore of utmost importance to understand exactly how typography can effect a reader emotionally in order to guarantee getting the most out of a presentation in terms of making the sale.
In everything that you do, remember:
‘I’ve learned that people will forget what you said, people will forget what you did,
but people will never forget how you made them feel.’
~ Maya Angelou
Whether or not a statement written appears credible to a reader depends on how “serious” or “legitimate” a font makes them feel. In case of doubt, using the default version is always the best bet. But accentuating what needs to be highlighted has a big effect on where the reader´s eyes will wander.
Remember:
A badly fonted article will cause you to lose readers and lower your conversion. A well fonted part of an article can cause readers to pay attention to the part that is ccentuated while ignoring the other areas. So use a larger font when giving people a reason to buy your product or a special endorsement from someone credible. Or when adding a little known fact.
If nothing stands out, a reader can also “get lost” in the information and wind up leaving a website before making a purchase. Therefore it is important to not overkill with information. Many sites have done well linking to a “read more” page and keeping it short on the sales copy.
Steve Jobs made a world of diverse typefaces available to everyone
His old business card has a similar font as Rebok.
He continues:
None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac.
It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts.
And since Windows just copied the Mac, it’s likely that no personal computer would have them. If I had never dropped out, I would have never dropped in on this calligraphy class, and personal computers might not have the wonderful typography that they do.
Of course it was impossible to connect the dots looking forward when I was in college. But it was very, very clear looking backwards ten years later.
Typography can be looked at as a mixture of bodylanguage and tone of speech while font size is similar to audio levels.
So what is the general rule?There is none.Typography is meant to fit what you want to express. When calling for action, keep things short and compact. In your font as well as your wording. Be voiceful, but not too intrusively loud.
Never seem desperate.Authoritative tones are being supported best by a little bit larger than average font sizes, but different sizes also impact differently according to the type of fonts you are using.Making the explanations or details not necessary to push a sale a little more “boring” will help move right into the ordering page.Here is a great example for a page that works:
(Note also the location of the Shop Now button)
Arial, Verdana and also Tahoma seem to work well. Keeping the font size for the regular text between 12 and 14 pt. also appears to be the best bet.
Whenever you get to the point and lead people towards the purchasing button, it is important to increase in size, but not to the point where visitors feel like you are trying to overpower them.
One of the more famous examples for “what works” would be the Belcher Button:
The same way it works on the American Express page, this particular button has been proven to work best out of more than 1,000 variations.
You can add more to it when using it:
In many studies of corporate and e-commerce sites, we observe users ignoring the very page sections that have the most business value because the site is selling them too hard. Learn from the Census Bureau’s mistake:
A great example of typography gone wrong is from their U.S. Census Bureau website study where 86% of the readers tested were unable to find the U.S. population number on the top right hand side of the page.
The reason: The font looks like a sales pitch and we have learned to ignore those.
Try a softer approach with more straightforward, user-centered information.
Let go of the fancy formatting and the fancy words.
(Source: Nielsen Norman Group)
As we are learning to read lines as they are intended to, times change so a more conservative approach is often useful to preserve long-term credibility.
A mix of yellow and red is often advised to use in promoting quick decisions in terms of making a purchase has been overused to where those colors are still recommended to a degree, but the brightness and frequency of usage should be adjusted and toned down.
Fast food and soft drink companies seem to do very well with it.
Here are the most common emotions associated with each color:
Brown – warmth, coziness
Black – power, sophistication
Grey – somberness, stability
Blue – trust, confidence
Red – excitement, passion
Pink – youthfulness, romance
Purple – luxury, wisdom
Orange – energetic, vibrant
Green – natural, growthite
White – purity, simplicity
Yellow – happiness, joy
So what works for McDonald´s and Coca Cola may not do well for a website explaining investment opportunities in new hospitals.
But more than anything, it is important to place the right fonts in the right locations of your site which is why the American Express site has been a great example.
Compare their homepage to this study where the eye wanders:
The areas users looked at the most are colored red;
the yellow areas indicate fewer views, followed by the least-viewed blue areas.
Gray areas didn’t attract any fixations.
Those areas do not need to be used necessarily for the sales button, but placing important messages in them leading your readers there can also be a good bet.
In closing, here are the excerpts from a study run by The Wichita State University Psychology Department:
Sans Serif Fonts. Users preferred Sans Serif fonts for Website Text (62%), Email (60%), and Online Magazines (56%). Sans Serif fonts were least preferred for Digital Scrapbooking (32%), Computer Programming (34%), and Math Documents (36%).
Uses for Serif Fonts. Users preferred Serif fonts for Business Documents (71%), Website Text (67%), and Online Magazines (63%). The three uses that were least associated with Serif fonts were Scrapbooking (28%), Children’s Documents (34%), and E-Greetings (38%).
Script/Funny Fonts. Digital Scrapbooking (61%), E-Greeting (60%), and Website Graphics (53%) were rated as the highest uses for this group of fonts. The Script/Funny fonts were not preferred for Computer Programming (2%), Scientific Documents (3%), Spreadsheets (3%), and Math Documents (3%).Modern Display Fonts. The three uses rated the highest by users for Modern Display fonts were Website Graphics (47%), Website Headlines (44%) and Website Advertisements (44%). The uses least often chosen for this group were Online Tests (9%), E-Books (9%), Spreadsheets (10%), and Online Assignments (10%).
Monospaced Fonts. Users chose Technical Documents (45%), Computer Programming (40%), and Math Documents (40%) as the highest uses for Monospaced fonts. The uses receiving the fewest votes were Digital Scrapbooking (18%), E-Greeting (21%), and PowerPoint (22%).
So go ahead and try things out. Keep doing what works and change what you think can go better.
But as I have stated, there is no one specific formula fitting every site.
But if you look through above guidelines, you will increase your sales or get closer to your goals. And whenever you experience something not work, revisit our post and adjust what you think needs tweaking.
Even the smallest changes can make a huge impact. And once you know you are truly connecting with readers the way that it helps your business or organization, you know you are on the right track and every step you take will be about improvement and not the need to completely replace something that simply didn´t work and wasted everyone´s time and patience.
Thank you for reading. Feel free to leave your questions or comments below!
