81% of shoppers conduct product research on the web before making a big buying decision. In many of these cases, customers first make their way to a business’s website to get a better idea of the business and its offerings. They go through the product information on the site, ratings and reviews to find out whether buying that particular product make sense or not.
This puts the onus on your website to convert potential customers into paying customers.
The fact that your website represents your business means it’s imperative that the site leaves a good impression on its visitors. It is a site’s design that plays a huge role in creating this impression.
One important design element that improves, both, the visual and functional appeal of a site is typography. If you use it right, it can enhance your website’s design like nothing else can.
So, what is typography?
“Typography is the art and technique of arranging type in order to make the language it forms most appealing to transparent learning and recognition. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).”
Here are 5 pointers to use typography in a way that makes your website more interesting and appealing to your visitors:
One of the critical focus areas of your designing endeavors should be website readability.
Large portions of the website are taken up by text. So, it’s important that information provided on the website has a high degree of readability.
Make sure the website visitor is able to read the content effortlessly without any problems whatsoever.
Poor readability will turn off your readers.
Here are a few thumb rules for ensuring better readability:
- User-Friendly Headers – Header size is as important as size of the body text. Extra-large headers can be a distraction for a visitor and really small headers will not draw their attention. This is why your headers must be perfectly sized.
- White Space – A cluttered page is unattractive and doesn’t encourage a reader to go through the content. White space helps offset large amounts of text, organizes content and de-clutters it; this makes it easier for the visitor to read and absorb information.
- Consistency – Consistency contributes to the readability of the content. All headers or body text of equal importance in the hierarchy should be of same size, color and font.
- Use of Separators – Separators help divide unrelated content into sections. Dividing content into different sections increases its readability.
Present information on your website such that it is organized, uncluttered, readable and easily accessible to your visitors.
It takes no more than a split second (50 to 500 milliseconds) for users to form an opinion about your website.
As per statistics:
- 75% of users admit to making judgments about a company’s credibility based on its website design (Stanford Web Credibility Research)
- Websites that are perceived as great looking are also perceived as usable and trustworthy (Harvard 2013)
These statistics are reason enough for you to make your eCommerce website as aesthetically appealing to your visitors as possible.
When visitors open your website, they notice the page as a whole; this includes structure, colors, spacing, symmetry, text (amount), fonts, and more. Your typography must seamlessly align itself with the design of the page layout and enhance its appeal.
If your website is not visually attractive, your website won’t convert as much as you hoped it would.
3. Measure and Leading
In typography, measure is the length of your line of text. For a reader, long or short lines are distracting. If the lines are too short then the text becomes disjointed; if they are too long, the content loses rhythm as the reader searches for the start of each line. For multiple columns, the ideal range for measure is between 45 – 75 characters, including spaces. For single-column design, 66 characters are considered ideal.
The leading (or line height) is the space between two lines. Usually default leading works, but there are times when leading needs to be adjusted. Generally, if the measure is wide, the leading of a text should be increased and if the measure is short, it has to be decreased. For optimum readability, the leading should be set 2-5pt larger than the type size, depending on the typeface. So, if you have set type at 12 pt., set leading at 15-16 pt.
Usually most web designers opt for common typefaces like Sans Serif, Arial, Helvetica, Times, Trebuchet and Tahoma for use on their sites. These fonts are considered easier to read. But, there is no harm in taking a different path and using typefaces that are not commonly used. There are plenty of new ones available on the market and many of them are readable as well.
Instead of picking the usual ones, experiment a little and use a combination of different web fonts for different web pages. This is one of the better ways of differentiating your website from that of your competitors.
A word of caution – pairing different typefaces can make your layout dynamic, but using too many can be distracting.
Also, make sure the font you select renders well on all browsers.
If you are worrying about the cost of using unique typography, don’t worry. Free software like Google Web Fonts helps you implement a set of beautiful and interesting typefaces into your site design without having to spend a fortune on licensing or worry about compatibility issues.
5. Tracking and Kerning
Tracking is also known as letter spacing. It is used to adjust the space uniformly over a range of characters. Tracking can affect the character density of the passage.
Kerning refers to the white space between individual characters or letters. Many fonts come with a default kerning value that is configured to make the space between letters look more natural.
There is a chance that amongst design elements like information, navigation and interface, you might forget to give typography the importance it deserves. This will be a cardinal error. These pointers will help you use typography to create designs that look great and present content in a way that is easier to grasp and comprehend for a reader.
Written by Lori Wagoner: Lori Wagoner is the Web Community Manager for Ink Colour, a prominent printing equipment retailer in the UK and authorised dealer of Dell Cartridges and other toner brands. Lori has blogged at Tweak Your Biz, Get Entrepreneurial and many other business and tech blogs. You can reach her @LoriDWagoner on Twitter.