Typography

Use

Typography creates unity across the Dropbox product ecosystem and should always be consistent across platforms. Titles should be set in Sharp Grotesk 20 Book and all other text should be set in Atlas Grotesk. 

Mobile: Sharp Grotesk 20 Book for titles, Atlas Grotesk for body copy.

Web: Sharp Grotesk 20 Book for titles, Atlas Grotesk for body copy.

Alignment

To ensure readability, set most text left-aligned. This makes it easy for the reader's eye to find the start of each line. Only set text center-aligned if you can be sure that it won't span more than a few lines. Never set text right-aligned, justified, or hyphenated.

Center the text only for error messages / empty states.

Titles

Use Sharp Grotesk 20 Book for all in-product titles. There is a limited set of sizes for creating consistent hierarchy throughout products.

• Do not use Sharp Grotesk in the text editor in Paper.

• Use the font scale below for size and line-height in products.

In-product title font scale

Text

Use Atlas Grotesk Medium and Atlas Grotesk Regular for in-product body copy. Our font scale varies slightly across platforms. Web has the most options, followed by Android which has no XLarge size, and iOS which has no XLarge or Large and shifts each size up 2px.

Font scale per platform

It’s important to note the differences from web if you’re designing for mobile.  One set of predefined styles may be used for any platform; just be sure to use only sizes available for the platform for which you’re designing. These styles fall into two broad categories:

• Label styles have tight line-heights which work well for short snippets of text. Use label styles for strings of no more than a few words, and in contexts where line-length must be narrow.

• Paragraph styles have looser line-height and work well for longer chunks of text. Use paragraph styles for blocks of text with more than one sentence.

In-product text font scale for web

Pairings

Use scale to provide visual hierarchy. Body copy is always smaller than a title. The difference in size of the title and the body copy should be readily apparent.

By establishing effective text hierarchy, the user can more easily scan the content with less cognitive load. 

The following are examples of effective text pairings:

Usage

Typography in layout examples

Don’ts

• Don’t use Sharp Grotesk in a text editor (Dropbox Paper)

• Don’t manually adjust line-height or character spacing

• Don’t use widths of Sharp Grotesk other than 20 (examples: 23, 24, 25)

• Don’t use weights of Sharp Grotesk other than Book (examples: Thin, Semibold)

• Don’t overuse Sharp Grotesk and have too many titles

• Never use italics in titles, and try not to use italics in body copy, if possible

• Don’t use Sharp Grotesk for body copy

• Don’t overuse horizontal rules

Don’t stack multiple headlines/titles.

Don’t diminish the hierarchy.

Don’t set the text at an angle or on its side.

Don’t center-align text (exception: error messages / empty states).

Don’t use typeface weights outside those specified in this document.