Graphic Design

Graphic design in HarvardSites includes required standards and configurable visual systems that shape how content appears across a site.

 

Visual Systems

Color roles

Defines how colors are mapped to roles used by components and interface elements.

Site styles

Compare the available site styles and see how layout, framing, and shape change the look and feel of your site.

Typography options

Choose a heading and body font pairing that sets the tone and readability of your site.

Graphic Design Standards and Guidelines

Graphic design standards and guidelines apply to:

Clean Typography

Clean typography helps users navigate user interface elements and read text content, regardless of their vision, device, or context of use. This is especially important for people with low vision. These clean typography standards and guidelines aim to:

  • Optimize user interface text for maximum legibility so that it is easy to recognize and understand.
  • Provide a comfortable reading experience for extended text so that it is easy to read.
  • Provide typographic elements that harmonize with Harvard University’s visual identity so that users know they are reading a Harvard resource.

The clean typography standards and guidelines are:

  • Number of Fonts: Designs must not use more than two typefaces.
  • Legible Fonts: Themes must use typefaces with an x-height of 8.3px ±5% when viewed at the browser’s default size (i.e., 16px).
  • Types of Fonts: Designs must use only clean and classic typefaces, and must include at least one sans serif font.
  • Minimum Text Size: Text must be no smaller than the browser’s default font size (i.e., 1rem).
  • Typography Style: Designs must preserve typeface integrity, avoiding use of special effects and modifications, such as outlines, drop shadows, tracking, or horizontal scaling, and minimizing use of italicized styles.
  • Text Underlines: Text that is not a link must not be underlined.
  • Wayfinding Font: Designs must use a sans serif typeface for wayfinding elements, including menus, labels, controls, announcements, and alerts.
  • Text Block Alignment: Blocks of text must not use justified or centered alignment, but rather left or right alignment according to the language of the text.
  • Heading Alignment: Headings should not use centered alignment, but rather left or right alignment according to the language of the text.

Sources

Clean Typography standards and guidelines support the following requirements from the Graphic Identity Standards Manual (PDF) and Federal plain language guidelines from the US General Services Administration:

  • Typography: Working with Type: 
    • Avoid using more than two different fonts in one piece of communications.
    • Use clean and classic faces, with a preference for sans-serif fonts.
    • Don’t use fonts that are overly stylized.
    • Don’t use type with drop shadows.
    • Don’t stretch type. Always scale proportionally.
    • Don’t outline type.
    • Avoid condensing, excessive tracking, or horizontal scaling. 
    • Use italicized styles sparingly. 
  • Design for reading:
    • Use simple typography: Use ragged right margins where possible, rather than centering or justifying your text.
    • Headings: Justify to the left margin.
    • Emphasis and styling: Use bold for emphasis (not underlining).
See also: