This page explains how our font families are used across communications and our main applications: See, Buy, and 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.
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.
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
Sharp Grotesk 20 Book, 28/36
Sharp Grotesk 20 Book, 22/28
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.
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
XLarge - 26
Large - 20
Standard - 18
Small - 16
XSmall - 14
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:
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
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.