Distributed Proofreaders has been around since 2000, well before the advent of modern image formats like SVG vector images and PNG raster images. The DP logo, therefore, was a GIF available in only the size needed for the website:
Fast forward 15 years and our logo is still 360×68 pixels with no hope of being used at any larger size, in any of the instances where a square image is needed (like Twitter), and no chance of being used in print. Over the years folks have filled the void by creating new raster images, some of a great quality, but never anything that was considered official and never in a vector format from which we could generate raster images of various sizes.
In modern logo development you design it in a vector format, such at SVG, and then rasterize it to whatever size you need for the web. In addition to a logo you need what’s commonly called a mark or badge, essentially a square design that readily brings your brand to mind when seen. Marks are often used to link back to your website.
Most large companies go one step further and include much more detail about their brand, including specifying colors, fonts, spacing, when to use which image, and much more. Some branding guidelines from companies you’ve probably heard of:
About two weeks ago I decided DP needed some modern branding assets. Loading up my trusty copy of Inkscape and all of the current images available to me, I created a “new” DP logo in SVG format we could use to create official brand logos. I also created a DP mark in SVG format. Today, we rolled them out.
Introducing the “new” DP logo and mark:
Included in the roll-out is a full branding page providing access to the SVG files as well as PNGs with both white and transparent backgrounds in various sizes. The nice thing about transparent PNGs is that because they have an alpha channel, we only need one PNG to use for all our different themes rather than one GIF per background color.
To round out the set, the branding page even includes a black and white logo without a drop-shadow for use in black and white print applications.
Making these was a fun foray back to my design and publishing days. Turns out no one knows what font the original logo is in. It’s likely some variant of Garamond, but none that I could find. Luckily I was able to find Amiri, a free font from Google Fonts that was a pretty close match. That worked for everything except the ‘dp’ in the center of the logo and the core of the mark. Those bits of the logo are very visually striking and the letter shapes in Amiri were too different from the original to use. Fortunately Linda, the general manager, had already done some work in Corel to vectorize those bits into an image for use on Twitter. After combining the two together (and converting the final text to paths for better compatibility) it was a simple matter of adding the drop shadow and exporting some PNGs.
The “new” logo isn’t exactly like the old one, but it’s pretty close and hopefully conveys the most important visual aspects of the original. And now they’re available in easily-consumable formats for virtually any media.