Tutorial: How To Create A Custom Icon Webfont

The possibility of embedding a custom font in an HTML website revolutionised the potential of web development and opened up many new possibilities for designers. Soon, it became popular to embed various symbols as a font, and Font Awesome became an industry standard.

The great advantage of fonts over sprite graphics is their superior load time. Even so, let’s not forget how easy it is to change font color and size, or add effects such as drop-shadow, along with the ability to use animated transitions in a relatively simple manner, all with much more impressive results.

In addition to FontAwesome, there are a lot of other icon fonts, and even web applications, that will help you compile a font from the set of those available, or even your own icons: fontelo, fontastic, iconmoon, and so on.

Building your own icon font offers the opportunity to create a unique style, consistency, unified line weight, and pixel-perfect results.

Iconography

Icons can be divided into three basic groups: pictograms, ideograms, and arbitrary symbols.

Pictograms represent the subject they should describe, while ideograms represent the idea of something abstract and visually not very clear.

Imagine a construction project which involves subcontractors from several different countries. The person overseeing the plumbing might save some time by using icons instead of writing “We now have running water in the washroom, you can use it” on three or more languages, understandable to all workers on the site.

The first image shows the simplified likeness of the subject while the second is based on an idea of the difference between the genders. While most of us have a basic idea of what’s going on behind the door, we don’t want to know the details.

The third is an arbitrary symbol whose origin is not very clear; one theory says it is the letter “v” as “veritas” (lat. truth) and another says it is “n” as “νικώ” (O.Gk. win) pared with “x” “Χάνεις” (O.Gk. lose). Similar symbols are those for mathematical functions (+, -,*,/) , and so on.

Defining The Grid

Classic fonts are vectors and, therefore, can be upscaled infinitely, but problems appear when they are downscaled to the point where the paths are running out of pixels because everything on screen has to be rendered in pixels, and pixels are not (easily) divisible.

Rendering (Mac vs. Windows vs. Linux)

Subpixel rendering is nothing new, but different operating systems have different approaches, and therefore, very different results.

In this case we will use 32x32px icons which can be downscaled to 16x16px.

The basics of typography

An Icon font will likely be combined with some textual font, and therefore it should follow the same rules:ascender, descender, cap height, x- height, overshooting.

Workflow

Sketch -> Glyphs -> FontPrep -> CSS

Sketch

Most designers and developers, nowadays, are familiar with Sketch. It is fast, easy to master, and created specifically for interface design, not photo editing, drawing, retouching or illustrating.

The beauty is in its simplicity, and the simplest shapes are basic geometric “primitives” that can be easily drawn using built-in tools such as (R)actangle and (O)val.

By intersecting the square with the bigger circle we’ll get the circular clip, and by subtracting the smaller circle we will get that angular area of the tap.

The final shape looks very smooth as a vector.

However, vectors have to be rendered in pixels, and therefore, aligning points with the pixel grid is strongly recommended.

Here, we can see how the final shapes fits into the pixel grid.

People in the icon are also assembled out of multiple shapes, in this case mostly rectangles with rounded corners.

Carving the armpits as a negative space appears simple but sometimes a bug arises that may be avoided by grouping the smaller segments and then flattening them before combining with the rest.

This brings us to an important point: To minimise the risk of misrendering, it is best to flatten the icons.

The pixel view shows us there’s no misrendering.

To create the checkmark (or “tick”) symbol we constructed a golden rectangle, or at least a close approximation, carving out a piece and rotating it 45°.

Now, the vectors are finished, so we can move on to the next tool: glyphs.

Glyphs

A useful tool for creating typography is glyphs, and for many designers it is the only tool they’ll ever need; it’s intuitive and lightweight.

While it is possible to create keystrokes to store the icons, it is better to avoid single keys because every character has its meaning and search engines might misunderstand it.

Search engines, just like people, don’t like things they don’t understand. This is one of the reasons why the industry got rid of Adobe Flash. Consequently, we should store the characters in the Private Use Area (PUA):

“A range of code points that, by definition, will not be assigned characters by the Unicode Consortium. Currently, three private use areas are defined: one in the Basic Multilingual Plane (U+E000–U+F8FF), and one each in, and nearly covering, planes 15 and 16 (U+F0000–U+FFFFD, U+100000–U+10FFFD). The code points in these areas cannot be considered as standardized characters in Unicode itself.”

So, starting with uniE000, you can add 6400 icons until you reach the code point uniF8FF and if that is not enough, you can use an additional 2*65534 code points.

You can safely remove all preset characters from the new glyphs document:

The standard number of units per Em is, in most cases, 1000 but we can tweak this to achieve better results. In this case, we will go with 1024 (32×32).

Then, you can set ascender and descender values according to the previous sketch.

Now, back to Sketch. Before copying each icon, we’ll have to increase the size by 32. The good news is that you can do the math right inside the input field.

Now, let’s copy the shape and paste it in glyphs:

Some strange shapes will appear, but we can easily remove them and align the icon with the guidelines.

Let’s repeat the process for each icon:

Creating additional changes on the shape is also pretty easy, but there is no 32×32 pixel grid, anymore. However, guidelines will usually do the trick.

To distinguish the liquid structure of water from solid metal, we’ll add highlight on the water drop. To cut the shape out, we have to change the direction of the vector path.

And now use Cmd+E to export the font.

Web Font Formats

All contemporary browsers use OTF, TTF and WOFF font formats, but that wasn’t the case just a few years ago. Since every format is a couple of dozen kilobytes, it is best to export them all.

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s by Apple and Microsoft. TrueType is the most common font format for both Apple Mac OS X and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are commonly used on major computing platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C recommendation. WOFF is, essentially, OpenType or TrueType with compression plus additional metadata.

The goal is to support font distribution from the server to the client-side over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification defines a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

If you use older version of glyphs you will only be able to export .OTF, so you will need to use an additional piece of software:

FontPrep

To safely display a font on the web, we need more than just one format.

FontPrep is an open-source native Mac OS X app that converts TTF and OTF files into webfont bundles with full browser compatibility, just like FontSquirrel, but offline and without bugs in SVG files.

CSS

This is the standard CSS generated by Fontprep. You might need to tweak the paths of the font files.

@font-face {
  font-family: 'sanitaricons';
  src: url('sanitaricons-Regular.eot'); /* IE9 Compat Modes */
  src: url('sanitaricons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('sanitaricons-Regular.woff') format('woff'), /* Modern Browsers */
       url('sanitaricons-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('sanitaricons-Regular.svg#9f8f22f7878c9af22135aadf22148415') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

Defining the specific class and properties for the font:

.icon{
 font-family: 'sanitaricons';
 display: inline-block;
 font: normal normal normal 32px/1 'sanitaricons';
 font-size: inherit;

Subpixel rendering on OS X is a method of achieving the most truthful representation of the vector path, which might look a little blurry and even heavier in inverted combinations (light icon on dark background). To preserve the sharpness and line weight, especially in smaller font sizes, these properties become handy:

.icon.light-on-dark{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

And to create custom classes, we use a pseudo class before and adding the specific character as the content:

.icon.pipe:before { content: "\e001"; }
.icon.toilet:before { content: "\e002"; }
.icon.check:before { content: "\e003"; }

Conclusion

There are plenty of icons available on the internet. Some are free, some are not, some of them come in a set, and most of the time, you can’t find all the ones you want in a single set. Combining sets is not easy and often brings poor results. Searching for the perfect combination can take more time and energy than designing them from scratch.

To come up with an idea, begin with a Google image search. For more complicated concepts, one could look at A Dictionary of Symbols, by Jean Chevalier and Alain Gheerbrant, and for technical guidance I recommend references from The Icon Handbook.

Start sketching your ideas on paper and discuss them with your client, colleagues, friends or whomever fits into the target group. Once you have developed your idea, it’s time for digital production.

The first thing that has to be defined is the size. To achieve crisp results, it is of the utmost importance to align lines with the pixel grid. With higher display densities, this becomes less important, but it is still a common issue with current desktop computers (although things should improve as more users move to new 4K desktop displays and high resolution Retina-class notebooks).

Designers should test icons in various contexts, and on various potential users and systems until any issues are fixed.

Creating a custom icons webfont will bring a unique touch to any web page or app, boost performance, enable more customization, and make web development much easier in the long haul.