13 :
Typography

Using Open Sans font as default. Primary font size is 15px, secondary font size is 13px.

Accessability Notes:

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

13.1 :
Font Sizes

13.1.1 :
Desktop Font Sizes

Globally shared font sizes across SHC sites.

  • @font-size-primary: 15px;
  • @font-size-secondary: 13px;

13.1.2 :
Mobile Font Sizes

Globally shared font sizes across SHC sites for mobile

  • @font-size-primary: 14px;
  • @font-size-secondary: 12px;

13.2 :
Spacing

13.2.1 :
Desktop Spacing

Globally shared spacing. There are two values for spacing between elements: 20px and 14px.

When to use 20px

As a general rule, 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

Basically, 14px should be used 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

13.2.2 :
Mobile Spacing

Globally shared spacing for mobile. There are two values for spacing between elements: 20px and 14px.

When to use 14px

As a general rule, 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 10px

Basically, 14px should be used 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

13.3 :
Titles

In discussion, "title 1" or "t1" etc. should be used instead of "heading 1" or "h1" as a rule. This Isn't to say that an H1 shouldn't be used when an H1 is appropriate, or that an H1 needs .title-1 applied to it. Merely that if design requires one case and best practices require another, options are available.

This takes HTML elements out of design conversations and places the onus of semantic/structural decisions on the developer.

Title 1 (h1, .title-1)

Font size: 30px/2rem | Line-height: 33px/2.2rem

Title 2 (h2, .title-2)

Font size: 25px/~1.667rem | Line-height: 28px/~1.867rem

Title 3 (h3, .title-3)

Font size: 21px/1.4rem | Line-height: 26px/~1.733rem

Paragraph Subtitle/Title 4 (h4, .title-4)

Font size: 17px/~1.133rem | Line-height: 26px/~1.733rem

Title 5 (h5, .title-5)

Font size: 15px/1rem | Line-height: 22px/~1.467rem

Title 6 (h6, .title-6)

Font size: 13px/~0.867rem | Line-height: 20px/~1.333rem


H1 with .title-3 applied

H2 with .title-1 applied

<h1>Title 1 (h1, .title-1)</h1>
<p class="secondary">Font size: 30px/2rem | Line-height: 33px/2.2rem</p>

<h2>Title 2 (h2, .title-2)</h2>
<p class="secondary">Font size: 25px/~1.667rem | Line-height: 28px/~1.867rem</p>

<h3>Title 3 (h3, .title-3)</h3>
<p class="secondary">Font size: 21px/1.4rem | Line-height: 26px/~1.733rem</p>

<h4>Paragraph Subtitle/Title 4 (h4, .title-4)</h4>
<p class="secondary">Font size: 17px/~1.133rem | Line-height: 26px/~1.733rem</p>

<h5>Title 5 (h5, .title-5)</h5>
<p class="secondary">Font size: 15px/1rem | Line-height: 22px/~1.467rem</p>

<h6>Title 6 (h6, .title-6)</h6>
<p class="secondary">Font size: 13px/~0.867rem | Line-height: 20px/~1.333rem</p>

<hr>

<h1 class="title-3">H1 with .title-3 applied</h1>

<h2 class="title-1">H2 with .title-1 applied</h1>

13.4 :
Anchors/Links

Anchors inside of body copy need to be underlined (addressed in the paragraph tag rules below).

Link text

Lorem ipsum dolor sit amet, link in body copy laborum asperiores recusandae cupiditate impedit error.

 <a href="#">Link text</a>
 <p>Lorem ipsum dolor sit amet, <a href="#">link in body copy</a>
 laborum asperiores recusandae cupiditate impedit error.</p>

13.5 :
Paragraphs

Paragraphs are set to have a 14px margin above and below by default. Elements that do not need to behave like paragraphs should not be using a <p> tag; spans, divs, or other elements altogether should be utilized in those cases.

Anchors/links inside of paragraphs/body copy need to be underlined.

Secondary text is currently set with @font-size-secondary. If an element needs to use this font size, applying the class .secondary will accomplish this.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt labore quas nemo corporis, laborum asperiores recusandae cupiditate impedit error.

Minus assumenda deserunt temporibus numquam vero error, cumque ullam.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt labore
  <a href="#">quas nemo corporis</a>, laborum asperiores recusandae cupiditate
  impedit error.
</p>

<p class="secondary">
  Minus assumenda deserunt temporibus numquam vero error, cumque ullam.
</p>

13.6 :
Lists

Currently there are two list styles: .list-links (for lists with more space between elements) and .list-disc (a bulleted list).

13.6.1 :
Link Lists

.list-links has additional spacing applied vertically to facilitate touch standards.

Applying .tiered folds in additional style considerations for hierarchical lists, like those found on sitemaps.

<ul class="list-links">
  <li><a class="primary" href="#">Primary link (if needed)</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
</ul>

13.6.2 :
Bulleted/Disc Lists

.list-disc creates a styled list using bullets.

  • List item one
  • List item two
  • List item three
<ul class="list-disc">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

13.7 :
Savings Text

Only concerned with color. Used in settings where red needs to be applied to a sale price or "Free Shipping" messaging, for instance.

CHANGE

Please note: it is advised to use the new .font-color-savings utility class if all you would like to apply is the savings red color. .savings may be leveraged in the future to add font weight rules as well.

Savings Text

Savings Text

Savings Text
Savings Text
 <h2 class="savings">Savings Text</h2>
 <p class="savings">Savings Text</p>
 <strong class="savings">Savings Text</strong><br />
 <span class="secondary savings">Savings Text</span>

13.8 :
Utility Classes: Fonts

In the event that a base font color needs to be overridden for another Enterprise value, these classes can be used instead of hardcoding hex values.

This is the primary font-family.

This is the secondary font-family.

This is the tertiary font-family.

This is the primary font size.

This is the secondary font size.

This is the primary body copy font color.

Adds secondary body copy font color rule

Adds action/link font color rule

Adds savings font color rule

Adds font color for Sears

Adds font color for SYW

Adds font color for Kmart

Adds font color for Craftsman

Adds font color for Kenmore

<p class="font-family-primary">This is the primary font-family.</p>
<p class="font-family-secondary">This is the secondary font-family.</p>
<p class="font-family-tertiary">This is the tertiary font-family.</p>
<p class="font-size-primary">This is the primary font size.</p>
<p class="font-size-secondary">This is the secondary font size.</p>
<p class="font-color-primary">This is the primary body copy font color.</p>
<p class="font-color-secondary">Adds secondary body copy font color rule</p>
<p class="font-color-action">Adds action/link font color rule</p>
<p class="font-color-savings">Adds savings font color rule</p>
<p class="font-color-brand-sears">Adds font color for Sears</p>
<p class="font-color-brand-syw">Adds font color for SYW</p>
<p class="font-color-brand-kmart">Adds font color for Kmart</p>
<p class="font-color-brand-craftsman">Adds font color for Craftsman</p>
<p class="font-color-brand-kenmore">Adds font color for Kenmore</p>


13.9 :
Horizontal Rules (HRs)

Defaults to thin.

Thin (Default)


Thick


<h4>Thin (Default)</h4>
<hr>

<h4>Thick</h4>
<hr class="thick">