Typography & headings

Typefaces

There are two typefaces being used on Cars.com (responsive web):

Inter

CSS font-stack: "Inter var", Helvetica, Arial, sans-serif

This font is used on the responsive web platform for general page body copy and component text. All elements of our components and patterns should use this font for all purposes, other than headings or “display”-type renderings (which can include hero text, branding, graphical elements, etc).

Sharp Sans Display No.1

CSS font-stack: "Sharp Sans Display 1", Helvetica, Arial, sans-serif

The heading font is reserved for headings only, and should not be used for body copy or in long-form text. Exceptions can be made for “display”-type blocks of larger text in a hero or larger area.

Visit the Fonts Resources page to download font packages to your machine.

Recommended font-size values

• 16px is the default global font-size.
• 18px is recommended for long-form pieces, or heavy reading.
• 14px is used for helper and error text in Forms, and in Tooltips.
• 12px is reserved for Disclaimer text.

If using a font-size larger than 18px and your text is being used as a heading, it is recommended to utilize the pre-set Heading classes below. Large “display” text usage should be aligned with other uses or patterns across the site.

Size relationships

font-size pairings should be considered carefully. It is recommended to use two levels of separation between available font-sizes when creating adjacent bodies of text.

Body copy styles

• Global line-height for body copy is set at 1.5
• line-height for headings is responsive and is included in the Heading classes below.

Headings

Pre-packaged CSS classes for use in applying a visual style to any level of heading. For example, an h1 can have a sds-heading--3 style applied if the page template calls for the visual representation to be slightly smaller. This helps separate the visual hierarchy from the rigid underlying document outline.

Heading hierarchy

Cars.com page templates should use a standard hierarchy for structural and visual headings, though they do not necessarily need to match each other 1:1.

For example, a structural outline should look like this:

• h1
  
  • h2
    
  • h2
    
    • h3
      
  • h2
    
    • h3
      
      • h4
        
  • h2

The visual hierarchy should match, in that the headings should decrease in size from the top of the page to the bottom. A page title (h1) should traditionally use an sds-heading--1 style (there should be only one h1 per page). Page sections should use h2 heading markup and sds-heading--2 styles. Nested areas should use h3 and sds-heading--3 and so on.

The differentiation to note is that a module on a page can have a different level of markup heading and style heading. For example, a module title can use an h3 heading tag, but be styled using sds-heading--2. This does not affect the document outline or the SEO for this module.

Heading styles

The “brick”

See more about the “brick” under Separators