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 |
---|---|---|---|
as | h1 | h2 | h3 | h4 | h5 | h6 |
| Changes the rendered tag for semantic purposes. |
Props ending with * are required
Inherited
Typography Props
Margin Props