We’re a visual society. And with our fast-paced lives and the amount of information we’re constantly barraged with, it takes a striking visual to get our attention. But you also need smart copy presented with good typography to back it up.

“Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated; for our harassed contemporaries simply cannot take everything that is printed today. It’s the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.”

—Emil Ruder, Typographer

That’s true both in print and on the web. For example, a website that’s beautifully styled, but has little to no copy will never sell as well as a website without style and strong copy. This is why great website design is 95% typography. So, while you can be flexible with how you present other parts of your website, you still need to pay special attention to your copy. Lets take a look at some tips to help out:

Use drop-caps

You’ve seen it many times before; in newspapers and magazines—a drop cap is simply a large initial capital.

David Ogilvy noted in his book Ogilvy on Advertising that his testing showed, “The drop capital increases readership of your body copy by 13%.” Similarly, in Web Copy That Sells, Maria Veloso reported that implementing a drop cap on 11 major paragraphs for one website contributed to a 251% increase in sales. That wasn’t always the case, drop-caps were originally an artistic device to make illuminated manuscripts look pretty by the medieval monks who invented them.

Implementing drop caps in your typography

Be careful to make your drop-cap clear. Once the drop-cap catches the readers eye, they needs to know what the rest of the word is to close the loop. And once they know the rest of the word, they need to know the rest of the sentence. And so on.

Use an appropriate font

Whether you use a serif or a sans-serif font, it’s totally up to you. Study after study shows that there’s little to no difference which you use. What is important is to choose a font with the right features.

Designed for use on a screen

Not all fonts are designed for web; some are designed to be ornamentation or headlines. When selecting a typeface, remember to check the x-height–the distance between the baseline of a line of type and tops of the main body of lower case letters. If possible, test your font choices on different devices, such as smartphones, tablets, and both a high-resolution and a low-resolution monitor.

Make sure it fits your design

Your font choice is like your website’s personality. Sans-serif fonts, like the Arial or Helvetica, often come across as modern and unaffected—and thus have the impression of being modern and timeless. You’ll see them often on technology-related sites.

A good example of the difference in personality between fonts is Google’s recent logo refresh. The new logo design comes off as more modern and fits their identity as a friendly online service provider much better.

Use a larger font size with your typography

A World Health Organization study shows that about 6% of North Americans have visual disabilities. Elsewhere in the world, that figure rises to over 10%.  This means that potentially one in ten people has trouble viewing your landing page–and the older you get, that percentage increases.

“Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.”

—Emil Ruder, Typographer

With all the more complex design decisions of landing pages to distract us, it’s easy to forget the simple fact that readership equals revenue. If our copy is hard to read, it won’t get read.

Your best bet when setting your font size is to avoid setting it with pixels entirely. The rem is a good unit for general usage, although for setting the document-level “master” font size percentages are the way to go. That way, you can rely on the user’s browser to pick a good size based on the screen resolution and dimensions.

Line height

All designers know the importance of white space. Often the difference between a good design and a great design is manipulating the white space on a page; especially when you’re dealing with large blocks of text. Too little line height is not a good thing. Too much of it can also be a bad thing. You want enough space between lines so that your text isn’t cramped, but not so much space that each sentence looks like its own new paragraph.

Avoid unconventional formatting

Underlining only for clickable links

If text is underlined on the web, that should exclusively indicates a clickable hyperlink. If you underline any other text it will confuse your reader and make your website look broken.

Avoid centred and right-justified body text

In Western society users spend up to two thirds of their attention on the left side of the page–a phenomena like the F-shaped reading pattern. Left-hand margins are used to anchor their eye-path; if they can’t find a consistent left margin they can’t read properly.

Be conservative and consistent

Coloured type should be used very cautiously, if at all, as it may be mistaken for hyperlinks. Stick with two or three colours at most; make sure the secondary colours appear only where they won’t look to be clickable: headings, quotes, longer lines of text, and so on. Similarly, don’t change between fonts or font sizes for no reason.

Don’t set text over images or patterns

This makes it almost illegible. When users see text superimposed on an image, their brains process it as part of the image, rather than as content—so they often don’t read it. This is especially true given that firstly, people often don’t look at images until the second or third visit.

Avoid low contrast

It may be trendy to use pale grey copy on an even paler background; it is however illegible, undiscoverable, and inaccessible. The lack of contrast makes it difficult to read even for fully-sighted customers.

—

For more help with typography, check out a website for designers to help match typefaces. And don’t forget to like this post if it helps.