Ever wonder why some websites look so clean, professional and organized, while others look disorganized and messy for no apparent reason? The reason is often because of the typography. If you hire a trained designer for your site, one of their most basic operations is to make sure the way type is displayed on your site looks polished and professional. There are countless books and articles about the rules and history of typography, but today we are going to give you the bread and butter. If you cannot hire a professional designer, the following typographic techniques absolutely need to be implemented on your site. Follow these simple rules to make your site look cleaner, and increase readability.
The body copy on your site should be size 11, minimum. Size 12 will please even more guests.
Black text on a white background is the only typography color combination that will work for you 100% of the time. The title of your page is not required to be black text on a white background. The body of your text absolutely must be black text on a white background or include controlled use of very light shaded background to help certain copy elements stand out on the page.
Title Font Should be San Serif to catch the attention of the visitor
Body copy should be a serif font to improve readability and decrease eye strain.
Proper line height for professional web typography is 7 points more than the text height in your body copy. If you use size 11 for your text height, line height should be 18. If your text height is 13, your line height should be 20.
Your site should be designed on a grid, and typography is no exception. Use grid lines to break up and format text. Use columns as much as possible as they greatly increase readability (think newspaper). Do not be afraid to break up text frequently, as long as it is consistent with your grid.
Left justify your copy unless absolutely necessary.
Make sure the copy in your most important text and in headlines looks complete. It can be hard to avoid widows and orphans in your body copy, but it is imperative that you make sure they never show up in headlines or any copy that is given particular emphasis on the page.
Web browsers only use the fonts installed on each computer to view websites, not necessarily the fonts used to build the site. To ensure that your site maintains a consistent look, opt for standard fonts. To avoid any typography faux pas, use font stacking. It gives you the option to use any font you want, and also allows for back ups in case the visitor doesn’t have the specific font you give first. An example would be like this: “font: Arial, Futura, sans-serif” which says that you want the page to display Arial for the text, and if that is not available on the visitors computer, you want the page to use Futura. If for some reason that isn’t available, it displays a generic sans-serif font.
How did you choose the font and typographic style on your webpage? Did you do some research on typography before you started going to work, or did you leave it up to your designer? Having a quality, money making website requires an exceptionally large number of skills. If you can’t do it on your own, get in touch with us.