Typography – Kmart

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

Helvetica

Helvetica is the standard typeface used by default for Kmart. It is a light, friendly and highly legible typeface. Kmart has three weights: Light, Regular, and Bold.

Helvetica Text Map

Kmart Script

Kmart Script was designed exclusively the Kmart brand and is to be used for headlines only. It can be used either alone or paired with PT Sans Narrow. If there’s fun in the headline, it’s got to be Kmart Script. Kmart Script has two weights: Regular, and Bold.

Download Kmart Script

Kmart Script Text Map

PT Sans Narrow

PT Sans is used on Kmart sites paired with the Kmart Script. PT Sans has two weights: Regular, and Bold.

Download PT Sans Narrow

PT Sans Narrow Text Map

Font Sizes


The family of font sizes used on Kmart was defined relative to a base font size of 15px, or 1em, 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.

Read more developer notes on font sizes.
Desktop and Tablet
  • Primary font, or body copy, size is 15px (1em)
  • Secondary font, primary used for legal copy, size is 13px (~0.867em)
Mobile
  • Primary font, or body copy, size is 14px (1em)
  • Secondary font, primarily used for legal copy, size is 12px (~0.857em)

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.

Titles


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


Mobile

Desktop and Tablet Common Pairings


Color Palette


Font Colors

Primary Font Color
#333333

Secondary Font Color
#666666

Active Link Color
#B10017

Accessibility Notes

  • Helvetica 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.

Brand Compliance

Aaron Albarran

    Art Director, UX

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.