Typography

Typography in Cimpress UI is designed to create clear visual hierarchy and ensure readability across all applications. Text styles are exposed through the Text component, which provides consistent typography through predefined variants.

<Text variant="title-1" as="h1">
  Some text
</Text>

Variants

title-1

Used for page-level headings

title-2

Used for secondary page-level headings

title-3

Used for section headings and tertiary page-level headings

title-4

Used for section headings

title-5

Used for section and component headings

title-6

Used for section and component headings

body

Used as the default paragraph text

body-semibold

Used for labels and text that require more visual emphasis

medium

Used for labels and text that is less prominent or not critical

medium-semibold

Used to give medium text more visual emphasis

small

Used for components and in places where space is limited. Small text styles should be used extremely sparingly and only for supplemental text that is not important.

small-semibold

Used to give small text more visual emphasis. Small text styles should be used extremely sparingly and only for supplemental text that is not important.