Creating a Custom Font for Use Inside Altia Design

 Software used: Adobe Photoshop, Adobe Illustrator, Altia Design, IcoMoon app (free online app)

 

This tutorial shows how to create custom font for icons from an Adobe Photoshop file. lt has a zip file attached which includes the Photoshop .psd file, the Illustrator .ai file, the resulting custom font, and a dsn with the glyphs in it:

https://altia.zendesk.com/attachments/token/MAsy7D7ej8ytCGNsHQWeel4QI/?name=altiaSupport_custom_font_tutorial.zip

 

Creating a custom font with custom glyphs could be useful for various reasons:

1)      Labels can be set to any color, and the color could be even animated using various mehods described in this other KB article:

https://altia.zendesk.com/entries/49238677-Creating-Color-Fade-Animations

2)      Some targets allow opacity animations to only be assigned to labels or Text I/Os, but not to images.

3)      With a runtime font engine, the font contains the glyphs for any size of the font (thus saving a memory vs. having to codgen glyphs for each size of the font if not using a runtime font engine).

 

Here is what the Photoshop file attached to this article looks like.

 

 

We will start with the seat heating icon. The first step is to examine how big the icon has to be – i.e. how big the resulted glyph will be. NOTE: Some targets have limitations for the maximum glyph size, in that case, an icon has to be sub-divided into multiple glyphs, such as 2 halves of a whole.

To find out the right glyph size, measure the smallest possible area for the icon. The size has to be divisible by 0.75, because in Photoshop, the DPI is usually set to 72, while in Altia Design, the default DPI is set to 96. The equation here is 72 / 96 = 0.75. The numbers which are divisible by 0.75 are for example 16, 20, 24, 28, 32, 36, 40, 44, 48… It is not required, but a good practice to choose sizes which are power of two (2, 4, 8, 16, 32, 64…).

TIP: If you do not want to worry about dpi conversion, set your Photoshop file to 96 dpi. For more on matching text size between Photoshop and Altia Design, see this article:

https://altia.zendesk.com/entries/72296733-How-to-Match-Font-Size-from-Photoshop-to-Altia-Design

 

In this case, the 32x32 was too small, and 64x64 too big, so we choose size 40x40 px.

 

 

 Select the rectangle tool and draw a new vector rectangle in that size inside the icon itself.

 

 

 

From the Path Operations dropdown menu, select Intersect Shape Areas. This way, the rectangle will not affect the visual appearance while still being present.

 

 

Open Adobe Illustrator and create new document sized 1024x1024 px.

 

 

 

 

Paste the shape from Adobe Photoshop and scale it to fill the 1024x1024 space completely. In this case, we need to scale it to 2560 % (1024 / 40 = 25,6).

 

 

Use the Align pane to align it to the center of the document.

 

 

Change the color of the shape to black and get rid of the helper rectangle. This could be done by selecting the top left corner with the Direct Selection Tool and hitting the delete key two times.

 

 

Before we save that file, we need to make sure the left bottom corner contains some graphics. Otherwise, the icon would be aligned to the left bottom corner of the graphics, causing some sub-pixel rendering problems.

To fix this, we can create a rectangle sized 1x1 px. This rectangle would be invisible on the glyph, but it would force the font rendering engine to calculate the glyph size from the bottom left corner of the document.

 

 

After creating a rectangle, align it to the bottom left corner of the document.

 

 

The document could now be saved in a .svg format. Default settings are fine.

 

 

 

 

Open www.icomoon.io in the web browser and create a new project.

 

 

Use the Import Icons button to import a saved .svg file and select it.

 

 

Select Generate Font on the bottom of the webpage. By default, the Unicode codes for the glyphs are out of range of ASCII values. For our purpose, it is better to choose codes inside the normal ASCII range, so we will set the code to be lower case “a” character. The ASCII code (61) will be filled automatically.

 

 

Before exporting the font, we need to set the font name. All the other settings could be left to default values; they do not affect the visual appearance in any way. After setting the font name, click the Download button to download a .zip file, and locate the True Type font file – the file with .ttf extension. Paste this file into the project folder, optionally you can install it into system. NOTE: As of the time of this article's creation, it is better to install the font vs. reference it by file name.

 

 

Before launching Altia Design, you can quickly examine the font file by opening the font preview. If everything is set properly, a seat heating icon should be displayed instead of lower case “a” character.

NOTE: The font only includes one character (seat heating icon). However, when other basic characters are not present, Windows displays them in preview with default font (Arial). That could be sometimes misleading.

 

 

It is a good practice to insert a screenshot of Adobe Photoshop file as a raster image inside Altia Design to have a guide for placing the labels.

 

 

After that, place either Label or Text IO object, set the font name to the name of the newly created font (in this case, hvac_font), and set the string to be “a”.

To calculate the font size, multiply the glyph size value (40) by 0.75. The resulted size in this case is 30 pt. TIP: If you matched the dpi in Photoshop to be 96 per  the KB article linked further above, you will not need to multiply/convert this value, nor perform any other related conversions mentioned in this KB.

 

 

To get the right position for the label, we can measure the distance from the bottom left corner in the Photoshop file.

 

 

If we enter those values to X and Y positions inside Altia Design, the icon should be in a perfect spot.

 

 

All we need to do is to hide the helper image and set the color to be white.

 

 

 

We can continue with the other icons in the same way. By copying and pasting the rectangle from the first icon, we not only have the rectangle already set to be in the intersect mode, but we can use right arrow to move it to the right side, while keeping the distance from the bottom the same.

 

 

After pasting the fan icon into Illustrator, it is clearly visible the icon is made from four different shapes. The overlapping areas could sometimes cause problems, so it is a good idea to merge it into one shape by clicking the “Expand” icon in the Pathfinder pane.

 

 

Here is how the font looks like with three characters.

 

 

For the rear defrost icon, notice how the top part of the icon is very thin. We need to fix this.

 

 

To examine what is happening, we need to go back to Adobe Illustrator. In here, we can set the grid to see where the “pixels” are. Since our icon is sized 40 px, we need the grid to be every 25.6 px (1024 / 40 = 25.6).

After setting the grid, every square on the grid is one pixel inside Altia Design (and inside Adobe Photoshop).

 

 

By zooming in on the top part, you can see what is going on here. The top line is about 1.5 px thin. Font rendering engine is always trying to make thing look “crisp” by aligning lines to whole pixels. In this case, the top line gets aligned to bottom pixel, and the bottom line gets aligned to top pixel. That renders the top part not 1.5 thin, but only 1 pixel thin.

 

 

 

There are many ways how to solve this problem. In the first place, it may be a good idea to not use decimal values for the line widths, but we can try to fix it for this icon.

The fix is to move it one-half pixel downwards, so the line would be in the middle of the pixel. We already know that one pixel inside Altia Design is 25.6 pixels in Illustrator document (1024 / 40), so we need to move it 12.8 px to the bottom (25.6 / 2).

You can see from the screenshot that now the top line should get aligned to the top pixel and the bottom line should get aligned to the bottom pixel. That would make this part 2 px thick, which would be little bit different from the original icon, but it would be more suitable for our needs.

 

 

Here is the exported icon used in Altia Design. Indeed, the top part is 2 px thick, but it does not look wrong at all.

 

 

 

 

To minimize the unused space (especially for wide icons), we can divide icons into multiple glyphs. The principle is the same, we just need to follow the routine multiple times for one icon.

Here, a recirculation icon is made from two glyphs. Notice the glitch on the roof of the car. The two lines are not aligned perfectly.

 

 

We can try another way how to solve this issue – have glyphs sized in the power of two values. This time, we can divide the re-circulation icon into two glyphs sized 32x32 px.

 

Here is the icon inside Altia Design. Notice how the roof now connects without any problem.

Having the size in the power of two values minimized the rounding issues, because for the 1024x1024 glyph, each pixel in Altia Design is 32 pixels in Illustrator (1024 / 32 = 32).

 

 You can now continue to use the steps above for all other characters which you might need in your custom font.