Scaling up or down from this size is generally successful. Instead I’ve found that a grid of 60-80px side is often good for me. My tip is to not draw directly at your target size (for example 16x16px) or at very big sizes either. You can then to decide on a grid size for your glyphs. It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need. It’s no use designing finely-detailed icons that don’t work at lower resolutions. Find your design styleīefore you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.īegin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. To build your own icon font, the first step is to design icons – we will use Illustrator for this task – and then save them as SVGs. Each allows you to build a font by either ‘cherry-picking’ pre-built icons from public libraries, or by uploading and compiling SVG files you’ve prepared yourself. Traditionally font creation had been known as a difficult and demanding task, but thankfully building icon font sets, has become considerably easier thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. We’ll cover the use of SVG in another article. There are two widely-used methods to add a set of icons to your projects:

In these cases you’ll want to draw a new icon set from scratch. Or you may just want to better coordinate the design of your icons with the other design elements of your project. On some occasions, however, you may need more specific glyphs not included in a generic set. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks ( Bootstrap 3 Glyphicons is a perfect example). An icon system can often become central design element in your web project.

Adobe illustrator 8 add fonts