Typography

Overview

The goal of Arc's typography is to create consistent relationships but isn't too rigid feeling when looking at dense areas of content.

Type Heirarchy

The typography system has a small number of base styles in the general heirarchy which will help manage the CSS and provide clear direction for designers. The system supports several layers of headings, body copy and a base for interface text.

H1 Page Header
  • font-size: 41.89px
  • Line-height: 50px
  • Letter-spacing: -0.02em
H2 Section Header
  • font-size: 32px
  • Line-height: 40px
  • Letter-spacing: -0.02em
H3 Subsection Header
  • font-size: 25.89px
  • Line-height: 30px
  • Letter-spacing: -0.02em
H4 Subsection Header
  • font-size: 18.72px
  • Line-height: 24px
  • Letter-spacing: -0.02em
H5 Subsection Header
  • font-size: 16px
  • Line-height: 18.7px
  • Font-weight: 700
  • Letter-spacing: -0.02em
H6 Subsection Header
  • font-size: 12px
  • Line-height: 14px
  • Font-weight: 700
  • Letter-spacing: -0.02em
Body Copy and interface styles
  • font-size: 16px
  • Line-height: 18.7px
  • Letter-spacing: -0.02em
Small Body Copy
  • font-size: 14px
  • Line-height: 14px
  • Letter-spacing: -0.02em

Usage

Generally speaking a page should have one h1 supported by the number of h2s and h3s needed to make the content clear and accessible. Maintaining this heirarchy will be important to help reinforce the relationships in the content, especially when presented by assitive technology such as screen readers.

Much of the text for interfaces should be handled by applying the body copy style with appropriate variations (bold, italic, ect.). For example, an input field may need a label which is bold and a different color from the general body copy. Some patterns are a distinct part of the page's heirarchy and should employ h2 and h3 typography. An example of this would be a page which is made up of cards who's titles work in the same way as a 2nd layer of organization after the page header.

The default color for the type system is #0C0D1D or Default Text "Check out 'Default Text' color in the Color System documentation"), but some patterns and content situations may need different colors. The Arc Color System has guidelines to help designers make accessible choices on what colors to make text.

Italics

  • font-style: italic

Regular weight

  • font-weight: 400

Bold weight

  • font-weight: 700

Dark background

Underlined

  • text-decoration: underlined

Related Patterns

Many patterns will utilize the type system directly but here are several which are specifically tied to it:

  • link coming soon.