Skip navigation

Page Resource Logo


Navigation
Development
Other Links

Using Dingbat Fonts to Create Logos

Have you been trying to create a logo with your graphics program, but can't seem to get a smooth shape? If you have jagged circles and/or diagonal lines, one way to get around them is to install a dingbat font with the shapes you need.

What is a dingbat font? This is a type of font that uses small pictures instead of letters. So, in place of an "A", you might have a circle- or you might have a picture of a smiley face in place of a "c". It just depends on which dingbat font you pick up. The example below is from the ButtonButton font. This is how the capital "A" would look with this font:

Rectangular button

So, your first step would be to pick up a few fonts you would like to use. Here is a site that carries a bunch of Dingbat fonts you can try out for yourself, enjoy (One of these I recommend is the ButtonButton font, great for logos):

Font Freak

You'll get the font as a zip file, you will need to unzip it into your windows font directory to make it usable. If you do not have an unzip program, try Winzip from:

WinZip

Once you have the font installed, you can make use of it in your graphics program like you would any other font. Just use your font tool, choose the dingbat font you have, and type in the letter that would create the picture you want (The first dingbat picture would be "A", the next "B", and so on). Size the font to fit your needs and insert it into your image. Be sure that anti-alias is on, or is checked so that the font has the smooth edges you are trying to get. You can use any color you like as well. The next example shows the ButtonButton letter "A" with color. I used a font size of 48 pt. here:

Rectangular button in a different color

The reason the font will show up smoother than a normal circle or diagonal line is because the font can be anti-aliased, which is the addition of a similar color to your base color along the edges that makes it appear smoother instead of the jagged pixel-by-pixel appearance.

Now you can add in your normal text and special effects to create your own special logo. In the example below, I simply used my text tool to add a title in a plain font (Arial) over the image:

Rectangular button with the text My Site Title

Since this is an image with only a few colors, I saved it in .gif format. It should make the file size fairly small so your logo will load quickly for your visitors.

With the fonts, it should be easier to create a simple, smooth, and effective logo for your site. In this way, the jagged circles and lines can go away in favor of a sharp, smooth look.

----------------------------------------
Article by John Pollock

Topics: HTML & CSS | JavaScript | CGI & Perl | ASP/PHP | DHTML | Java | Contact Us | Privacy Policy

Copyright © 1997-2010 The Web Design Resource. All rights reserved. Disclaimer.
.