Web Savvy Typography

April 26th, 2010 Posted in Various

Typographic styles and conventions are ever changing. Periodically you need to replenish your knowledge and stay current about trends and activities in web typography. What is the best font family to use when styling a website? Should you use pixels, ems, or percents to size fonts? What is the best font color to use? How do you make titles and headlines that look good and improve your search engine optimization? How wide should a text column be? How should you use words in italics? Read further to learn about these guidelines and more for creating web savvy typography.

Image Source

Choosing a font-family for web text has traditionally been very limited, but change is happening and there are new ways to use CSS to style and use a variety of combinations successfully. Ten years ago there were very few acceptable font choices and embed fonts proved to be risky.  Typekit has changed the playing field and now designers can get the typography they expect to see and they have a much greater variety to choose from rather than gambling on what a viewer has installed on their OS.

Nowadays we have many options and considering your audience and who the site is representing requires thoughtful deliberation. If you are not using Typekit, consider the common fonts to all versions of Windows & Mac equivalents. Joe Gillespie and Kathy Marks are an excellent reference when deciding which font family to choose.

Some usability test say Verdana at 10 or 11pts is the most preferred and Arial at 12pt.  Although most designers prefer Verdana to Arial, Trebuchet MS is another sans serif font frequently preferred. Some websites are devoted to the severe overuse of Arial on the web and label Arial as an awful choice. Whatever font you choose in CSS you need to provide a font stack that has similar fonts. Be sure to only group either wide or narrow fonts together, keep the font stack short and always include a generic font family at the end.

The old guideline about only using sans serif fonts on the web because they are more legible is no longer true. Now you can design without fear using serif fonts on web pages. The most popular choice for a serif font is Georgia with Times font as an alternative. However, Times font, designed for print, does not work as well as Georgia.  David Rodriquez and noted typographers are exploring tasteful ways to use serif fonts on web pages.

According to John Boardly, more important than choosing a font one must consider the guidelines to good web typography are contrast, size, hierarchy, and space. He says, “We have the opportunity to make our web pages come to life through great typography.”

Sizing fonts for a web page can be difficult. A solution is to use a combination of percents and ems to control resizing and make your website accessible. Richard Rutter says, “Text must … be reliably resizable across browsers and platforms.” His samples prove that sizing text and line-height in ems, with a percentage specified on the body is the most effective way to appeal to designers and readers as well as conform to WC3 standards. He warns about the problems one can encounter with nested elements and provides a complex example to resolve that too. Jon Tangerine’s Pixels to Ems conversion table is a useful reference as well his article about elastic layouts.

Making color choices for typography can be a challenging decision too. The key to avoiding eyestrain is having good contrast and not too much contrast. There is a subtle and qualitative difference between using 100% black text on white versus a dark shade of gray on white. In other words, gray text typically will look more sophisticated than black text on a white background. If you are using a colored background with contrasting text and you are questioning the contrast you can run a gray scale test.  To run a gray scale test take a screenshot of the webpage, open the screenshot in your image editing software, and convert it to a gray scale. Also, consider contrast with reversed out text (light text on a dark background). Generally reversed out text, such as white on black can be difficult on the eyes; however a short cluster of reversed out text is perfect to attract attention. The background tint needs to be greater than 50% to reduce eyestrain when using reversed out text.

A good use for reversed out text is quotes and italicized words.  In terms of being grammatically correct, italicized words have very specific rules. The rules are rather broad however and allow designers to bring a users attention to a specific group of words, a quote or a slogan. Cameron Moll blogs about when to use italics and gives superb examples of font families most suited for italics.

Hierarchy in typography refers to the “organizational system for content, emphasizing some data and diminishing others.” Size, placement, color, weight and spacing are all important elements in the development of a successful hierarchy.  Headlines and titles rely frequently on hierarchical elements to establish their importance. Making them too large and/or too bold is a common overstatement that indicates a lack of graphic design refinement. Study newspaper terminology! Use kickers, slammers, raw wraps, hammers, tripods and sidesaddle heads. Try using different typefaces for headlines and titles to create a hierarchy, but avoid mixing too many weights and typefaces or your site design will lack unity. Most modern headlines are down style and flush left.

Using graphic text instead of HTML text is a way to develop attractive headings with unusual fonts; however, it will not help with search engine optimization. Consider converting graphic headers to styled headers for better SEO ranking. Adding a background image or background color to a styled header is another way to highlight a heading and use it for SEO. Header tags are important for search engines.  Header tags tell the search engine about the topic structure of the website. The proper protocol is to use one H1 tag per page and H2 tags for subtopics. Subsequent header tags are subsets of the H2 tag. By default, header tags have space, but specifically setting margins in CSS can eliminate the spacing, which can sometimes be an obstacle when designing a tight layout.

Brian Hoff says a common typographic mistake in website design not knowing what the Grid System is. He reminds us the grid is “the basis for creating clarity and making your type and layouts more cohesive.” Visit: The Grid System ; It is the best site for developing grid skills.

Within the grid system there is vertical rhythm and column width. Check out Richard Rutter’s article to learn more about the proper way to use vertical rhythm on a web site.  Column width on web pages comes in many sizes. Long lines of text cause eye fatigue. According to the Web Style Guide, “The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line.” Russ Weakly further explores column width by providing an excellent method for avoiding resizing problems. He recommends using column widths set to ems. It is a simple solution toward creating an accessible website.

Finally, there is the issue of punctuation. Small details greatly affect typography, particularly if an element such as a quotation is large.  Safalra’s Website offers advanced ASCII characters that will make your typography better than relying on simplified punctuation present in the ASCII character encoding. Making web savvy typography is complex and the best results are when the users read the content with ease and pleasure.

Author -

who has written 551 posts on [Re]Encoded.com.

Contact the author

One Response to “Web Savvy Typography”

  1. Smashing Share Says:

    Nice post Ryan

Leave a Reply