Body copy & sizes

Body copy

Body copy in typography refers to the main text content of a document or webpage, typically set in a smaller and more readable font size, providing the bulk of information for readers. Unlike headers, which are larger and used for organization and emphasis, body copy focuses on delivering the core message and details of the content.

---

Sizes

Size and spacing is used to establish hierarchy, help users navigate content at a glance, and improve readability and usability.

sm (12px)

This is the smallest font size available in the design system. It's meant to be identifiable, but not command attention.

Use 12px font for:

• Labels
• Meta data
• Supplemental content

md (16px)

This is the base size for content and components. Components will be designed with 16px font in mind and sizes and spacing will be reflected in the design.

Use 16px font for:

• Body copy
• Component content

lg (20px)

This size is used for content headers to help group like content and provide context. 20px font can also be used to compliment xl (24px) content.

Use 20px font for:

• Form headers
• Subsection headers (xl 24px)

xl (24px)

This size is used for subtitles, which are used to complement the title of the page. 24px font also provides a strong anchor to a section and provides a clear hierarchy between the section and m (16px) sized content.

Use 24px font for:

• Subtitles
• Section headers

Use 32px font for:

This is the largest font size available in the design system and it's meant to command most of the attention on the page. 32px font is only used once as a title on a page or per instance.

Use 32px font for:

• Page titles
• Instance titles

Don’t:

• Use more than once on a page or per instance