Dropbox
and Sharp Grotesk
All 294 fonts of it.
Dropbox
Brand Identity
In the Summer of 2017, Dropbox approached us to use the full family of Sharp Grotesk for their top secret rebrand. To what extent they would be using it was unclear until we saw an early design deck. Dropbox appeared to be using every weight and width of Sharp Grotesk’s robust family of 259 fonts. It was, in short, how we’d always hoped Sharp Grotesk would be used, to a degree we hadn’t anticipated. We were delighted.
A robust rebrand needs a robust font
Sharp Grotesk was integral to the Dropbox animus, because it gave them the visual language to showcase the multiplicity and diversity of their clients and the flexibility of their product. With 259 fonts, which we later designed additional italics for (see below), Sharp Grotesk allowed Dropbox to “speak in a variety of tones” to their diverse client base including, designers, professionals, scientists, creators, and more.
Logo Development
Along with their new rebrand and typographic voice, Dropbox needed a new wordmark. Under the direction of Dropbox Brand Studio, we drew a custom logotype based on Sharp Grotesk , and three additional marks for their subbrands: Dropbox Business, Dropbox Projects, and Dropbox Paper.
Original Dropbox Logo
2015 Logo Redesign
Sharp Grotesk Semibold 20 & Sharp Grotesk Medium 20 (Top to Bottom)
The primary logotype was fastidiously optimized over weeks, based on a custom weight in between Sharp Grotesk Medium 20 and Sharp Grotesk Semibold 20 that we created to establish a perfect visual hierarchy with the subbrand marks.
Final Custom Weight Dropbox Wordmark
Once we established the proper weight for the wordmark we entered the iterative process, reworking every letter, adjusting spacing, adapting the ascenders and descenders, tailoring the bowls, and fastidiously considering the placement of every point and handle until we reached the perfect balance.
Dropbox Subbrands
A primary interest when designing the Dropbox logotype and subbrands was to optimize letter widths, stem and bowl weights, spacing, and joins to create a perfect texture. We aimed to perfect the word spacing between “Dropbox” and each subbrand in order to emphasize individual word forms while insuring that the spacing of the glyph, logomark, and subbrand had the proper hierarchical relationship. We also resolved optical size discrepancies in texture with detailed kerning adjustments, and optimized the artwork for a wide range of optical sizes, ensuring that the same vector artwork maintained its flavor and legibility at small sizes without compromising visual appeal at larger sizes.
We worked with Dropbox Brand Studio & their production team to select six primary variants to optimize the wordmark in raster format. The goal in this exercise was to retain proper texture and incorporate subpixel renderings that would improve legibility at smaller scales for optimal performance on-screen.
Rasterizing type for small sizes is a unique and interesting challenge. The grid is ever present, and all typographic form must adhere to this paradigm.
The pixels of the logomark were made to align perfectly with the vertical metrics (1), and the vertical metrics were made to align to distinct pixel rows (1) (4) (5). Although the goal in rasterization is to align as much of the artwork as possible exactly to the pixel grid while maintaining the appearance of the original, some forms will never align cleanly. The diagonals of the “x” are a good example of this, and require grey pixels to properly illustrate. At actual size (in use), these grey pixels blend with the black and take on the illusion of smooth form.
Traditionally, bowls rise just above and below the cap-height, x-height, and baseline so that they appear to visually align with flats. In typography, this method of visual compensation is called overshoot. In small rasterized type, overshoot is best executed with grey pixels (3).
Spacing letters can be very difficult when adhering the shapes to such a coarse grid. While the natural spacing of the “o,p,b” (6) allows for optimal repetition of the bowl forms and their respective spacing to the adjacent stems, the last “o” would not, as aligning it to the grid in the same way would have made the “b-o” spacing appear too loose. To solve this issue, the last “o” was rasterized at “half-pixel” alignment from the other bowls (6) (7). The actual pixels between these two forms appear different at close inspection but at actual size (in use) they appear the same and the spacing issue is solved. The “r” was tricky to space as well and required connecting grey pixels to the adjacent “o” to simulate them being distinct but tightly spaced (2).
Sharp Grotesk is Extensive
Sharp Grotesk is a retail font available on Sharp Type offering a whopping 259 fonts. However, while the current retail build of Sharp Grotesk contains 21 widths (05-25) of each roman weight, the widest (width 25) masters of the italics were never completed. As such Sharp Grotesk contains widths 05-25 in roman and just 05-20 in italic. For Dropbox, 259 fonts just wasn't enough and they worked with us to develop the remaining italic masters for a new total of 294 fonts.
As we enter a new technological paradigm of digital typography with the advent of the variable font format, we see a world of potential for robust type systems like Sharp Grotesk. While we wait for the technology to catch up with wide support across browsers and applications, however, Dropbox found a way to seamlessly incorporate this functionality into their design.
At different browser sizes the font changes to a corresponding width, instead of scaling down the font.
Sharp Grotesk Romans
Sharp Grotesk Italics + New 21 - 25 Widths
Learn more about the development of Sharp Grotesk here.
Thank You
Many thanks to Jessica Svendsen, Aaron Robbs, and Kristine Sale whom we worked with closely on the project, and the entire Dropbox Brand Studio team. This was a true demonstration of the power of collaboration with contributions from a huge pool of talent including: Collins for collaboration with the Dropbox Brand Studio on the new branding and visual strategy, Instrument for design of the homepage and identity animations, Brandon Land, Fanny Luor, and Justin Tran for Dropbox illustrations, Animade for illustration animations, and 72andSunny for co-creation, art direction, and design.