Typography

Sears uses Open Sans for all typography.

Kmart uses Helvetica for body copy, and PT Sans Narrow and Kmart Script for headings.

Global Settings

added 1.0.0
updated 1.4.4

Font Sizes

Role Size Less Var
Primary 15px 14px @font-size-primary
Secondary 13px 12px @font-size-secondary

The primary font size is used for body copy. The secondary size is used for fine print such as legal disclaimers and SEO copy.

Spacing

Role Size Less Var
Outer 20px 14px @content-spacing-outer
Inner 14px 10px @content-spacing-inner

The outer value is used between primary container elements. For example:

  • Offer rows on the homepage.
  • Page sections on category and product pages.

The inner value is used between sibling elements within a container. For example:

  • Between the image, title, price, and CTA on a product card.
  • Between groups of like elements (e.g., buttons in a button set).

Titles

added 1.0.0
updated 1.8.0

Sometimes accessibility or SEO requires the use of a heading element that doesn't match the appearance we want, so we use the term "title" to describe the look of a heading independent of its semantic value.

In these cases, the .title-1 through .title-6 classes can be used to apply the look of any heading level onto a different one, or even a non-heading element.

Kmart Script can be used in titles 1-4 by nesting the text in an <em> tag or adding the .font-family-tertiary class. Font weight is inherited from the parent element.

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
Kmart only: Font size: 23px/1.533rem | 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
Should be first-word capitalized (but this can't be reliably enforced with css)

Title 6 (h6, .title-6)

Font size: 13px/~0.867rem | Line-height: 20px/~1.333rem
Should be first-word capitalized (but this can't be reliably enforced with css)


Shop Fun. Save Serious.

Exercise Your Right to Save!


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<br />
Kmart only: Font size: 23px/1.533rem | 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<br />
<span class="kmart">Should be first-word capitalized (but this can't be reliably enforced with css)</span></p>

<h6>Title 6 (h6, .title-6)</h6>
<p class="secondary">Font size: 13px/~0.867rem | Line-height: 20px/~1.333rem<br />
<span class="kmart">Should be first-word capitalized (but this can't be reliably enforced with css)</span></p>

<hr>

<div class="kmart">
  <h1><em>Shop Fun.</em> Save Serious.</h1>
  <h3 class="font-family-tertiary">Exercise Your Right to Save!</h3>
  <hr>
</div>

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

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

Paragraphs

added 1.0.0
updated 1.8.0

<p> tags should only be used for text content, never as a general container. They inherit our base text styles and set margin-bottom to our inner spacing value.

Links/anchors inside of <p> tags are automatically underlined.

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

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

Secondary Copy

added ?.?.?
updated 1.8.0

Applies the full secondary text treatment (color: #666, font-size: 13px, font-weight: normal) for small print such as legal disclaimers and SEO text.

If you only require one of these properties, use the appropriate text utility instead.

A paragraph with .secondary applied.

When used on a title it applies the .title-6 style

It can also be used as a wrapper around multiple text elements

As above, nested titles have the .title-6 style applied.

Find the best home appliances with the latest technology at Sears

Whether you're moving into a new home or you've lived in your house for years, you need top-notch appliances to help keep your household running smoothly. From refrigerators and electric ranges to washer and dryer bundles, Sears has the best home appliances to help make everyday tasks easier so you have more time to do the things you love.

<p class="secondary">
  A paragraph with <code>.secondary</code> applied.
</p>

<h2 class="secondary">
  When used on a title it applies the <a href="#type-3"><code>.title-6</code></a>
  style
</h2>

<div class="secondary">
  <h2>It can also be used as a wrapper around multiple text elements</h2>
  <p>
    As above, nested titles have the <a href="#type-3"><code>.title-6</code></a>
    style applied.
  </p>
</div>

<!-- SEO example -->
<div class="secondary">
  <h2>Find the best home appliances with the latest technology at Sears</h2>
  <p>
    Whether you're moving into a new home or you've lived in your house for years,
    you need top-notch appliances to help keep your household running smoothly.
    From refrigerators and electric ranges to washer and dryer bundles, Sears has
    the best home appliances to help make everyday tasks easier so you have more
    time to do the things you love.
  </p>
</div>

Lists

We remove margin-top, and set margin-bottom to our inner spacing value.

Basic

added 1.0.0
updated 1.8.0
  • List item one
  • List item two
  • List item three
    • Nested list item one
    • Nested list item two
    • Nested list item three
  • List item four
  • List item five
  • List item six
<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>
    List item three
    <ul>
      <li>Nested list item one</li>
      <li>Nested list item two</li>
      <li>Nested list item three</li>
    </ul>
  </li>
  <li>List item four</li>
  <li>List item five</li>
  <li>List item six</li>
</ul>

Unstyled

added 1.8.0

Removes the default list-style, line-height, and indentation on list items.

Useful if you need list semantics but custom presentation. Note this only applies to immediate children list items. You will need to add the class to any nested lists as well.

  • List item one
  • List item two
  • List item three
    • Nested list item one
    • Nested list item two
    • Nested list item three
  • List item four
  • List item five
  • List item six
<ul class="list-unstyled">
  <li>List item one</li>
  <li>List item two</li>
  <li>
    List item three
    <ul>
      <li>Nested list item one</li>
      <li>Nested list item two</li>
      <li>Nested list item three</li>
    </ul>
  </li>
  <li>List item four</li>
  <li>List item five</li>
  <li>List item six</li>
</ul>

Horizontal Rules (HRs)

added 1.5.0

Defaults to thin.

Thin (Default)


Thick


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

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

Text Utilities

These are provided for components that require additional typesetting flexibility, such as hero slides, banners, and member messaging.

Text Color

added 1.5.3
updated 1.8.0

To ensure text color always matches our current brand guidelines, use these classes instead of manually specifying a hex value. These are particularly useful in conjunction with the icon font.

Text examples

Primary text color for the current site.

Secondary text color for the current site.

Action/link color for the current site.

Brand color for the current site.

Savings price color.

Success color.

Alert color.

Error color.

White, for use in promos with dark backgrounds. Also adds an underline to links.

Sears brand color.

Shop Your Way brand color.

Kmart brand color.


Icon font examples

Your card has been successfully removed from your account.

Credit card ending in 1234

<div class="title-4">Text examples</div>

<!-- Brand-specific colors -->
<p class="font-color-primary">Primary text color for the current site.</p>
<p class="font-color-secondary">Secondary text color for the current site.</p>
<p class="font-color-action">Action/link color for the current site.</p>
<p class="font-color-brand">Brand color for the current site.</p>
<p class="font-color-savings">Savings price color.</p>

<!-- Universal colors -->
<p class="font-color-success">Success color.</p>
<p class="font-color-alert">Alert color.</p>
<p class="font-color-error">Error color.</p>
<p class="font-color-white" style="background:#003980;">
  White, for use in promos with dark backgrounds. Also adds an underline to
  <a href="#type-utilities-color">links</a>.
</p>
<p class="font-color-brand-sears">Sears brand color.</p>
<p class="font-color-brand-syw">Shop Your Way brand color.</p>
<p class="font-color-brand-kmart">Kmart brand color.</p>

<hr>
<div class="title-4">Icon font examples</div>

<!-- Icon usage -->
<p><span class="shc-icon shc-icon-success font-color-success" aria-hidden="true"></span> Your card has been successfully removed from your account.</p>
<p><span class="shc-icon shc-icon-credit-card font-color-brand-sears" aria-hidden="true"></span> Credit card ending in 1234</p>
<p><span class="shc-icon shc-icon-logo-kmart font-color-brand-kmart" aria-hidden="true" style="font-size:36px;"></span></p>

Font Family

added ?.?.?

Sears currently only uses one font family (Open Sans), but the classes are provided for compatibility with Kmart.

Kmart's secondary and tertiary font families are only for use in headings and promotions (e.g., hero slides, banners, and member messaging).

  • .font-family-tertiary should never be used in product titles.

Primary font-family, for body copy.

Secondary font-family, for headings and promotions.

Tertiary font-family, for headings and promotions.

<p class="font-family-primary">Primary font-family, for body copy.</p>
<p class="font-family-secondary">Secondary font-family, for headings and promotions.</p>
<p class="font-family-tertiary">Tertiary font-family, for headings and promotions.</p>

Font Size

added 1.5.3

This is the primary font size.

This is the secondary font size.

<p class="font-size-primary">This is the primary font size.</p>
<p class="font-size-secondary">This is the secondary font size.</p>

Font Weight

added 1.8.0

Easily change font-weight.

  • .font-weight-light should not be applied to text smaller than 16px.
  • On Sears, bold is reserved for sale pricing text only. Everything else that requires a "bold" treatment should use semibold.
  • .font-weight-semibold renders as bold on Kmart, as we do not currently define a semibold weight for any of its fonts.

Light text.

Normal text.

Semibold text.

Bold text.

<h3 class="font-weight-light">Light text.</h3>
<h3 class="font-weight-normal">Normal text.</h3>
<h3 class="font-weight-semibold">Semibold text.</h3>
<h3 class="font-weight-bold">Bold text.</h3>

Open Sans

added ?.?.?
deprecated 1.8.0

Sets font to Open Sans

Sets font to Open Sans Light

Sets font to Open Sans Semibold

Sets font to Open Sans Bold

<p class="font-Open-Sans">Sets font to Open Sans</p>
<p class="font-Open-Sans-Light">Sets font to Open Sans Light</p>
<p class="font-Open-Sans-Semibold">Sets font to Open Sans Semibold</p>
<p class="font-Open-Sans-Bold">Sets font to Open Sans Bold</p>

Savings Text

added 1.5.0
deprecated 1.8.0

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>