Typography

Best Practices

---

Using Typography

Font Licenses

American Express colleagues have access to Benton Sans, Guardian and SF Pro via self service or software download service (SDS).

Agencies follow the guidance in the brand guidelines.

When building digital experiences (other than emails and native apps), please incorporate the typeface directly from our content delivery network (CDN).

Custom Fonts

Using fonts that are not part of the brand can lead to inconsistency in branding across different service channels. It is important to use brand fonts, colors, and logos to ensure a consistent and recognizable brand identity.

Additionally, using custom fonts can impact accessibility as some font weighting and size may be difficult to read for visually impaired users. It is recommended to use fonts as specified to maintain consistency and accessibility.

Icon Fonts

The Design System no longer offers an icon font, instead the system has a library of SVG icons. As a system, we don’t recommend using alternative icon fonts.

Typography in Figma

Typography can be found as separate font and colors styles in Figma. Unlike Sketch, Figma font colors are handled separately to font styles. Colors can be found as Figma variables.

---

Type Hierarchy

Visual Hierarchy and HTML Hierarchy

Visual hierarchy should mimic the content hierarchy. Content hierarchy is created in code by using HTML heading tags such as h1, h2, h3, h4. H1 tags are important for both the user experience and for search engine optimization. They help to organize the content of the page and make it easier for users and search engines to understand the main topic of the page.

Visual headings web page should be matched with the correct level HTML heading tag. An example of the hierarchy is example page title being h1 subtitle h2. Assistive technologies leverage these tags to help users with visual impairments easily navigate and traverse the page content. See our Creating a More Inclusive Experience at Amex through Page Hierarchy and Component Reflow.

Our new type hierarchy now aligns with the order of semantic HTML. Larger type styles mimic larger heading tags. However designers may assign a heading hierarchy that best matches their designs.

Weight and Color Value

Type hierarchy and prominence can be leveraged through scale, weight and color. This design system introduces the concept of surface and content color. These colors are carefully selected to meet the demands our design community while ensuring accessibility. Other forms of type hierarchy include semantic markup of the HTML (H1, H2, H3 …)

When to Use Display or Heading Text Styles

Display text styles should be used for marketing and headlines, for example, typography inside a hero. Use heading text styles to create visual structure and hierarchy on the page.

Font Pairing

Use scale to create headings and sub headings on a page. Here are examples of pairs that work well with body text style.

Font and Color Pairing

Along with using heading styles color can be used to create visual hierarchy. Here are examples of headings and body pairings using scale, weight and color to create hierarchy.

---

Layout

Line Height

When line height is too tight or too loose, the customer’s ability to understand the message will be compromised. The proper line height allows the typeface to breathe, ensuring legibility. Line heights were determined based on each styles individual size and weight, for example the design systems body line height is 150% the font size.

Optimal Line Length

Similar to line height, line length is also determined based on the individual style and weight. It is measured in characters, not pixels. A comfortable measure is 45 to 75 characters (including punctuation and spaces) per line.

---

Responsive Text

Text and text boxes should automatically adjust its size and layout based on the screen size and resolution of the device it is being viewed on. This is important for responsive web design, which aims to provide an optimal viewing experience across a wide range of devices, from desktop computers to mobile phones. The Design System accounts for screen size in its grid and layout to allow for smaller and larger spacing to help maximize layout for text.

By using responsive text, the content of a website or application can remain legible and easy to read, regardless of the device it is being viewed on. This can improve the user experience and make the content more accessible to a wider audience.

---