Typography

Typography

All fonts are using Helvetica Neue, with options limited to Heavy, Roman, and Light

• Hero 80

  Line height: 80px

  Code

  <div class="font__eighty"><strong>Marketing 80</strong></div>

• Hero 50

  Line height: 50px

  Code

  <div class="font__fifty"><strong>Marketing 50</strong></div>

• Hero 36

  Line height: 36px

  Code

  <div class="font__thirty-six"><strong>Marketing 36</strong></div>

• Header 28

  Line height: 34px

  Header 28 Light

  Line height: 34px

  Code

  <div class="font__twenty-eight"><strong>Header 28 Heavy</strong></div>
  <div class="font__twenty-eight"><em>Header 28 Light</em></div>

• Header 22

  Line height: 27px

  Header 22 Light

  Line height: 27px

  Code

  <div class="font__twenty-two"><strong>Header 22 Heavy</strong></div>
  <div class="font__twenty-two"><em>Header 22 Light</em></div>

• Header 18

  Line height: 22px

  Code

  <div class="font__eighteen"><strong>Header 18</strong></div>

• CTA link 18

  Line height: 22px

  Code

  <a href="#!" class="font__eighteen">
    <strong>Header 18</strong>
    <span class="icon icon__arrow-right"><svg aria-label="Arrow Right"><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__arrow-right"></use></svg></span>
  </a>

• Header 16

  Line height: 19px, Paragraph spacing bottom: 16px

  Code

  // By default font size is 16px
  <div><strong>Header 16</strong></div>

• Body 18, for long-form copy

  Body link 18

  Line height: 33px, Paragraph spacing bottom: 20px

  Code

  // By default, p tags have 18px font
  <p>Body 18, for long-form copy</p>
  <p><a href="#!">Body link 18</a></p>

• Descriptor 16, for brief 1-3 line descriptions

  Descriptor link 16

  Line height: 24px, Paragraph spacing bottom: 16px

  Code

  // By default font size is 16px
  <div>Info 16, for brief 1-3 line description</div>
  <div><a href="#!">Info link 16</a></div>

• Disclaimer 14, for legal copy only

  Line height: 20px, Paragraph spacing bottom: 16px

  Code

  <p class="font__fourteen">Disclaimer 14, for legal copy only</p>

Typography heirarchy

• Primary header 28

  Body copy 18, consectetur adipiscing elit. Suspendisse mattis lectus id orci fermentum auctor. In in orci sit amet sem mollis tincidunt vitae a augue. Phasellus eu gravida urna, nec lacinia dui. Praesent tristique, leo vitae auctor consequat, dolor dolor euismod arcu, nec venenatis metus purus eget nulla.

  CTA link 18 with arrow

  Secondary header 22

  Body copy 18, consectetur adipiscing elit. Suspendisse mattis lectus id orci fermentum auctor. In in orci sit amet sem mollis tincidunt vitae a augue.

  Lorem ipsum, consectetur adipiscing elit. Suspendisse mattis lectus id orci fermentum auctor. In in orci sit amet sem mollis tincidunt vitae a augue. Phasellus eu gravida urna, nec lacinia dui. Praesent tristique, leo vitae auctor consequat, dolor dolor euismod arcu.

  • Fact 1
    Info 16, this is the first blurb of four
    Link 1
  • Fact 2
    Info 16, this is the second blurb of four
    Link 2
  • Fact 3
    Info 16, this is the third blurb of four
    Link 3
  • Fact 4
    Info 16, this is the fourth blurb of four
    Link 4

  Why do we use it?

  Lorem ipsum, consectetur adipiscing elit. Suspendisse mattis lectus id orci fermentum auctor. In in orci sit amet sem mollis tincidunt vitae a augue. Phasellus eu gravida urna, nec lacinia dui. Praesent tristique, leo vitae auctor consequat, dolor dolor euismod arcu.

  • First link in list
  • Second link
  • Link to a third page

  1. Disclaimer 14. This is the first disclaimer footnote

  2. This is the second disclaimer. This one may be longer than the first, but luckily the pragraph spacing is set to 16px so that the line height keeps the text legible, but the disclaimers are spaced apart for proper spacing.

Lists

Links in a list have a large touch target and ample surrounding space to ensure the user does not accidentally hit a neighboring target. Copy uses sentence case with the exception of proper nouns (including page titles), which should be title case.

• Links listed

  • List link 1
  • List link 2 that wraps because it's long
  • List link 3
  • List link 4

  Code

  <ul class="links__listed">
    <li><a href="#!">Vitamins</a></li>
    <li><a href="#!">Calcium</a></li>
    <li><a href="#!">Vitamin D</a></li>
  </ul>
  
  <ol class="links__listed ordered">
    <li><a href="#!">Vitamins</a></li>
    <li><a href="#!">Calcium</a></li>
    <li><a href="#!">Vitamin D</a></li>
  </ol>

• Unordered list

  • Unordered item 1
  • Unordered item 2 that wraps
    1. Nested item 1
    2. Nested item 2
  • Unordered item 3

  Code

  <!-- Unordered List -->
  <ul class="list-styles list-styles__unordered">
    <li>
      <span class="list__master-title">List item</span>
      <ul>
        <li>
          <list item>
          <ul>
            <li>List item</li>
            <li>Add more list items ...</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

• Ordered list

  1. Unordered item 1
  2. Unordered item 2 that wraps
     1. Nested item 1
     2. Nested item 2
  3. Unordered item 3

  Code

  <!-- Ordered List -->
  <ol class="list-styles list-styles__ordered">
    <li>
      <span class="list__master-title">List item</span>
      <ol>
        <li>
          <list item>
          <ol>
            <li>List item</li>
            <li>Add more list items ...</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  
  <

Desktop, Tablet & MobileProduct Price

The VPD stands for "View Product Details." This size should only be used in regard to the price of a product. The type is the same size across devices and screen sizes.

• ^$35¹⁹ 35 dollar and 19 cents

  Code

  <span class="price__contain">
    <span aria-hidden=”true” class="product__price"><sup>$</sup>35<sup>19</sup></span>
    <span class="sr-only">35 dollar and 19 cents</span>
  </span>

• ^$35¹⁹ 35 dollar and 19 cents

  Code

  <span class="price__contain">
    <span aria-hidden=”true” class="product__price product__price-red"><sup>$</sup>35<sup>19</sup></span>
    <span class="sr-only">35 dollar and 19 cents</span>
  </span>

• ^{2/ $} 6 ⁰⁰

  _or

  ^{1/ $} 4 ²⁹

  2 for 6 dollars and 0 cents or 1 for 4 dollars and 29 cents

  Code

  <span class="price__contain or-price">
    <span aria-hidden=”true” class="product__price or-price">
      <div>
        <sup>2/</sup><sup>$</sup>6<sup>00</sup>
      </div>
      <sub>or</sub>
      <div>
        <sup>1/</sup><sup>$</sup>4<sup>29</sup>
      </div>
    </span>
    <span class="sr-only">2 for 6 dollars and 0 cents or 1 for 4 dollars and 29 cents</span>
  </span>

• ^{2/ $} 6 ⁰⁰

  _or

  ^{1/ $} 4 ²⁹

  2 for 6 dollars and 0 cents or 1 for 4 dollars and 29 cents

  Code

  <span class="price__contain product__price-red or-price">
    <span aria-hidden=”true” class="product__price or-price">
      <div>
        <sup>2/</sup><sup>$</sup>6<sup>00</sup>
      </div>
      <sub>or</sub>
      <div>
        <sup>1/</sup><sup>$</sup>4<sup>29</sup>
      </div>
    </span>
    <span class="sr-only">2 for 6 dollars and 0 cents or 1 for 4 dollars and 29 cents</span>
  </span>