Foundation
Typography
This page explains how our font families are used across communications and our main applications: See, Buy, and Use.
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:
Headline is at the top of the plane, and body copy is at the bottom. Both are flush left.
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.