MS Front Page - Advanced Font Readability The best practice is to use the most readable fonts. Unfortunately, this is more easily said than done. Exerts do not always agree which fonts are the most readable or which ones are most appropriate for web use. There are thousands of fonts and font variations that could potentially be used on a web site, but the vast majority of these fonts will not work for most users on the web because computers can display only the fonts installed on the computer, and not all computers have the same fonts installed. Windows, Macintosh, and Unix computers each come with a different set of fonts installed with the operating system. Fortunately there are at least a few fonts relatively common to recent versions of the Windows and Mac operating systems, such as: • • • • • • • • • Arial, Book Antiqua, Comic Sans MS, Georgia, Courier New, Tahoma, Times New Roman, Trebuchet MS, and Verdana However, it is important to note that these fonts are NOT universal. Many Unix and Linux computers do not have these fonts, and older versions of both Mac and Windows computers may not have them either. Nevertheless, the fonts listed above are common enough that they will be available on most computers. Computers without those fonts will display some other font, like Times or Helvetica, for example, which may not have the exact appearance the developers intended, but the content will still be readable. Font families Fonts are categorized into "families" based on their characteristics. The most common font families are • • • • • serif, sans-serif, cursive, fantasy, and monospace. From among these, serif and sans-serif fonts are by far the most common. Serif fonts Serif fonts are characterized by the flared extensions, or strokes, on the tips of such letters as f, l, and i, as seen in the screen shot below: Serif fonts also usually have a combination of thick and thin strokes, as seen in the curve of the letter "f" above. Examples of serif fonts include Times New Roman, Georgia, and Book Antiqua. Sans-serif fonts Sans-serif fonts have plain endings, and appear blockier than serif fonts. They do not have the flared extensions, strokes, or other kinds of ornamentation. ("Sans" means without, and "serif" refers to the extra strokes, or lines.) Sans-serif fonts include Arial, Tahoma, Trebuchet MS, and Verdana. Font designed especially for on-screen viewing Although serif fonts such as Times and Times New Roman are generally regarded as the most readable font family for printed text, there is conflicting information about which font is the best to use for web-based content. Conventional wisdom has been that sans-serif fonts are more suited to electronic formats, but this convention probably has its roots in the fact that older computer screens were less capable of rendering serif fonts. Most modern computer monitors are capable of displaying all types of fonts with almost as much perceived clarity as a printed page. Recent studies have resulted in inconsistent findings, making it difficult to say which font family is best suited for the web. Some fonts, such as Verdana, Tahoma, Trebuchet MS, and Georgia, were developed specifically for use in electronic media, and are now quite common on both Windows and Mac platforms, especially if Microsoft Word is installed on the computer. Verdana Verdana is one of the most popular of the fonts designed for on-screen viewing. It has a simple, straightforward design, and the characters or glyphs are not easily confused. For example, the upper-case "I" and the lower-case "L" have unique shapes, unlike Arial, in which the two glyphs may be easily confused. Another advantage of Verdana is that the spacing between letters. One consideration to take into account with Verdana is that it is a relatively large font. The words take up more space than words in Arial, even at the same point size. The larger size improves readability, but also has the potential of disrupting carefully-planned page layouts. This is less of the issue of the developer designs with flexibility in mind. (See the section below on font sizes.) Georgia Georgia is like the other web fonts discussed so far in that it is wider than similar fonts meant for print design. Unlike the other web fonts, though, Georgia is a serif font, more along the lines of Times New Roman. Georgia is somewhat easier on the eyes than Times New Roman, although high resolution screens with font smoothing technology also display Times New Roman quite well. One advantage of using Georgia is that it is not the default text of the browser. It is easier for users to see that the designer has applied some style to the font when fonts other than the default font are specified. Georgia ends up looking slightly more artistic than Times New Roman Capitalization Typing sentences or phrases IN ALL CAPITALS is rarely a good idea. It may make sense under some circumstances, but only rarely. Lengthy segments of capitalized content are more difficult to read. They also may give the impression that the author is shouting. If the author really does want to convey a shout, an exclamation point may be better, because screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is shouting. Screen readers do change the voice inflection with exclamation points. Contrast Text is much easier to read when there is a high degree of contrast between the text and the background. Black text on a white background is the de facto standard for both print and the web at this point. However, this combination is not ideal for all users. Users with very low vision may set the background to black and the text to white or yellow. Users with dyslexia may set the background to an off-white color or light yellow, with black text. Some people with dyslexia lay a clear sheet of tinted plastic over the screen in order to read more effectively. Web developers cannot control for these user behaviors, and they do not have to. Users will do what they need to do, and what they are accustomed to doing, in order to read. The main concern for web developers is to ensure a high degree of contrast for the general population of readers. Example Yellow on black is good contrast. Black on white is good contrast. Maroon on black is bad contrast. Green on red is bad contrast. Algorithms exist to help developers determine whether there is sufficient contrast between the foreground and the background. The first algorithm is for brightness, and the second algorithm is for color difference. The algorithms use the red green blue (RGB) color values common in web development. A color with an RGB value of #000000, for example, has no amount of any color. This is black. Colors are defined by a combination of letters and numbers, which makes the system a bit difficult to understand. Blinking and Moving Text Blinking text and moving text are annoying because they distract the reader's attention. This is especially relevant to people with attention deficits or cognitive disabilities. Neither is likely to cause a seizure, but they are likely to decrease the readability of the document as a whole and increase the time it takes for users to finish reading it. The situation is further complicated if users are required to click on moving text. Users with slower reaction times, tremors, or other motor difficulties may not be able to click on the links accurately. http://www.lcsc.edu/webdev/typography.htm LCSC WebDev: Typography