Website typography is a critical component of good web design. It’s always been a prevalent factor in any design consideration – think back to old-fashioned movie advertisements and the big, garish lettering they used to use – but, with more people looking to the Internet for answers and services than ever, great typography can make or break a user’s impression of your service. This rings particularly true if yours is a new website, as established competitors can and will already have their own share of the market.

1. Standard Typeface for Text

The vast majority of websites use the same typeface, generally Arial or Helvetica. These are easy to read in large blocks, and are actually the standardized typefaces used for academic publications- they don’t accept scientific papers written in comic sans.

2. Varied Typeface for Titles and Headers

For your headers, however, you can afford to tailor your typeface to the service you’re offering. Do you run a funeral service or high-end catering business? A header using a large, looping cursive-looking typeface will bring life to your web page and separate you from the pack.

3. Color Contrast

[tweet_dis inject=”@donnaamos”]Make sure that you’re abiding by the rules of proper color contrast when working on your website typography. Colors with similar hues are easy to read if you have great vision, but people with color blindness or other visual impairments can be alienated by difficult-to-read text. First and foremost, your text needs to be readable. The general rule is a very light background with the text itself in a dark color to maximize the contrast.

4. Color Complements

Although contrast is best, you don’t want the colors used for your typography to clash, or to have specific connotations. While red and green might seem like a great idea if you’re operating a florist’s website, users tend to associate those colors with Christmas, which might not be the market you’re aiming for. Red text over a green background is also very difficult to read, despite the high contrast between the two colors.

5. Text is Best

Some web designers make the rookie error of forcing the web page to be an image of the desired layout. That means the text, the photos, the color scheme and everything else that goes into the design of a website are all, in fact, just one image or, even worse, a multitude of images. Images consume your users’ bandwidth and are hard to edit should you need to alter your site (which you will need to do as time goes by). Use text wherever possible to minimize load times and maximize the appeal of your web page.

6. Character Dispersal

This tip is a bit more technical than the others, but no less important. Your website is not an academic essay and does not need to contain enormous blocks of text. Similarly, you need to avoid your text being too minimalist and risk your users leaving the site uninformed and underwhelmed by your text-less website. Optimizing your website typography means limiting your text to between forty-five and seventy-five characters per line, depending on the size of your typeface and how information-dense your text is supposed to be.

7. Size

Similar to, but distinct from, character dispersal is the size of your lettering. The standard font faces – Helvetica and Arial – read best in sizes 11 to 14, but that’s only one aspect of the aesthetic appeal of your website. Your headers and titles need to be of a larger size than the rest of your text to draw the eye of your readers, ensuring that they fully understand the information conveyed on your page.

8. Space Between Lines

Consider the baseline of your font, the line where the letters rest. Is the baseline sufficiently distant from the midline of the line below? Do the descenders, the segments of the letter that protrude below the baseline, interfere with particularly tall capital letters? The space between your lines needs to be sufficient that the letters do not interfere with each other, but small enough that your text reads easily. You need at least a few millimeters between your cap height, the top of your tallest capital letters, and the bottom of your descenders to maximize the readability of your typography.

9. Space Between Characters

The distance between your characters, depending on their size, greatly affects readability and should be taken into account when considering the typography for your site. For body text, you generally want a distance of only one or two millimeters between characters within the same word, or a distance of five millimeters between words. For titles and headers, you can expand this distance as long as you do so proportionally.

10. Consistency of Aesthetic

The key to the marketing of your site is the consistency of your overall aesthetic. The typography of your website needs to be the same across all pages to ensure ease of use and to make sure that your users don’t get confused by sudden changes in layout. If you use a particular font and size for your headers and titles, make sure it’s the same on every page. If you have an overhead banner with your business’ logo and name in a particular typographic style – which might mean employing the services of a graphic designer – that banner should be present across the entire website. The consistency of the aesthetic when it comes to website typography reassures your web users and establishes you as a distinctive, memorable web presence.