This article contains some tips regarding typography as a part of your design. I’ll mention some good web fonts and go further into manipulating text to improve readability.

If the main thing your visitors will do on your website is read, then it’s best to have good web fonts and an easy structure.

Fonts

So what are these good web fonts I’m talking about? Why isn’t the default Times New Roman a good font to use on a web page? Well, it’s just ugly and hard to read on screen. Here are some fonts that won’t let you down:

• Arial, you can’t go wrong with arial. Classic.
• Helvetica, this one looks a lot like Arial and it’s older, too.
• Univers, isn’t spread as much as arial and helvetica, but it’s a good choice to put this one as a 3rd option on the list if you want arial-type fonts.
• Tahoma, this is a nice font and you can read it easily. This font is available on many platforms.
• Verdana, same as the above, availability is pretty good. This is favored by many web designers. It’s also the primary font of this site.

Don’t forget to use the one that fits your website, don’t just randomly pick a font from the list, experiment with content.

Font size is also very important, to offer good readability, have at least 14px font size for the main content.

Don’t mix fonts if you don’t know what you’re doing. Mixing fonts on a web page might result in a nightmare. It’s not easy for the reader to shuffle between multiple fonts, especially if they differ a lot.

Structure

When people view an article or an excerpt of it for the first time, they quickly read through to see if they’re interested in it, of course. What you should do is that you could make their quick read easier. So, at the beginning, try to provide as much information about the content in a short, classy way. We can assist this process further by using bold text. The reader will quickly find out what your article is about when the attention is drawn to those parts of the text. Here’s a quick SEO (Search Engine Optimization) tip: it’s a good idea to insert a few keywords in the content and wrap them in <b> tags. Only a few, though, otherwise it might bring a negative result.

Manipulate

You should always manipulate the looks of the text to fit your needs. For example, if you want to improve readability, you should manipulate the line-height property in CSS. I’ve set line-height to 150 % for this site, and it has improved readability as the lines aren’t so close the each other, so there’s some room for the eye.

Another thing you’ll want to look into is the letter-spacing property in CSS. Although this is rarely used, with some fonts and font sizes (especially with headers), manipulating the space between letters is a good idea, if you have a text logo, for example.

Don’t have too many words in one line. This of course, depends on the content,  but it’s advisable that you let the eye rest a while. Roughly speaking 8-14 words per line is fine depending on the word length and the content.

Summary

• Use fonts that are easy to read.
• Use fonts suitable for your purpose. Sometimes it isn’t that bad if you want to go with Times New Roman if the content is very formal.
• Make sure the content text has a decent, readable font size.
• Deliver as much information as possible in the first paragraph.
• Use bold text to deliver the message quickly.
• Look more into ways of making your content easier to read. Experiment with line-heights and other font-related properties.