Five Tips For Better Website Typography
3Website typography has become an art over the last decade as the Internet has grown in popularity, rising from a captivating tool to an essential daily resource.
Web designers have been forced to adapt and to make their content not just informative and topic-related, but to look appealing as well. In this article I will share seven tips for improving your website typography in order to keep it appealing and ensure that users will be attracted to your content.
Related posts:
- Fun Helvetica Posters
- Best Usable Free Fonts of 2011
- Free Fonts to Use in Your Design
- Ultra Thin Fonts: 10 Awesome Examples of Usage
- 10 Funny Type and Typography Tools
- 45 Useful Signature and Handwriting Fonts
- Nine Fonts to Use and Avoid in Design
Tip #1: Use Headings
Readers do not want to read through a lot of content to find what they are looking for, so make your page scannable by using headings. Headings can help you effectively organize your website typography and allow readers to find what they are looking for in a timely manner. Your headings should be separated with a larger font size and either numbers, bullet points, underlines or some other isolation tool. Using captivating or conspicuous headlines is a good idea too as you try to capture the attention of your target audience. Using a flowchart design may help you organize your content headings in an effective manner.
Tip #2: Illustrate Your Point
Illustrations, pictures, photographs or whatever else you find suitable, use visible props to break up long sections of text when creating and organizing your website typography. Relevant illustrations allow your users to visualize the information on the page and to more easily scan and locate the needed or desired material. Further, illustrations can break up the monotony of long blocks of text and can help capture the interest of your users.
Tip #3: Limit Your Fonts
The general rule is no more than three fonts per web page to avoid confusing the reader and simply looking tacky. Use one font for headings, another for sub-headings and kickers, and one more font for your main text. If you can get away with using only two fonts per page then do so because it will portray a clean, professional style.
Tip #4: Increase Text Body Size
Nothing will drive visitors away from your domain quicker than a main body of text that is too small to read. Keep in mind that many people to not have perfect vision, and even those that do can grow weary from looking at a computer screen for extended periods of time. Use a text body size of 14 pixels or more to ensure that your text is easy to read and appealing to your target audience. Remember that tablet computers and cell phones are quickly becoming the predominant options for Internet access, making the selection of an appropriate text body size more important than ever when developing effective website typography.
Image by shutterstock
Tip #5: Use Good Contrast
Make sure that you use contrasting colors for your background and text bodies. If your background is dark, you should consider using a white or light pastel color for your text so that it is easily read. Dark text should be used on white and other light color backgrounds so that your main body content can be easily read. Black is typically a poor background choice because the darker the background is, the harder it is on the reader’s eyes. Similarly, vivid background colors can be painful and tiring for the eyes as well, so it is typically recommended that web designers stick with light pastel, grey or white shades for their backgrounds.
Tip #6: Use Emphasis (Sparingly)
Web designers often run across bits of text of keywords that need to be emphasized in order to attract the target audience. Giving emphasis to a word or phrase is effective, but must be done sparingly and in a manner that does not interrupt the reader. The most common form of emphasizing a word or phrase is by putting it in italics. The use of italics is ideal and effective, but in situations where the use of italics is impossible, web designers might consider using bold, caps, type size, small caps, underlines or colors to emphasize their content effectively. Emphasis is most effective, however, when it is limited to a single look. Using multiple variations together, such as caps-bold-italic-underlined, looks sloppy and can be disruptive to the audience. It should be noted as well that over-emphasis can appear cluttered and be distracting as well, so use emphasis only as need.
Tip #7: Select Proper Typeface
It is important to make sure that your typeface is consistent with the content and the message that you are trying to get across. To do this, consider who your target audience is, what type of content they will be reading and then use that information to select an appropriate typeface for your typography. For example, if your target audience is reading a how-to article, use a typeface that is professional and simple. If your target audience is reading cartoon text in a children’s comic, use a typeface that is creative and suitable for the situation. Remember tip #3 and limit overuse of varying fonts, but ensure that the typeface you are using is appropriate for your content. When in doubt, stick with a common typeface such as Arial or Times New Roman.
Website typography can be tricky because it is always changing, but by following these seven simple tips for improving your typography you can create appealing and easy-to-use content for on your domain.
Related posts:
- Fun Helvetica Posters
- Best Usable Free Fonts of 2011
- Free Fonts to Use in Your Design
- Ultra Thin Fonts: 10 Awesome Examples of Usage
- 10 Funny Type and Typography Tools
- 45 Useful Signature and Handwriting Fonts
Some good points raised her some I dont agree with some I do. In regards to using a font size of 14px’s within the main body of the page this can really effect a website and the looks of the page. In regards to this forum they are using 10px on here which imo is a bit small. I tend to stick to 11px for the main body of text and dont usually go above that.
Thanks for the post though very informative.
Thanks for sharing your ideas.
Headings is the biggest thing i see people leave out. the h1 tag is HUGE for google!