Additional Typography

Learn about the additional typography options in the Base System

Overview

For many users Heading and Paragraph may be all there project needs. However, sometimes we will need to use other typography styles to achieve particular designs. Whether that's different line height, font style or we just find that using a combo class every time has become burdensome to development and maintainability.

Subheadings

Subheadings in the Base System 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. While you could use combo classes, the subheading utility class helps replace the need for repetitive or deep combo-class stacking.

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' and many others.

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 shorter blocks single lines of text 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