• Text Resize A A A
  • Print Print
  • Share Share Share Share

Font Size and Typeface

Document Type: Standard


Content:

HHS must use a 12-point (or larger) Verdana (preferred) or Arial font for standard text and links on all web pages. The selected font must be used consistently throughout the site.

Exceptions to this rule include heading styles (H1, H2, H3, etc.), which may use serif fonts for design purposes.

If you have specialized audiences, use the appropriate font size to accommodate them.
  • For example, older adults may require a 14pt font to read effectively. 
Additionally, use “scalable fonts” or fonts that will allow the customer to increase and decrease text size using the browser functionality. Include the standard HHS Text Re-sizer on all text pages.

Reason:

From section 11:8 of The Research-Based Web Design & Usability Guidelines: “Research has shown that fonts smaller than 12 points slows reading speed. For users over age 65, it may be better to use at least 14-point fonts. Never use less than 9-point font on a Web site.”

Additionally, a larger or wider font size will increase the size of clickable targets for hyperlinks, improving speed and accuracy.


Approximate Conversion from Points to Pixels (and Ems and %):


Points Pixels Ems Percent
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%





















Source: ReedDesign http://reeddesign.co.uk/test/points-pixels.html


Exemptions:

A font size of one or two points smaller than the default, but never smaller than 9-point, may be used under the following conditions:
  • In data tables
  • In PDF documents because they are expandable when opened and often meant to be printed
  • In a navigation bar that presents secondary information such as bread crumb navigation or standard information/links that appear in the “footer” of a page.
  • For notices or disclaimers.  For example: Documents in PDF format require the Adobe Acrobat Reader®.
  • To present information and/or links in the footer of a Web page.  For example:  This is an official U.S. Government Web site managed by the U.S. Department of Health & Human Services.
  • To present secondary information that describes a prime link or piece of content.























Sources:

  • Bailey, 2001
  • Bernard and Mills, 2000
  • Bernard, Liao and Mills, 2001a
  • Bernard, Liao and Mills, 2001b
  • Bernard, et al., 2002
  • Ellis and Kurniawan, 2000
  • Galitz, 2002
  • Ivory and Hearst, 2002
  • Tinker, 1963
  • Tullis, 2001
  • Tullis, Boynton and Hersh, 1995