Iconic Font — Brief

What is Iconic Font and How to Create a one for next Project?

A Font is a subset of Typeface. Well, Let’s make it a bit clearer — “Times New Roman” is a typeface and “Times New Roman Italic” and “Times New Roman Bold” are two separate fonts of “Times New Roman” Typeface.

There are Four Fonts for Times New Roman Typeface

A Font can be explained as a set of characters which are represented with unique styles. Each character in the Font is called “Glyph” which is pronounced as Glif. A character can be drawn in different styles might be bold, italic or condensed and each of these styles which represents the character is a Glyph.

Glyphs for character “a”

Each Glyph in a Font is assigned with a unique numeric value called “Unicode”; which is used by different programs and softwares to identify and display a particular Glyph for a particular Character.

Now, Let’s say what if a Glyph is replaced with some Custom Shape rather than alphabet or numeric style like a Sun, a Gear or a Pencil Shape? Well! That’s going to be “Iconic Font”.

Why to use Iconic Font?

The Font holds information in the form of vector data and Font never pixelates, even if it’s scaled up or down than its actual size and that’s the boon Iconic Font comes with. If an image (might be PNG, JPEG or GIF) is used instead of Font Icon it will pixelate whenever scaled more than its size and will also look clumsy even if it’s scaled down than its original size and then it becomes a compulsion for a designer to create different variations of the same image for different screen sizes to avoid distortions. Whenever a design is prototyped for portable devices, it’s quite impossible to create numerous variations for each image and that’s the reason to make use of Iconic Font.

Types of Font Format

A font comes in different font formats. Different browsers have different support to the font formats. Whenever a font is created, it’s generated in following font formats to extend the browsers support—

1. OTF — Open Type Font (Supported by Modern Browsers)
2. TTF — True Type Font (Supported by Modern Browsers)
3. EOT — Embedded Open Type (Supported only by Internet Explorer)
4. WOFF — Web Open Font Format (Supported by Modern Browsers including Internet Explorer)
5. SVG — Scalable Vector Graphics (Supported only by Safari)

Now, Let’s get into it and create an Iconic Font for your next project. FontForge is an open source tool which is used to create Fonts and is available for Mac, Windows and Linux Operating Systems. Grab a copy of FontForge and install it on your respective machine.

User Interface of FontForge

Each unicode block holds the information of a Glyph and a Glyph can be designed in each unicode block by a Double-Click over the unicode block which will pop up the actual workspace to design the glyph.

User Interface of FontForge to Design Glyph

However, FontForge is sufficient enough to design a glyph for a Font, but if you already have hands on vector softwares like Inkscape or Adobe Illustrator that’s going to be more efficient and a bit quicker.

Now, Let’s use Illustrator to create a small Icon Set and assume its name to be “Woodie”.

• Create a new Document with size 100 x 100 (pt).

Create New Document with RGB Color Mode

• Design Icons within fixed bounding box for better symmetry and alignments.

Guides are used to create Bounding Box

• Use File → Save as to export each icon as an SVG file and save it with its respective name to keep yourself away from the mess.

Icon Exported as Individual SVG File

• Now open FontForge and Create new Document. Go to Element → Font Info and fill the necessary details, make very sure you fill in all the details carefully as these attributes will be used when the font will be embedded in the Web Project.

• Switch to General Tab and set Ascent and Em Size to 256 and Descent to Zero and click OK button to save.

Use Ascent and Em Size to 256 and Descent to Zero

• Double-Click over the very first unicode block to edit the Glyph.

Double Click the Unicode Block to Edit Glyph

• Once the Workspace to design Glyph opens, Go to File → Import and import the very first SVG File.

Import SVG File to the Workspace

Choose SVG as a Format

• Once you have successfully imported the SVG as a Glyph, close the workspace and move back to Glyphs unicode block window.
• Repeat the same step to import all the Icons one by one as glyphs in respective unicode blocks.

Import SVG Icon as Glyph in each Unicode Block

• Go to File → Save As and save the raw file of the Font Project with .sfdr extension (Make sure you Save as Directory) so that Icons can be added later on whenever required.

Save Font with .sfdr Extension

• Go to File → Generate Fonts to generate the Font.

Generate Fonts

• Generate Font in different font formats, so that it can be supported by different browsers.

Generate Font in OTF, TTF, EOT, WOFF and SVG

Font Generated in Different Font Formats

Now, “Woodie” Font can be installed and used by different softwares and programs for different purposes.

Generated Font Formats can be included and used in web projects via CSS font-face rule.

/*CSS*/
@font-face {
  font-family: 'woodie';
  src: url('../path/woodie.woff') format('woff'),
       url('../path/woodie.ttf') format('truetype'),
       url('../path/woodie.svg') format('svg');
}
.icon{
  font-family: 'woodie';
  font-size: 2em;
}
.icon-user{
  content: "\Unicode";
}
.icon-gear{
  content: "\Unicode";
}
.icon-pencil{
  content: "\Unicode";
}
.icon-check{
  content: "\Unicode";
}

The icons will be used using the CSS content property which will hold the Unicode value to call the respective icon; and each icon has a unique unicode so it’s needed to create unique class for each icon.

<i class="icon icon-user"></i>
<i class="icon icon-gear"></i>
<i class="icon icon-pencil"></i>
<i class="icon icon-check"></i>

Color and Size of the Icons can be customised using CSS color and font-size properties. Feel free to Download an archive of this implementation.