Typography

Learn about naming conventions, default styles, managing text colors and tips for customization.

Overview

The Base System uses the standard html headings (H1-H6) and provides several different sizes of body text (Paragraph X Small to X Large). You can customize any of these styles using combo classes for text styles, colors and weights. Lastly, we provide optional typography classes for subheadings, overlines, and captions.

---

HTML Selectors

We recommend styling the default elements so we don't need to add a class each time. All default margins are removed from typography elements like headings, paragraphs and list items.

Styling Body (All Pages)

The body determines our default typography style and should generally have a font size set to 16px and the font color set to Text Color Primary.

Styling All Paragraphs

We do not recommend styling the All Paragraphs selector—let it inherit styles from the body.

Styling All Links

Apply Text Color Primary and remove underline from All Links. This prevents unwanted styling from elements inside link blocks. If a text link needs an underline and brand color, use the Text Link class.

---

Headings

The Base System uses H1-H6 headings, styling the HTML selectors and creating matching heading classes.

You can use the heading classes when you want a heading style without using a semantic html heading.

Heading font family are used to help keep styles synchronized across breakpoints.

HTML Tag & Class	Font Size	Font Size (Mobile)	Line Height
H1 Heading	64px / 4rem	48px / 3rem	1.3
H2 Heading	56px / 3.5rem	40px / 2.5rem	1.3
H3 Heading	48px / 3rem	32px / 2rem	1.4
H4 Heading	40px / 2.5rem	28px / 1.75rem	1.4
H5 Heading	32px / 2rem		1.5
H6 Heading	24px / 1.5rem		1.5

---

Paragraph

Paragraph classes are used as the main body text of your website. We recommend adding our Text Color Secondary directly to our Paragraph Class. If we want to inherit a color from the parent, for example, for a hover effect, we can add our text-inherit combo class.

By default, Paragraph classes inherit from the body. However, often our design will have a paragraph font color than is lighter than your headings. We don't want to have to add a combo class every time we want to use a paragraph element.

Use the Paragraph element for long-form text, as it helps assistive technologies recognize the content as a paragraph.

Class Name	Font Size	Line Height
Paragraph X Large	20px / 1.25rem	32px / 2rem
Paragraph Large	18px / 1.1125rem	28px / 1.75rem
Paragraph Regular	16px / 1rem	24px / 1.5rem
Paragraph Small	14px / 0.875rem	20px / 1.25rem
Paragraph X Small	12px / 0.75rem	16px / 1rem

---

Text Modifiers

Modifiers are used for adding typography styles, such as text weight, text colors, underline, and more without needing to create a new class.

If you find yourself using modifiers too often, it may be better to create a new class instead. In the next page, we provide some examples used in the Base System.

Font Weight

Class Name	Text Weight
Text Weight Black	900
Text Weight Extra Bold	800
Text Weight Bold	700
Text Weight Semibold	600
Text Weight Medium	500
Text Weight Regular	400
Text Weight Light	300

Font Color

Name	Color Variable
Text Color Primary	text-color-primary
Text Color Secondary	text-color-secondary
Text Color Tertiary	text-color-tertiary
Text Color Light	text-color-light
Text Color Dark	text-color-dark
Text Color Brand	text-color-brand
Text Color Inherit	color: inherit

Font Style

Class Name	Text Style
Text Underline	Underline
Text Strike	Strike
Text Italic	Italic

---

Optional Typography

The Base System provides additional optional typography classes, including Subheading, Overline and Caption. These classes are intended to reduce the burden of stacking multiple combo classes to achieve common typography designs.

Subheadings

Subheadings are useful as small headings for elements like cards, features etc. They typically feature a heavier font weight, darker text color or heading font style compared to paragraphs.

Class Name	Font Size	Line Height	Font Weight
Subheading X Large	20px	36px	Bold
Subheading Large	18px	32px	Bold
Subheading Regular	16px	28px	Bold
Subheading Small	14px	24px	Bold
Subheading X Small	12px	20px	Bold

Overline

Overlines are most typically associated with headings, where they sit above headings, usually with unique colors, letter spacing, capitalization and other styles. These are often referred to by other names such as 'Eyebrow', 'Over Text', 'Top Label'.

Class Name	Font Size	Line Height	Style
Overline X Large	20px	36px	All Caps
Overline Large	18px	32px	All Caps
Overline Regular	16px	28px	All Caps
Overline Small	14px	24px	All Caps
Overline X Small	12px	20px	All Caps

Captions

Captions are useful for when you need smaller line height than provided by paragraphs.

Class Name	Font Size	Line Height
Caption X Large	20px	36px
Caption Large	18px	32px
Caption Regular	16px	28px
Caption Small	14px	24px
Caption X Small	12px	20px