Three options for sharp, responsive logos

Web developers and graphic designers don’t like to see blurry logos, like we often see on retina displays. Generally, we will “fix” a unsharp logo by serving a PNG that is twice the resolution. This is a decent solution, but not an ideal one. Rasterized graphics will always be resolution dependent. Logos, in particular, wants to be what they are: vector, or line art. Here are some suggestions for making a logo crisp and responsive:

1. Icon Font

If you’re already using an icon font, and your logo is a single color, and it’s not too complicated… just add your logo as a glyph to the font. This is my favorite solution because it’s *free*; you don’t need to make an extra request, and your font file will not grow substantially.

2. SVG

Some people think “Dammit, why aren’t we using SVG already?” To me, SVG is like a very nice, but not perfectly ripe, fruit. Here’s why:

  • You need a fallback for IE 8, and maybe previous Android (but fallbacks are easy)
  • It’s an extra request OR an un-cacheable inline graphic
  • SVGs saved out of Illustrator are generally much bigger than PNGs, and need special care — for example, refined bezier curves — to be decently optimized

Once you put the effort into making an SVG logo, you can do special things with it, like style and animate with CSS.

3. @font-face

You can also load the font that your logo was created in, and then display it as text. But it may not be that easy, or an option. Branding is very particular, and logos often have special kerning between pairs of letters, as well as custom glyphs and art. It’s not always feasible to reproduce some logos as text. I see that the css-tricks logo is simply text with a font applied, but that font is also used in the body — they get it for free.

(One last idea: I suppose we could combine #1 and #3 and include the specific letters that make up a logo as glyphs in an icon font. That seems messy and perhaps is trying too hard. Let’s NOT make that #4, but it’s an interesting idea.)

There you go. Exploring one of these options is a bit more work than adding an additional, higher-res PNG, but the reward is a very flexible resource: a single, ultra-crisp logo in any view.