Typography

All digital properties for Zebra use the Proxima Nova typeface.

Light Backgrounds

H1 Style

H2 Style

H3 Style

H4 Style

H5 Style
H6 Style

Paragraph Style

Bulleted / Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Aenean commodo ligula eget dolor
  • Aenean massa.
  • Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Numbered / Ordered List

  1. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
  2. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
  3. Nullam dictum felis eu pede mollis pretium. 

Dark Backgrounds

H1 Style

H2 Style

H3 Style

H4 Style

H5 Style
H6 Style

Paragraph Style

Bulleted / Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Aenean commodo ligula eget dolor
  • Aenean massa.
  • Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Numbered / Ordered List

  1. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
  2. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
  3. Nullam dictum felis eu pede mollis pretium. 

H1 Heading

The H1 heading style is reserved for page titles. If a page will not have the typical page title, e.g., campaign landing pages, the H1 style can be applied to the page heading. A page can only have one heading in the H1 style.

  • Fontweight: Bold (700)
  • Color
    • Light Background - #000000
    • Dark Background - #FFFFFF
  • Size: 34px large screens / 32px small screens (<700 px wide)
  • Case: Uppercase

H2 Heading

The H2 heading style is used for section headings on a page.

  • Fontweight: Regular (400)
  • Color
    • Light Background - #000000
    • Dark Background - #FFFFFF
  • Size: 30px large screens / 28px small screens (<700 px wide)
  • Case: Uppercase

H3 Heading

Use the H3 style for sub-headings.

  • Fontweight: Semibold (600)
  • Color
    • Light Background - #000000
    • Dark Background - #FFFFFF
  • Size: 24px large screens / 22px small screens (<700 px wide)
  • Case: Uppercase

H4 Heading

Use the H4 style for small text situtions, such as sub-text and addresses.

  • Fontweight: Regular (400)
  • Color
    • Light Background - #333D47
    • Dark Background - #E5E8E8
  • Size: 14px
H5 Heading

The H5 Heading style can be used as a sub-heading call-out to draw attention to a particular product feature or other important information.

  • Typically reserved for product information
  • Do not use on Gray (#5D656B) and Light Gray (#A6ADB2) backgrounds due to accessibility guidelines

 

  • Fontweight: Bold (700)
  • Color:
    • Light Background - #ED4D1C
    • Dark Background - #ED4D1C
  • Size: 20px large screens / 18px small screens (<700 px wide)
H6 Heading

The H6 style is used a content heading within a sub-section.

  • Fontweight: Light (300)
  • Color:
    • Light Background - #333D47
    • Dark Background - #E5E8E8
  • Size: 18px
  • Case: Uppercase

Paragraph Text Style

Use the Paragraph style for body copy on pages.

  • Fontweight: Light (300)
  • Color
    • Light Background - #333D47
    • Dark Background - #E5E8E8
  • Size: 16px