Typography

Overview

BigCommerce uses Source Sans Pro for all text, with different weights for headings and subtext.

When to use:

  • Use hero headers only for content-focused pages, e.g. a feature discovery page.
  • Use page headers at the top of page as a title.
  • Use panel headers to give titles to individual panels.
  • Use section headers to break up content within a panel.
  • Use labels to identify functionality, like inputs or discrete data displays.
  • Use body regular to convey information in complete sentences or paragraphs to the user within panels.
  • Use body small for supplementary information (e.g. the description for an input).

Implementation

Edit the code below to see your changes live!

<>
  <H0>Hero header - h0</H0>
  <H1>Page header - h1</H1>
  <H2>Panel header - h2</H2>
  <H3>Section header - h3</H3>
  <H4>Group header - h4</H4>
</>

Props

Prop name
Type
Default
Description
ash1 | h2 | h3 | h4 | h5 | h6

Changes the rendered tag for semantic purposes.

Props ending with * are required

Inherited

Expand

Typography Props

Expand

Margin Props