Typography – Sears

Sears typography definitions and elements have been vetted for use on mobile and desktop web applications and are located in the global css.

Typeface

Open Sans is the standard typeface used by default for Sears online. It is a light, friendly and highly legible typeface. Open Sans has four weights: Light, Regular, Semibold, and Bold.

Open Sans Text Map

Font Sizes


The family of font sizes used on Sears was defined relative to a base font size of 15px for desktop and tablet and 14px for mobile. This standard sizes was determined with optimal legibility relative to the device in mind. Body copy should never go below 15px on desktop and tablet devices, and 14px for mobile devices, therefore body copy for desktop is defined as 15px and 14px for mobile.

There is some flexibility with ADA font size requirements since the original guidelines were written with print and therefore pt font sizes in mind. However, the basic summary of the WCAG contrast requirements is, "Text needs good contrast. If it's big text, it doesn't require quite as much contrast." The WCAG guideline requires 'large text' to be a minimum of ~18.66px and normal text to be between 14px - 16px. Both 15px (desktop) and 14px (mobile) meet the Level (AA) contrast minimum large font size requirements.

Read more developer notes on font sizes.
Desktop and Tablet
  • Primary font, or body copy, size is 15px
  • Line height for body copy is 20px
  • Secondary font, primary used for legal copy, size is 13px
  • Line height for secondary copy is 20px
Mobile
  • Primary font, or body copy, size is 14px
  • Line height for body copy is 20px
  • Secondary font, primarily used for legal copy, size is 12px
  • Line height for secondary copy is 20px

Spacing


To ensure consistent vertical spacing between sections, standardized spacing rules have been defined. The globally shared spacing for desktop and tablet is 20px and 14px. The globally shared spacing for mobile is 14px and 10px.

Read more developer notes on spacing.
When to use 20px on Desktop and Tablet
  • Elements that are general containers of elements should have 20px between them.
  • The space between rows of offers on the homepage.
  • The space between page sections on category pages.
When to use 14px on Desktop and Tablet
  • As space between sibling elements within a container.
  • The space between the image, title, price, and CTA on a product card.
  • The space between page sections on category pages.
When to use 14px on Mobile
  • elements that are general containers of elements should have 14px between them.
  • The space between rows of offers on the homepage.
  • The space between page sections on category pages.
When to use 10px on Mobile
  • As space between sibling elements within a container.
  • The space between the image, title, price, and CTA on a product card.
  • The space between buttons in a button set.

Desktop Titles & Pairings

Titles were developed with ease of legibility and optimal reading comfort of the user in mind. In discussions, "title 1" or "t1" etc. should be used instead of "heading 1" or "h1" as a rule in order to take HTML elements out of design conversations and prevent confusion.

Read more developer notes on titles.

Desktop Titles

Common Desktop Pairings

Provided to:

  • Show how to put these elements together.
  • Increase efficiency for teams. These are drag & drop pairings, including optimal padding.








Mobile Titles & Pairings

Titles were developed with ease of legibility and optimal reading comfort of the user in mind. In discussions, "title 1" or "t1" etc. should be used instead of "heading 1" or "h1" as a rule in order to take HTML elements out of design conversations and prevent confusion.

Read more developer notes on titles.

Mobile Titles


Common Mobile Card Pairings

Provided to:
  • Show how to put these elements together on mobile experiences.
  • Increase efficiency for teams. These are drag & drop pairings, including optimal padding.

Page Title (non PDP) - T1


Card Titles (non PDP) - T3


PDP Page Title - T3, Semibold


PDP Card Titles - T4



Color Palette


Font Colors

Primary Font Color
#001733
Secondary Font Color
#666666
Active Link Color
#005CCC

Accessibility Notes

  • Open Sans Light should not be applied to text smaller than 16px
  • Font appearing on a white background should be no lighter than #666, regardless of size.
  • Semibold text will always be font-weight: 600, Bold treatment is used only on pricing with a font weight of 700.

Brand Compliance

Chad Cline

    Associate Principal User Experience Architect

For more information on Sears brand styling, please refer to the Sears Brand Guide.

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.