Iconion: awesome icon creator

Embedding a symbol font is much beneficial than the CSS sprite. It helps to move the tiny icons into a single file of fonts. The file size and the caching of the symbol font is look like a CSS sprite, but it has some other benefits including high-resolution displays.

Many high-traffic websites have replaced their site’s image icons into single symbol fonts. These fonts are used as icons, glyphs, and decorations. Symbol fonts turn the blocky raster icon images into smooth vector images through HTML. Vectors provide more facilities than the rasterized images. Rasterized images cannot scale up their size when those are seen from a high-resolution display. On the other hand, the vector images don’t have such problems as they can be scaled up in any displays and the size of the images will be the same in any display.

In the past, designers or developers have to face the problem in embedding vector images into the HTML. That time they can only embed vector graphics in SVG and PDF files, but there were interoperability problems. But, now the problem has gone. Almost all web browsers including IE6 can embed fonts in an HTML page. So, there is no problem in viewing them in any high resolution display. Every browser can display them without any interruption.

In order to help in the symbol font creation, now lots of tools have been released. These tools will help you to upload any SVG file and export them as font for using in online.

According to the designers, the design for an icon or logo is subtly different at different sizes. They are different in line thicknesses and other sides. So, you need to have alternative designs in different sizes. On the other hand, a symbol font doesn’t have an alternative design in different sizes. For example, the design for 20 point icon or logo will be the same for 6 point or 120 point.

So, if you want to get different designs for different font sizes, you have to create a duplicate icon from the font file and set the appropriate glyph. You should select appropriate glyph according to the usages. There is a problem in viewing your design as you don’t have any idea how the user will view your design in their browser. Maybe their browser won’t switch your design appropriately. This problem cannot bring effect for most of the users, as many of them have utility icons for better social networking scale and feeds.

One of the major issues regarding the symbol font is that you will only get one color logo. You may give background colors, but when it is about multicolored icon, it symbol font cannot help you in that case.

Understanding the symbol font is much important for today’s designer or site optimizer. If you understand it better, then you will be able to create custom symbol fonts for your website by which you can create icons, logos and branding for your websites. You can impress your audience with these and optimize your website’s performance. So, it is the time to understand about symbol fonts and embed new techniques.