Make Yourself a (Font) Map

As webdesigners, we make use of hundreds (and possibly thousands) of different fonts every year, choosing just the right text ook for each of our layouts, small graphics, headers, and other projects. Symbol fonts, especially, have become very popular as a way to design matching social media icons, as well as general site commands (like Refresh).

However, if you’re working with many different symbol fonts, it can be difficult to remember which symbol occurs on which key when you’re using a particular font. Or, you may want a particular symbol and can’t remember which font has it. Fruitless searching follows, usually with a little (or a lot) of frustration included.

That is, unless you create something I like to call a “font map.”

What IS a Font Map?

This is an example of the font maps I’ve created for myself–this one corresponds to the Wingdings font, which is default on most Windows computers. The top group of four rows contains all the symbols that can be created with lowercase keys; the bottom group is all the symbols that are created by hitting Shift and a key.

How Do You Make a Font Map of Your Own?

You will need an image creation program–I use Photoshop, but even Microsoft Paint can do it (as I discovered while writing up this blog post!).

  1. Open a new blank image in your image creation program.
  2. Select the Text tool, and place a text box or text cursor onto your image.
  3. Type out all of the generally available keys on your keyboard, like I’ve demonstrated below:

    `1234567890-=
    qwertyuiop[]\
    asdfghjkl;’
    zxcvbnm,./

    ~!@#$%^&*()_+
    QWERTYUIOP{}|
    ASDFGHJKL:”
    ZXCVBNM<>?

  4. Select all the text you just typed/copy-pasted, and change the font to the symbol font you want to map out. Make sure the font size is big enough for you to read easily!
  5. Presto! A new font map! (If you want to, you can label the two different groups as I have done, and put the title of the font on the image, too. Just makes using your new font map a little easier.)

Does This Really Help? You Better Believe It!

I’ve been using font maps successfully in web design for several years now–it’s a real time-saver, meaning less minutes wasted typing and backspacing on my image till I find the right symbol. In seconds, I can flip through all my font maps, find the symbol I’m looking for, and be on my way to a finished design.

Try making one for yourself, and see how much easier it is to use the various symbol fonts in your designs. You’ll thank yourself later!

Leave a Reply

Your email address will not be published. Required fields are marked *