Fonts for the CS5 file type icons

Now that CS5 has been announced I can finally talk about one of the things that kept me busy. Over on Inspire, Shawn Cheris talks about the new Creative Suite branding system: the grid, the colors, the influences, and… the fonts. Well, he actually didn’t say a lot about the latter which gives me a good opportunity to do so.
CS5 SWF file icon at different sizes

As we wrote about a year ago, Adobe Clean is now Adobe’s corporate typeface. It is also the font that you see in the mnemonic icons and splash screens of our desktop applications. For CS5, the Desktop Brand team wanted to take that work further and update the file type icons with Adobe Clean, from Myriad. They called us, and I got to work on it shortly after.

The source files for Adobe Clean are multiple master fonts with Weight, Width and Optical Size axes which cover the whole design range, from Light Condensed to Extra Black. So what I had to do was generate several font instances optimized for each of the icon sizes, while trying to match Myriad’s weight and width, the typeface used since CS2 at least.
CS4 SWF file icon at different sizes

In the first round, I made four fonts: the XL, for the two biggest icon sizes, and the L, M, and S for the remaining three sizes. But when we started testing, two problems were noticed. One was that the fonts didn’t work for long names, such as MXML-G. The other problem was that the smallest size was not legible enough.The first issue was an easy fix, I just had to generate another set of four fonts that were more condensed. I also made them lighter to compensate for the greater number of letters and to prevent them from “clogging up”.
CS5 file type fonts
All fonts shown at their usage size. Base versions on the left, and condensed versions on the right.

The second problem was a bit more challenging to solve. I knew that the weight and width of the S size was about right, because some glyphs looked sharp and legible. However, they didn’t render that way all the time. In names like INDD or TIFF, one of the double letters would look good whereas the other would be fuzzy. This was happening because Adobe Clean is a proportional design, which meant that sometimes the vertical stems of the glyphs would align nicely with the pixel boundaries and render sharply, and other times they wouldn’t. So what I had to do was to change each glyph in a way that when rasterized it would adjust to the pixel grid more gracefully. The changes consisted of using a multiple of 125* for the glyphs’ advanced widths, and modifications to the outlines of the smallest size font. The resulting font is the XS size and you can see the adjustments made to the 5 and the S.
*125 font units are equivalent to one pixel when a font with 1000 UPM (units per em) is rasterized at 8 ppm (points per em).

CS5 file type fonts sizes
The five base fonts shown at the same size.

Letters S
Modified letter S in the foreground and unmodified letter S in the background.

Letters S and O
Modified letter S in the foreground and modified letter O in the background.

In the end the project consisted of nine fonts. Judging from Shawn’s comment in the Inspire article — “We love our talented Type team” — I’m confident that his group is pleased with the result. I hope you enjoy it too.

4 Responses

  1. Shawn Cheris says:

    Miguel— Thanks for your amazing work on CS5. I look forward to collaborating on CS6![My pleasure, and congratulations on the awesome branding you guys came up with. I look forward to more collaboration too — MS]

  2. Harry Fox says:

    Hi, they look great, to me you seem as if you know a lot about Font Making and Adobe. Have you got a Copy of this font? I would love to use that font for some new CS5 Icons I’m producing, if you do have a Copy of them just email me at: [removed]. Great font work anyway.Harry[Hi Harry, sorry but these fonts are for internal use only. — MS]

  3. Harry Fox says:

    Sorry I forgot to add in my last Comment what software are you using[I used FontLab Studio 5 and our AFDKO tools. — MS]

  4. Harry Fox says:

    I really need that font, it’s a disappointment I haven’t found anything similar to what Adobe use on their Icons, Started working on my CS5 Icon pack, I have done photoshop but it has the incorrect font and it would look much better if it did have the correct font instead of Myriad Pro[Harry, the font is exclusive to Adobe and can only be used in Adobe-branded products and materials – MS]

Comments are closed.

Miguel Sousa

Miguel Sousa

Team Lead of Type Development at Adobe Typekit. Responsible for devising solutions that get things done. Mostly font developer, but also typeface designer, time permitting. Deeply fascinated by the symbols that represent the spoken word. Hates the cold and thrives in the face of challenge. Chocolate junkie & t-shirt aficionado. @forcebold on Twitter

Typekit and Drupal Gardens: Let a thousand fonts bloom

The Typekit Team · April 22, 2010 · Using Type

Useful Details About Creative Suite 5 (CS5) Fonts

Nicole Miñoza · April 23, 2010 · Making Type