Typography

 

Headings

---

Headings are important in our content hierarchy and central to clear visual affordance. They also have accessibility value; they communicate the content structure on the page, lending assistive technologies a clue as to our content architecture.

 

Heading 1

Our header component handles all Heading 1s, unless you need display text for marketing purposes.

We recommend a spacing of 48px(typography/heading1/margin_bottom) between the main header component and the page content; of course, this can be increased if the content needs more breathing room.

Styling

 

Heading 2

We recommend assigning heading 2 to the next immediate header after the main page header.

Likely, this header will delimit a section within the content of the page.

Styling

Widget headers

We recommend this header as our default header for widgets and section cards as well.

Styling

Heading 3

We recommend assigning heading 3 to subsections; this is our default header used in Field Sets within a form.

Styling

 

Overlines

Although we strongly encourage avoiding using more than 3 heading levels(Page/section/subsection) and reconsidering your layout (Breaking down your flow in steps or multiple panels).

We also provide a fourth header level that we recommend using sparingly when the necessity arises; this is the overline,

The overline is usually presented as a small, uppercase label or heading. Often referred to as "eyebrow" text, it should not be deployed as a stand-alone heading or window title.

Styling