Typography

This page can be resized to see responsive states.
Baseline typography is handled using Foundation. See 4.3.2 for more details.

Headlines:

Headlines throughout the site should follow SEO and semantic best practices. The subheader class is used for styling variation without affecting SEO hierarchy.

Headline 1

Used exclusively for page titles.

Headline 2

Used exclusively for page-level secondary headings.

Headline 3

Used for component-level headings.

Headline 4

Used for component-level secondary headings.

Headline 5

Used for item-level headings within components (Article/Product teaser titles)

Headline 6

Used for item-level secondary headings within components

(Used for marketing and brand voice.)

Headline 1

<h1 class="voice">

Headline 2

<h2 class="voice">

Headline 3

<h3 class="voice">

PARAGRAPH TEXT:

Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque.

Lundium magna nascetur tortor odio? Lorem tristique. Odio a? Nec sed? link text Tristique, et tristique odio, lundium velit porttitor tristique enim et augue enim tortor sit elementum aliquam. Diam phasellus, adipiscing lectus integer placerat, turpis ultricies natoque ridiculus magna natoque, duis pulvinar! Dignissim? Porttitor mattis tincidunt in porttitor, elementum placerat placerat vel tristique. Porttitor dictumst nisi, augue adipiscing porttitor. Velit rhoncus! Enim odio sit, ac proin urna.

Bold text: Phasellus porta, risus nunc ac cras

Italicised text: Phasellus porta, risus nunc ac cras

<p class="small">:

Paragraph Small: Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique?

OVerline:

Overlines are used to introduce a headline on account and checkout pages.


Overline
Titles:

Titles are used throughout site and navigation.


Title 1

Title 2

(Title 1 & 2 are the same size for mobile)


Title 1 Secondary

Title 2 Secondary
Product Names:

Used on CLPs & PLPs.


Product Name PDP H1


Product Name 1

Product Name 2

Product Name 3
Price:

Used throughout site.


Price 1 - $100.00

Price 2 - $100.00

Price 3 - $100.00

Price Bold 1 - $100.00

Price Bold 2 - $100.00

Price Bold 3 - $100.00

$100.00

Sale Red - $100.00
Text Link:

Used for stand alone links and the navigation



Embeded link example: Next generation in a family of nimble hikers, these waterproof Gore-Tex® shoes feature our new TNF™ FastFoam™ midsole system, which maximizes energy return so that you can cover more miles, faster.

Lists:

Unordered bulleted list
  • Phasellus porta, risus nunc ac <li>
  • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
    • Phasellus porta, risus nunc ac
  • Phasellus porta, risus nunc ac
Unordered list --small
  • Phasellus porta, risus nunc ac <li>
  • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
    • Phasellus porta, risus nunc ac
  • Phasellus porta, risus nunc ac