Wingdings is one of the more common icon fonts which has its origins way back in the early 1990s. It was made when Microsoft had developed its typography, making use of different characters from a group of symbols created by Kris Holmes and Charles Bigelow. Originally though, the symbols had been created by Holmes and Bigelow for their Lucida typography between the years 1990 and 1991.

Therefore, the original names for these fonts were:

  • Lucida Icons
  • Lucida Arrows
  • Lucida Stars

They were then reorganized, renamed and then released, referred to as Microsoft Wingdings in 1992. This came along with the most recent operating system at that time, which was Windows 3.1. Since then, the Wingding font has grown and with it, Wingding translators have emerged as well.

As time passed by, the family of the Wingdings font had grown as 2 newer versions were created. Wingding 2 and Wingding 3 were developed and the both of them came with more symbols and icons. These fonts came with a wide range of graphics and icons including, but not limited to:

  • computer, printer and mouse icons
  • folder, files and mail envelope icons
  • religion and astrology icons
  • decorative icons

This typography has then become so popular that it even has its own club compromised of enthusiasts who are trying to spread the “Wingdings Language.”

Another fun fact, it is believed that the name of the font comes from the character W.D. Gaster from the video game, Undertale. The name of the character, “Wing Dings” Gaster refers to the font as it is the language the character uses to speak. Throughout the game, all of Gaster’s dialogues are spelled using the Wingdings font. So to be able to translate his speech into English, you would need a wingdings translator or a wingdings translator chart.

This article is all about this particular font. As you will see, it has a variety of uses including website design and other projects. In this article, you will learn about using it in web design as well as how to translate it using charts which are readily available online and in your Windows system. Read on and be informed and guided by this useful information.

Wingdings Translator

Using Wingdings and Similar Fonts in Web Design

Images look great on websites however using them would be quite challenging as you are creating and designing the site itself. Aside from the fact that it can be quite challenging to find the right icon to use, editing icons and graphics can be quite challenging too. Especially if you’re not really used to doing so. Other disadvantages of using graphics and images on websites are:

  • They tend to add a lot of file weight to your website, especially if they are high res graphics
  • Making use of graphics and images would require more http requests
  • Graphics and images don’t usually scale well, they may either end up pixelated or distorted

To be able to create a design for your website which is more responsive, it is a lot more advisable to use icon fonts instead. Wingdings and other similar fonts come with a wide range of icons and graphics which you can use in place of actual graphics for your website design. Let’s take a look at the benefits of using icon fonts:

  • It’s a fact that bitmap images don’t scale well, especially when used in site design. These kinds of images frequently lose their quality when they are scaled up. And when you scale them down, you will be wasting the file size. For each image you use, you would need additional HTTP requests, which means that the load times of your website pages will be significantly longer. Finally, without reworking graphics in a type of image editor, it can be very challenging to rework the image itself. Icon fonts don’t have these problems.
  • Icon fonts scale well and they don’t need additional HTTP requests for every single character. You may be thinking of these fonts in terms of the characters which we use for writing. But actually, they’re just shapes and icons which you may be able to use in place of graphics or images.
  • They can be scaled easily without ending up distorted or pixelated. This is very beneficial since having any kind of distorted or pixelated graphics on a website doesn’t look good and might put off the visitors of your site.
  • Changing the colors of the icons is very easy. When you are able to do this, you can also match the colors of your icons to the colors of your text. Either match them or make a contrast to highlight or emphasize the content of your website.
  • They don’t come with backgrounds and you will be able to include shadows on them. Often images and icons come with their own background, which you cannot use unless you make the background transparent. There are icons available with a transparent background but they can be quite challenging to find. So it’s a lot easier to use these fonts as icons instead.
  • When making use of such fonts, your website will generally have good browser support. Users will be able to use them on different devices as the font will be able to adjust as needed. Aside from that, your web pages will load a lot quicker, which is convenient for the users and visitors of your website.
  • Can be used in designing and in text based CSS.
  • Can do anything that graphics and images can do, sans the other problems.

As you can see, using these kinds of fonts in web design is really beneficial. So if you’re planning to use these fonts, go ahead and search through a Wingdings chart to find the icons and graphics you can use. We will be discussing more about such charts further into the article, but first, let’s talk about some general information on how you will be able to use such fonts in web design.

Wingdings Chart

How to Use Wingdings and Similar Fonts in Web Design

A good use for Wingdings and other fonts is to send secret messages which need decoding. To be able to decode the message, you will have to use a Wingdings translator, those of which are readily available. But aside from that, you can also use them in website designing, which was described in the previous section. But the question is – how do you use icon fonts? Here are some helpful tips and steps for you:

The very first step to do when using such a font in web design is to embed the font. There are different applications which will help you do this. When you’re done embedding the font, you can work on it in three different ways:

1. Wrap the icon in HTML

This is the simplest way to work with the font. When you do this, what happens is the character will be mapped to a specific icon in the font you have chosen. This process is easy however it will add a meaningless character to your markup.

2. Use CSS generated content

Here, you will be using CSS generated content instead of adding the character straight into the html. To do this, you need to transfer the icon font in the icon class then move from there. When you do this, your HTML markup will be reduced, but the readers of the site will still be able to read the character.

3. Make use of a data-icon attribute

Just like when you make use of CSS generated content, you need to add the font you want into the icon class. But as an added step, you will create a character by making a reference to what is in the data-icon. Generally, it’s quite similar to the previous way and therefore presents the same problem of the character still being read out loud.

These are very general ways to use icon fonts, such as Wingdings in websites.

To be able to get more detailed information on how to use such fonts on websites, you can go ahead and do more research online. Now let’s move on to the different uses of Wingdings charts as well as how to find and use them. This information will guide you further in using the said font for purposes other than for website designing.


Uses of a Wingdings Translation Chart 

Now that you have learned a lot about the font itself, let’s move on to learning about the tools which are used to translate the said font to the English language. To do this, you can either use a Wingdings translation chart.

Some users may want to add some ornaments or a little bit of charm to their designs or projects and using this famous font is a great way to do that. This font doesn’t contain any of the usual characters and symbols, instead, it contains symbols. Using a chart which contains all the symbols will guide you in finding the right symbol and using the corresponding key on your keyboard for it. Here are some uses of such a chart:

  • Icon fonts like these cannot be used to spell English words, which means they are typically used for decorative purposes. That is unless you’d like to send a secret message which would need to be decoded. Designers regularly use this font to add visual appeal to a design or a file. A symbol from this font can be used as a divider or a frame. It can act like a bullet or even draw focus to the header when used around it. So the chart is important for you to be able to type in the right symbol which you will be using.
  • Another use of such a chart would be to aid finding different icons which can be used for different projects. As previously stated, these icons can be scaled well so when you are able to find the perfect icon from the chart, you can use it then scale it however you want.
  • There are plenty of different symbols found on the chart and when you have one on hand, you’d have a much easier time in general. You don’t have to press each and every key on your keyboard to find the perfect icon. All you have to do is refer to the chart, find the icon and use it however you wish.

As you can see, the main purpose of such a chart would be a reference for when you use the font. Typically used for designing, this font comes with a lot of symbols so having a chart is really handy. Now let’s take a look at how you will actually use this kind of chart.

Wingdings Alphabet

Finding the Wingdings Chart in Windows 

If you don’t want to have to search for the chart online, that doesn’t mean that you’re stuck. If you’re running on a Windows operating system, it generally comes with a Character Map application. You don’t have to search for it online as it’s already built into the system.

There are different ways to find the chart or character map, depending on your version of the Windows operating system

  • For older versions of windows, click on the Start button and locate All Programs. From there, click on Accessories, then System Tools then Character Map.
  • For Windows 10, the easiest way to find the character maps is by pressing the Start key (the key on your keyboard which has the Windows logo). Then on the Start screen, just start typing “charmap.” When you do this, you should see an element from the choices (if there are other choices), called Character Map. When you see it, click on it.
  • Another way to find it (on any version of Windows is to click on Start, then Run. When the search bar appears, type “charmap” and press Enter.

Once you’ve opened the character map, you’ll be able to choose which font to view and when you click on it, the chart will be opened. So now let’s talk about how to use a Wingdings chart.


How to Use a Wingdings Chart

Learning how to find the character map is very important. In fact, a lot of people don’t even know that it’s already built in! That is of course, if you are running on a Windows operating system. So once you’ve found the character map, it’s also helpful to learn how to open the charts and use them for whatever purpose you have.

  • From the dropdown menu, choose the Wingdings font. The dropdown menu is located at the top of the window so it’s pretty easy to spot. Once you click on the font you want, the chart will immediately be opened on your screen.
  • Look through the whole chart at all the icons and symbols which it contains. The symbols are very small but when you click on them once, you’ll be shown an enlarged version of the symbol or the icon.
  • Once you’ve made a choice of which icon to use, double click on it. When you do that, the character will appear on the copy box, which is located at the bottom of the page.
  • Copy the character then go to the application you are planning to use the character in. Paste in on the desired location.
  • You can keep on doing this or you can simply use the chart to find the right icon and type in the corresponding key on your keyboard.

The Character Map application is not only for copying the icons and pasting them on your file. Aside from that, you can also use it to browse through different fonts and choose which one you want to use. Now you can go online to search for a chart or be your own translator, which we will guide you with on the final section of this article.

Wingdings Translator 

Be Your Own Wingdings Translator 

This font, which was released by the Microsoft Corporation way back in the year 1992, makes use of symbols and icons instead of traditional letters and numbers. It’s is a standard font which is already built into all the different Microsoft Office processing applications. This font is typically used to translate different emotions when typing. Such symbols used to symbolize emotions are smiley faces, thumbs up, arrows and such.

When seeing a file filled with symbols instead of English content, you may feel confused or overwhelmed. Don’t panic though, translating this font back into English is very easy. Follow these simple steps:

  • Open the file (whether it’s an email, a document or a webpage) which has the Wingdings font used on it.
  • Highlight all the content. You can do this in two ways:
    1. If the whole content is in this font, simply press Ctrl + A on your keyboard to select all
    2. If only a part or parts of the content is in the font, place the cursor at the end of the text then press and hold the left button of your mouse. Drag the cursor to the other end of the text, while still holding down the left button of your mouse. When you’ve highlighted the selection, release the left button.
  • Press Ctrl + C on your keyboard to copy the text which you had selected or highlighted.
  • Open any of your word processing programs on the computer. Once opened, press Ctrl + V to paste the text to the new file.
  • Press Ctrl + A to select all of the text once again.
  • Find the font box or the dropdown menu for fonts. This is usually found at the top portion of your software window. Click on the down arrow for the list of different fonts to appear.
  • Scroll through the different fonts on the dropdown menu to find a font which is readable and click on that font. Once you’ve done that, the content which is typed in the Wingdings font will immediately be translated into English or any type of readable text.
TemplateLab May 4th, 2019