Mar 14, 2011

Working with Dingbats

Hello peoples!
So have you ever taken the time to browse all your fonts? If you're anything like I am, you probably have hundreds of them. There's tons of places to find fonts, but this post isn't about where to find posts, it's about how to work with what seem like the most pointless fonts: Dingbats! These are fonts like Webdings, Wingdings etc Click the title to read the full article.

The Wikipedia page for dingbat says:
dingbat is an ornament, character or spacer used in typesetting, sometimes more formally known as a "printer's ornament" or "printer's character".

In a better (more modern) term, a dingbat is a font that uses images. In fact, a copy of Windows always comes with 2 sets of dingbats: Wingdings and Webdings.
If you've tried to use these fonts and typed, say, your name, you probably get this:
(This isn't davdalx!!!)

Before you get angry and start deleting it, I'd like to tell you that you're using it wrong (no hard feelings) and that the ~dings fonts (along with any other imaged font) are more like convenient ways of adding certain images like play/pause/stop/next/previous buttons, close, maximize, people, houses, icons etc.

So how exactly do you utilize this?
At first, I thought it was some way to encrypt stuff, which right now doesn't make much sense, but as a child randomly clicking around (I think it was in Windows 98) I found a very useful tool: Character Map.
If you go into Start > Accessories > System Tools, you'll find Character Map there (even Windows 7 has it).

The Character Map is a tool that lets you select a font (at the top in the font section) and within the grid show all the symbols, numbers and letters that are within that font, and the accented ones at the very end. You'll also notice at the very bottom are two buttons... SELECT and COPY.

See where I'm going with this?

Some practical use
I'm gonna be in Photoshop for this one, but you can do this in any program that accepts fonts, even Word.
In the Character Map, head to the bottom of the fonts list and choose Webdings.

I've gone ahead and selected the Play button above.
Before I go any further, I'd like to point out that when compared to the screenshot showing Arial above we can see what each image is mapped to. Which means the spider at the top-left is "!" while the speech bubble (first column, 4th from the top) is mapped to "]".
But this doesn't mean we have to reference like this all the time, but should you find yourself using certain combinations often, you can use this method to remember which is mapped to what.

Okay, so what I'll do is click on the BACK button (so it's zoomed) and head down and click select. Then click on the PLAY and click select. The process continues for PAUSE, FORWARD and STOP, so that the "Characters to copy" section looks like this::

Okay, so what we'll do is simply click "COPY"
Now the text has been copied directly to the clipboard. Now we can head into our program (mine being Photoshop) and selecting the text tool and pressing Ctrl+V. Now something like this might happen:

Don't panic!
What's happening is that Character Map just copied the keys that produce what we want. So essentially if we went into Webdings and typed the above, we'd get what we want.
So to that effect, all we have to do now is head over to the text options and change the font to Webdings:

How cool is that? That's saved us a few minutes had we tried to draw that ourselves.
Now it's just a matter of adding a layer style and....

Why you'd like dingbats:
The image is a font, so we can scale it and do all those fancy things without worrying about it getting pixellated. It's also great because if you take a peak into After Effects' text animators, you can do some really cool stuff with them.

(1280x800 wallpaper. Click to view large)

Why stop there? There's lots of places to get dingbats from! Here are some links to get them for free! Go crazy!

You can also check out my Flickr Set "Forgery" where all the images (or most) were made using dingbats and fonts.

Please send me whatever you make using dingbats, or anything for that matter, and I'll be sure to comment or even feature it here :-D

Enjoy yourselves, guys!
Drop a comment below, or like and comment on the Facebook page

1 comment :