Design

Published on November 22nd, 2012 | by Guest Author

3

Typography Practices For A More Pleasing Website

Typography plays an extraordinarily important role in quality web design. Creating a website that makes use of the wrong mix of font, background color, text color and spacing can lead to disastrous results even if what you have to say or offer is perfectly fine. Well designed and aesthetically pleasing typography -along with a pleasant overall look—naturally make viewers more comfortable with what they’re observing and thus more likely to pay attention to your content.

Royalty free stock from sxc.hu

With that, let’s look at some important points about website typography and related subjects to give you a better idea of what you should work towards or avoid in your own website.

Fonts

Not all fonts are created equal. This is obvious and means that different fonts work best for different uses.  When it comes to web page layout, some basic font tips to keep in mind are:

• Try to stick to a maximum of two or three fonts in any given page. Too many font changes distract from reading flow and can easily start to look unprofessional.

• Mid-sentence font changes are generally a bad idea unless you have a very good reason for them (quotes, text excerpts)

• Keep your fonts large enough to be readable without any problems or having to close in on the screen

• Stick strictly to default Sans-Serif fonts for most online text. Times New Roman works well for print but doesn’t translate into good readability on a glowing screen.

• Try to use default sans serif fonts as well. You want to be using a font that you know every computer will have the ability to read.

To clarify slightly, Sans-Serif fonts are those with straight design and no little “serifs”, or tails at the ends of letters. Examples of these include: Arial, Helvetica, Geneva, Verdana and Calibri among others. Serif fonts are those such as Times New Roman, Georgia, Times or Book Antigua.

There are arguments in favor of using Serif font because the tails on the text create easier to follow horizontal text flow. However, more recent studies have shown that many people prefer Sans-Serif once they become used to seeing it in digital media.

Font Size

A quick note should also be made on font size; keep your fonts large enough so that viewers with normal vision can read your text clearly at a normal screen to face distance of a couple of feet or less. Good font size will normally be between 13 and 20 pixels for most content text.

Contrast

This is a basic but extremely important point that is easy to mess up; you want to create good contrast between text and background on your pages. Ideally, you should use dark grey or black text over a white background. You can make small variations on a black over white text to background contrast but this simple color scheme is the most often used in the majority of well-designed websites. The worst contrasts are those that involve white text over a black background, overly light colored text on a white background or text that is too similar to its background. All of these can quickly start to irritate your viewer’s eyes.

Paragraph Width

Keep your paragraphs relatively narrow when filling your pages with content.  You don’t want a three word wide column of text running down the page, but you should also try to avoid overly long paragraphs that seem to go on forever. Ideal paragraph width should range between 45 and 75 characters (including spaces) per line for single column content pages.

Line Height

Line height is possibly even more important than paragraph width when it comes to well-designed typography. Your line height measures the space between the bottom of the text above and the top of the text below a given line of text. Ideal line height should be around 150% of text width (1.5 spacing). This creates much better readability for viewers.

White Space

Regardless of whether your background is white or some other color, you should use plenty of “white space” between paragraphs and content sections.  This creates simplicity, allows your viewers eyes to rest briefly and can be used very effectively when you’d like to space and separate your paragraphs and subjects into distinct sections. Text that is pleasantly surrounded by white space creates an impression of elegance and down-market value to a page’s layout.

Article by Thomas

About the author: Thomas is an accomplished writer with many years of experience within the technology industry. When he isn’t busy working on his book, you can find him reviewing mobile web designers in Chicago.

About the Author

Guest Author This post was written by the guest author credited above. If you have an awesome idea, or an article you'd like to contribute, or if you'd like to become a regular author, feel free to contact us.