Typography

Buy

Web font scale

If using type for designing a website, please refer to DWG type guidelines for details and specifications. The information in the below section serves as general guidance.

Headlines

Use Sharp Grotesk 23 Book for section and page headlines. These headline styles are for Buy communications only.

Text

Use Atlas Grotesk Medium and Atlas Grotesk Regular for body copy. These text styles are also appropriate in Use communications. There are two different ways to use them:

• Label styles are used for subheads and short descriptions that don’t exceed three lines of text. The line-height is optimized for compact layouts such as tiles.

• Paragraph styles are used for long-form content that is expected to exceed three lines of text. The line-height is optimized for multi-line reading.

Label styles have a condensed line-height while paragraph styles have a more generous line-height

Combinations

Combining font styles

When Sharp Grotesk and Atlas Grotesk are combined in a layout, there are two options:

1. Headline is at the top of the plane, and body copy is at the bottom. Both are flush left.

2. Headline and body copy are centered together in the plane. This layout is typically used for a section heading.

Combining font styles and buttons

When Sharp Grotesk and Atlas Grotesk appear with a CTA button, the headline and body copy are flush left at the top of the plane. The button appears at the bottom of the plane, and its left edge is aligned with the text that appears above. The CTA is Atlas Grotesk Medium and has a 32px margin on all sides. See DWG Buttons for more information.

Font pairings

Headline and subhead

Headline with eyebrow

Putting it together

Colored plane and photo

Plans page

How to use font styles for more-detailed layouts.

Long-form text

How to use font styles for editorial text.

Align text blocks using the same simple subdivisions as planes and content

For more on how to divide a page, see Layout and planes.

Don’ts

Don’t use more than one headline in a module.

Don’t overwhelm a plane with text.

Don’t right-align the text.

Don’t use Sharp Grotesk for body copy.

Don’t use weights and widths other than Sharp Grotesk 23 Book and Sharp Grotesk 20 Book.