The Details are in the Symbol Fonts

It’s easy to get caught up in positioning divs, spans, and list items. After you’ve figure out that three-column layout and cleared your floats, it feels good to give yourself a pat on the back and call it day.

But just because the page has a style sheet, does that mean the page has style? What about the details? Many times design details aren’t priority to a coder. However, a custom bullet or special background-image treatment to headlines can be that detail that makes a site unique and noteworthy. Also, it’s pretty easy to do. I’m going to show some examples of details, then show how to do similar things with just symbol fonts.

When Jeffrey Zeldman redesigned his site a couple of years ago (to the greeniness that it is today) he placed a little flower next the date of his entries:

zeldman.com
zeldman.com

It’s a background-image, so there’s no extra mark-up. It’s not necessary, but it’s a nice touch, and it is one of the several unique design elements of zeldman.com.

I also noticed that Greg Storey (airbagindustries.com) prefaces his post headers with an image of an anchor.

airbag industries

Again, it’s not necessary, but it’s part of what makes airbagindustries.com that much more elegant.

Some coders don’t care to open up Illustrator, or don’t know how to use it, to make such design elements. The good news is adding details can sometimes be as easy as using symbol font. Here’s how:

Open up Photoshop (or whatever image editor you have that lets you save transparent .gif files). Use your type tool to type every key on your keyboard onto an empty canvas (be sure to include characters with the shift key as well). In the end, you might end up with something like the following. Here’s what I have in Arial:

Arial
Arial

Now, with your type selected, start cycling through your fonts until to you come to one with symbols. Here I’ve stopped at Wingdings 2.

Wingdings 2
Wingdings 2

Lots of little curly-cues in there, pointing hands, and icons and whatnot. Those could easily be used to add some tag-nicety.

Just choose one of those characters, crop it out, and save it with a transparent background. I’ve done so here with the uppercase “V”.

V
V

Next, attach it as a background-image in your CSS for some tag.

Don’t eat yellow snow!

How effective is that! Below is the html with inline styles. Mainly, you just want to make sure you pad the left side with enough space for the image to show:

<p style="
   background:transparent url(070208_uppercaseV.gif) no-repeat center left;
   padding:14px 0 10px 30px;
   font:normal 16px/16px arial;">
Don't eat yellow snow!</p>

In anticipation of Jeremy Keith’s new book, I checked out bulletproofajax.com, and I noticed something interesting in the pullquote:

bulletproofajax.com
bulletproofajax.com

It’s an excellent touch of class to an already classy blockquote. Nice decoration, right? It’s the lowercase “c” and “d” from Wingdings 2. See how it compares to the third and fourth character from the screenshot above of all the Wingdings 2 characters:

bulletproofajax.com
bulletproofajax.com comparison

A couple of years ago, I was adding an update to a photographer friend’s web site, and realized that his headers lacked some distinction. I decided to include the Wingdings 2 lowercase “h” as a background image for headers:

jayadkinsimages.com
jayadkinsimages.com

Also shown in the above image is the circle/arrow to the right of the word “brides”. I create those all the time by drawing a circle, then placing a lowercase “u” in using Wingdings 3 as the right-pointing triangle. (Those make good list-item bullets.)

Creating images from a symbol font can be simple. Also, because it’s a font, it can be resized without losing quality, just like vector graphics in that other Adobe application that a coder doesn’t care to open. Different sizes are just a font size away. Also, many systems are already equipped with some kind symbol font, if not a variety of them, so there’s no need to purchase anything.

I appreciate those designers who create design elements from scratch, tailored to their site. I should hope that this wouldn’t be a replacement for such creativity and talent. But for many sites, it isn’t necessary to reinvent the wheel, and making use what one already has access to in a unique ways can be an artform in itself.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Greg said:
Adobe Photoshop has a nice collection of shapes and you’ll find even more shapes/brushes that work in almost all popular graphics programs. And try to look past the Symbols and look for dingbats. They are a syle of typeface that is comprised of all symbols, usually pertaining to a theme.