PATTERN OVERVIEW

A system of font styles is available within Adobe Experience Manager (AEM) to format a heading and copy.

The styles are built into the AEM components and patterns and cannot be overridden.

Headings:

Frutiger Light, Roman and Bold are used for the heading styles — see examples below. Frutiger Bold is used sparingly as it doesn't deliver an airy experience. 

Body copy

Open Sans is used for body copy because of its high level of readability on the web.

Approved color schemes for a heading or copy

The following color schemes are built in to the text styles within AEM and cannot be overridden:

• When text is placed on a White or Off White (light gray) background the color of the text is automatically black (#000000) and a hyperlink is blue (#006ca2) with an underline on rollover.
  
  
• When text is placed on a Dark Gray, Off Black or Black background, the text color is white (#FFFFFF) and a hyperlink is white with an underline.
  
  
• Text in a Color block component with the background color set to gray light, gray, gray dark, gray darker, off black, black, primary brand, accent 1-alt, accent 2-alt, accent 3-alt, and accent 4-alt will appear white (#FFFFFF).   

Color options for the block include: White, off white, gray lighter, gray darker, off black, black, primary brand, accent 1-alt, accent 2-alt, accent 3-alt, and accent 4-a.

Note: The use of Accessible orange (#ce4b27) has been discontinued  and should not be applied to a heading or body copy.

GUIDELINES

• Use heading (H1-H5) tags for content structure and add font classes to apply visual style by following the HTML markup requirements.
  
  
• For accessibility, it's essential to keep headers in a hierarchical order. For example, you wouldn't have an H3 before an H1.
  
  
• Refer to the Font Map for the full list of font classes and heading tags.
  
  
• A heading is left aligned or centered depending on the content — and pattern used.
  
  
• Headings and subheadings are used to break up content into digestible bits that are more easily consumed as needed.
  
  
• Use bulleted lists to break up large amounts of copy.
  
  
• Reference the Digital copy page for guidelines on how to prepare copy.
  
  A magazine name should be formatted to use italics.
   

AEM Component: Text (Optum 3) and font classes and tags.