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
  • Navigation menu trigger
  • Sheet description text
  • Media Card subcopy with no markdown overrides
  • Media 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
  • 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
  • Media 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
  • Media components with h4 markdown text
text-2xl1.5rem / 24px
  • Profile greeting
  • Article Card title
  • Media 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
  • Media components with h3 markdown text in small viewports
  • Media 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
  • Media components with h3 markdown text in extra-large viewports
  • Media components with h2 markdown text in small viewports
  • Media 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
  • Media components with h2 markdown text in extra-large viewports
  • Media 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
  • Media 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
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