Skip to main content

Typography

Typography theming applies to text sizes and weights. Some default typography values can be overridden through CMS configurations.

Text and Heading font size map​

The app uses Tailwind font size classes with a CMS theme connector that will allow some font sizes to be overridden.

CSS ClassDefaultCMS?Applies to
text-xs0.75rem / 12px
  • Cart quantity number
  • Confirmation product line item pricing
  • Product List popover error message
  • Badge text
  • PDP breadcrumbs (default breadcrumb size)
  • Dropdown menu shortcut -- what is this?
  • Form input error text
  • Text button text in xs viewports
text-sm0.875rem / 14px
  • Checkout button price display
  • Place order button price display
  • Cart product line item category, attributes, quantity controls, action controls and price display
  • Promo code error text
  • Checkout line item quantity controls
  • Checkout order total price display
  • Checkout shipping address
  • Order confirmation line item price display
  • Order history list item details and count
  • Order details line item attributes, quantity and price display
  • Order details order total labels and price display
  • Order details shipping address
  • Order details close button text
  • Flyout menu list item links
  • Product name default size in small and medium viewports
  • Product tile quick add accordion trigger text
  • Product list price display
  • Alert description text
  • Category breadcrumbs (default lg breadcrumb size)
  • Icon button text
  • Context menu list
  • Dialog description text
  • Drawer secondary panel close button
  • Dropdown menu trigger, items and label
  • Footer utility text
  • Form labels
  • Form inputs
  • Form input error messages
  • Sheet description text
  • Media Card subcopy with no markdown overrides
  • CMS components with h6 markdown text
  • Toast component title and desscription text
  • Any <h6> element with no override classes (none in use)
text-base1rem / 16px
  • Default body text size
  • Navigation menu trigger
  • Product name default size in large+ viewports
  • Product details
  • Product variation selection text
  • Article details
  • Order details order number and date
  • Error page error message
  • CMS components with h5 markdown text
text-lg1.125rem / 18px
  • Search results search term
  • Account drawer accordion titles: Profile, Address Book, Recent Orders
  • Order history list item heading
  • Order details shipping heading
  • Order confirmation order number, order date and customer email
  • Order confirmation payment method display
  • Order confirmation shipping address heading
  • Cart notification title
  • Added to cart success price display
  • Product line item product name
  • Cart summary item count
  • Checkout drawer accordion title: Delivery, Payment, Shipping
  • Dialog title
  • Media Card header with no markdown overrides
  • Media Card subcopy with no markdown overrides
  • Media Hero subcopy in small viewports with no markdown overrides
  • Quantity controls default font size
  • Sheet title
text-xl1.25rem / 20px
  • 404 not found message in medium viewports
  • Error page message in medium and XL viewports
  • Navbar logo default font size
  • Article table of contents and social headers
  • Media Card eyebrow text with no markdown overrides
  • Media Block Hero eyebrow text with no markdown overrides
  • Media Hero eyebrow text with no markdown overrides
  • Media Hero subcopy in medium+ viewports with no markdown overrides
  • CMS components with h4 markdown text
text-2xl1.5rem / 24px
  • Profile greeting
  • Article Card title
  • CMS components with h3 markdown text in medium-large viewports
text-3xl1.875rem / 30px
  • Order confirmation page heading
  • Media Card header in XS viewports with no markdown overrides
  • Media Block Hero header in xs-large viewports with no markdown overrides
  • CMS components with h3 markdown text in small viewports
  • CMS components with h2 markdown text in medium-large viewports
text-4xl2.25rem / 36px
  • 404 not found heading in xs viewports
  • Error page heading in xs viewports
  • Article header
  • Media Card header in small viewports with no markdown overrides
  • Media Block header in xl viewports with no markdown overrides
  • Media Hero Header in xs viewports with no markdown overrides
  • CMS components with h3 markdown text in extra-large viewports
  • CMS components with h2 markdown text in small viewports
  • CMS components with h1 markdown text in mediuam-large viewports
text-5xl3rem / 48px
  • 404 not found heading in small viewports
  • Error page heading in small viewports
  • Media Hero Header in small-large viewports with no markdown overrides
  • CMS components with h2 markdown text in extra-large viewports
  • CMS components with h1 markdown text in small viewports
text-6xl3.75rem / 60px
  • 404 not found heading in medium+ viewports
  • Error page heading in medium+ viewports
  • Media Hero Header in xl viewports with no markdown overrides
  • CMS components with h1 markdown text in extra-large viewports
text-7xl4.5rem / 72px
  • not in use
text-8xl6rem / 96px
  • Banner heading in large+ viewports
text-9xl8rem / 128px
  • not in use
text-heading-base1rem / 16px
  • Refinement drawer title
  • Refinement drawer filter group title
  • Any <h5> element with no override classes
  • <Heading> size small
text-heading-xl1.25rem / 20px
  • PDP product name
  • PDP product details accordion title
  • Cart and checkout drawer headings
  • Navigation drawer headings
  • Product content sticky heading -- what is this?
  • Product list title
  • Order detail title
  • Account drawer title (next to account icon)
  • Category landing pages without a Banner in xs-medium viewports
  • Search results page in xs-medium viewports
  • Any <h4> element with no override classes
text-heading-2xl1.5rem / 24px
  • Search suggestions title in drawer in xs-medium viewports
  • Carousel header in xs-medium viewports
  • Grid header in xs-medium viewports
  • Any <h3> element with no override classes
text-heading-3xl-
  • Not in use
text-heading-4xl2.25rem / 36px
  • Search suggestions title in drawer in large+ viewports
  • Carousel header in large+ viewports
  • Grid header in large+ viewports
  • Category landing pages without a Banner in large+ viewports
  • Search results page in large+ viewports
  • Any <h2> element with no override classes
text-heading-5xl-
  • Not in use
text-heading-6xl3.75rem / 60px
  • Any <h1> element with no override classes

Heading Responsive Variants​

Five responsive heading variations exist as size options. These variations will use the configured heading values to render text differently based on the viewport.

TypeConfigurations AppliedApplies to
Defaulttext-heading-xl lg:text-heading-4xl
  • Category landing pages without a Banner
  • Search results page
smtext-heading-base
mdtext-heading-xl
lgtext-heading-2xl lg:text-heading-4xl
  • Search suggestions title in drawer
  • Carousel header
  • Grid header
xltext-heading-4xl lg:text-heading-6xl
  • Not in use
Media H1text-4xl sm:text-5xl xl:text-6xl
  • Applied to Media component text configured as h1 markdown
Media H2text-3xl sm:text-4xl xl:text-5xl
  • Applied to Media component text configured as h2 markdown
Media H3text-2xl sm:text-3xl xl:text-4xl
  • Applied to Media component text configured as h3 markdown
Media H4text-heading-xl
  • Applied to Media component text configured as h4 markdown
Media H5text-heading-base
  • Applied to Media component text configured as h5 markdown
Media H6text-sm
  • Applied to Media component text configured as h6 markdown

CMS Configuration Options​

TypeCSS VariableApplies to*
Body Font Size‑‑body‑font‑size
  • Default text size
Body Font Weight‑‑weight‑body
  • Default text weight
Headings Weight‑‑weight‑heading
  • Default heading weight
Heading Font Size Base‑‑heading‑base
Heading Font Size XL‑‑heading‑xl
Heading Font Size 2XL‑‑heading‑2xl
  • Any <h3> element with no override classes
Heading Font Size 4XL‑‑heading‑4xl
  • Any <h2> element with no override classes
Heading Font Size 6XL‑‑heading‑6xl
  • Any <h1> element with no override classes

Default Heading Sizes and Weights​

TypeConfigurations AppliedApplies to
h1text-heading-6xl font-weight-heading
  • Any <Heading/> component with as="h1" as a prop
  • Any <h1> element with no override classes
h2text-heading-4xl font-weight-heading
  • Any <Heading/> component with as="h2" as a prop
  • Any <h2> element with no override classes
h3text-heading-2xl font-weight-heading
  • Any <Heading/> component with as="h3" as a prop
  • Any <h3> element with no override classes
h4text-heading-xl font-weight-heading
  • Any <Heading/> component with as="h4" as a prop
  • Any <h4> element with no override classes
h5text-heading-base font-weight-heading
  • Any <Heading/> component with as="h5" as a prop
  • Any <h5> element with no override classes
h6font-weight-heading text-sm
  • Any <Heading/> component with as="h6" as a prop
  • Any <h6> element with no override classes