PSG Number: GM-14-005
Topical Area: Web Design and Development
Issue Date: 11/1/2013
Effective Date: 11/1/2013
Document Type: Guideline; Published (approved by Web Standards Group and GTA)
POC for Changes: Georgia.gov Interactive
Synopsis: The typography of Georgia's Web pages should be consistent and reflect the overall brand for the state Web site. The following are best practices and tips for legible type on the web.

7.3.1 General Type Guidelines

  • DO choose fonts that are legible at various sizes. We recommend Verdana or other common sans-serif fonts for most body text. Studies have shown that sans-serif fonts are easier to read on a computer screen. If you must use a serif font, we recommend you limit the use to Georgia. Both Verdana and Georgia were designed specifically to be easy to read on a computer monitor, and they are generally available on every computer and browser.
    • This is an example of Verdana font.
    • This is an example of Georgia font.
  • DO use bold font for emphasis of short amounts of prose (a word or phrase). Italics can be difficult to read on screen in long phrases, and should therefore be limited to book and periodical titles.
  • DO maintain a standard font size = 1em for paragraph text for maximum legibility.
  • DO use the em method in CSS to set type size. This allows users flexibility in increasing the font size from a base unit they select (for accessibility). Example type size CSS:
    P {font-family: Verdana, sans-serif; font-size: 1em;}
  • DO use non anti-aliased type for text embedded in graphics. Anti-aliased fonts use varying shades of gray to smooth jagged edges of fonts. This technique can make text easier to read, but when embedded in graphics, anti-aliased type is hard to read, especially when smaller than 10 point. This may depend on the font and size, so we advise that you test both options for legibility.
    105793193aliased.png
    Aliased Text

    105793196anti_aliased.png
    Anti-aliased Text
  • DO NOT use all uppercase in prose. All uppercase is generally ineffective for emphasis and also harder and slower to read.
  • DO NOT use underlining for emphasis in headings or prose. Underlining is less effective as emphasis and can be confused with a hyperlink.
  • DO NOT use colored text in a block for emphasis in headings or prose. A block of colored text is easily confused with a hyperlink. Additionally, colored text may not come across as emphasis for people with color blindness.
  • DO NOT use font sizes smaller than 0.8em for sans serif fonts. Type smaller than this is hard to read online for many people.

7.3.2 Web Fonts

With the modernization of web browsers comes greater support for web fonts (fonts that can be embedded and downloaded by the web browser to render on a page).

It is important to be aware that different browsers may require different types of font files and different syntax in order for the fonts to display correctly. As a result, you will need to declare the same font in a number of ways to be cross-browser compatible. Many web font kits provide generators that provide the appropriate code for you to include.

It is important to keep legibility and consistency in mind even when presented with a wide range of web font options. You should still avoid decorative fonts in favor of sans serif or serif fonts. Slab serifs and other display fonts may also be appropriate for headings. It is also important to keep bandwidth and download size in mind when adding fonts, especially for mobile device users. You may choose to use web fonts for desktop devices, while rolling back to standard system fonts for mobile users to cut down on the page size.

Free and Paid Web Fonts:

Resources:

7.3.3 Text in Images

Do not use graphics files to display text, especially in the case of navigation links and buttons. Use web fonts if you need to use a different typeface from those available as standard system fonts. In the event that you need to have text within a larger graphic (for example, in a logo file), be sure to include an alt attribute that contains the text of the image.

e.g. <img src=”gta_logo.png” alt=”Georgia Technology Authority” />

Avoid using any sort of special effects in type treatment, including embossing, shadows, highlights, gradients, and outlining. These can make the text hard to read.

7.3.4 References