Typography Tweaks for Better Web Design and Response01 September 2019
One thing that holds true with both print and web copy is when it is done correctly, it sells. In fact, a disorganised or poorly designed website with effective copy or text will sell more goods or services than a highly organised, well-designed one will with no copy. Since the majority of websites today contain 90% to 95% text, we can say with confidence that 95% of web design is typography.
While liberties can be taken with certain parts of your site’s text, you must take special care with its body copy. Making the latter text difficult to read or understand is counterproductive to selling. Your prospects may turn elsewhere for their needs. It is important to take heed of the fact that all typography rules do not help increase your sales. For this reason, we are not here to teach you these rules. Instead, we want to share with you how you can use typography to sell your products or services. The following are some of the best ways to accomplish this:
1. Use the Right Type of Font
At one time, it was thought that there was a difference between using a sans serif or a serif font in web copy. Today, this is not so, which is shocking to some old-timers.
What is important, though, is to use a font that is designed for use on desktop, tablet, smartphone and laptop screens. Check the letters “o” and “a” or other short lower-case ones to ensure that they are not too short in comparison to taller lower-case letters such as “b” and “d”, which are naturally taller. This is an x-height metric measurement. The desirable goal is to have good contrast between the two heights. For example, Alegreya is an attractive font but is more difficult to read than the Merriweather one is.
In addition to the above, you want to select a font with the right personality for the audience you are broadcasting your message to with your copy. Merriweather is straightforward, Arial is modern and Alegreya is bookish just for three examples.
2. Drop Caps Increase Readership Effectively
The drop caps are just large capital letters inserted at the start of important paragraphs. They are the length of at least two lines of text. Insertion of just one drop cap at the beginning of your body copy can up the readership by about 13% according to “Oglivy on Advertising”. Just remember to make your drop cap stand out clearly.
3. Make Your Copy Large Enough for All to Read Easily
Due to the fact that many of your web visitors will have some level of visual impairment, you need to choose as large of a font as reasonable for your copy. Many web designers are stuck on using 16px font or smaller, which is about the size of print in some books. By doing this, they are losing their clients valuable readers. Anything smaller is too tiny for most people to read without straining. Going above 16px is advisable but do not overdo it either.
4. Use a Vertical Grid That Provides a Line Height of 135% to 150%
For ease of reading, your copy needs to be placed in a consistent vertical grid that provides a line height of between 135% and 150%.
5. Stay Away From Unconventional Formatting
Do not go overboard with typographical enhancements in your copy since these can be counterproductive to your goal. We offer the following guidelines to help you prevent this:
• Only underline to show clickable links.
• Avoid right-justified or centred text in your body copy.
• Be consistent and conservative. You should use coloured text with extreme caution, as it can be confused for clickable links. Do not change between fonts or font sizes for no logical reason. Many times, more is less aesthetically.
• Always use a dark font on a light background for easy readability.
• Do not place text over patterns or images.
• Never use low contrast to try to highlight your text, even if it is trendy. Pale blue text on top of even a lighter background will make your copy difficult to read for everyone.
Use the above information to create a website with highly effective typography for selling purposes. Analyse your present methods and tweak them where necessary.
Optimized by: Netwizard SEO