This page explains how our font families are used across communications and our main applications: See, Buy, and Use.

On this page


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. 

Foundation Typography Use Mobile

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

Typography Use Web

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


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.

Foundation Typography Use Alignment

Center the text only for error messages / empty states.


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.

Foundation Typography Use Titles

In-product title font scale

Title Large

Sharp Grotesk 20 Book, 28/36

Title Standard

Sharp Grotesk 20 Book, 22/28

Title Small

Sharp Grotesk 20 Book, 16/26


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.

Foundation Typography Use TextTypescale

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.

Foundation Typography Use Text

In-product text font scale for web

Line heights


XLarge - 26

Large - 20

Standard - 18

Small - 16

XSmall - 14

Line heights


XLarge - 30

Large - 24

Standard - 22

Small - 20

XSmall - 18


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:

Foundation Typography Use Pairings


Foundation Typography Use PairingsUsage

Typography in layout examples


  • 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

Foundation Typography Use DontStackHeadlines

Don’t stack multiple headlines/titles.

Foundation Typography Use DontDiminishHierarchy

Don’t diminish the hierarchy.

Foundation Typography Use DontSetTextAtAngle

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

Foundation Typography Use DontCenterAlign

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

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

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