5 Tips For Better Website Typography
- Arjun Khanna
- June 06, 2011
The two most important concerns when setting type for a web page are legibility and readability. Visual cues that make the text stick together and flow are also important. Usually, as long as you aim for simplicity setting type for a website won't be much of a problem. Consider the next five tips when using fonts for a website and readers will appreciate it.
1. Three fonts per page is enough
When too many fonts appear on the same page, the reader gets the feeling that he or she is reading unrelated content. Even when the fonts used are very similar this sensation still persists. It may not be noticeable to you or the one who created the page, but for a reader who browses it for the first time it is. Stick to three fonts per page and make sure they blend well together.
2. Insert conspicuous headlines
Since they are the first elements of the text that readers rest their eyes on, headlines are extremely important for grabbing attention and encouraging visitors to read on. This doesn't imply that your headlines should be obtrusive or showy in a cheap way. Nor should they be excessively large. Good headlines are clearly larger than the text body and graceful: they attract notice because of their elegance.
3. Text body size 14 pixels or more
The text on a web page should be read with ease even by someone who doesn't have perfect eyesight. Size is not the only aspect of a typeface that makes it easy to read but it's definitely the most important. And text size matters even more today because many people browse the web with notebooks and hand-held devices that have tiny screens. Sure these users can increase size font with a simple Ctrl++ command, but it's always better when the font is legible from the beginning. Size 14 is suggested because it can be read comfortably by most people and it's always a good choice for default. However, even larger fonts may do.
4. Good contrast between text and background
After increasing the size of the font you must look at the contrast between the text and the background. Normally, you can increase readability by contrasting dark text on white or light gray background. You can also choose the opposite, light text on dark background. Note however that the second alternative can be sometimes painful to the eyes if the solid color is too dark. Vivid colors may not work well for backgrounds with lengthy text either – they tire the eyes and distract the attention.
5. Choose fonts made for the Web
There are many fonts out there but only few of them have been designed or optimized specifically for use on websites. Get the most out of the typeface you use by ensuring that it's made for the Web. Have doubts about a particular font? Just try it out in various web browsers and notice the differences. Note: some fonts may look very different on Mac compared to Windows, and vice versa; your best bet is to find a compromise.
Your Comments Are Valuable - Join The Discussion!
Find what you need.
Here's the latest in design.
Popular design tutorials.
We're on the web.
We are where you are. Discover great content by becoming our fan on Facebook, following us on Twitter, or subscribing to our RSS feeds.