FontLab in 8 days — Day 7: Beyond text¶
Your logo as font with FontLab 8¶
Did you ever commission or design a company logo? Or maybe a small set of symbols, pictograms, user interface icons — for a company, school, event or an app? Even if you just need one symbol, you usually end up with dozens or hundreds of files: PDF, EPS, SVG, PNG files, for light and dark backgrounds, monochrome and RGB and CMYK. Plus a “brand book”, a manual that is supposed to help users navigate through that labyrinth. Isn’t there a way to simplify all this? Have just one file that has my logo, plus perhaps all its variations and extra symbols, and such that it would work everywhere?
There is such a way: it’s called a font. The OpenType .otf font format can store many symbols made of high-resolution vector graphics. These symbols used to be monochrome, and needed to be colorized in the app where you use the font. In newest versions of OpenType, you can mix vectors and bitmaps, colors and gradients — that’s how the colorful emoji are made!
Let’s start simple: with a monochrome vector drawing of your logo. In a font editor like FontLab, create a new font, go to File › Font Info › Names, enter a name like “MyLogoFont” and click Build Names. In Font Dimensions, turn off Round coordinates. In the Font window pick a glyph cell that will contain your logo. We picked “one”, so the logo will appear when you type the digit 1. Open the EPS, PDF or SVG file of your logo in Adobe Illustrator or Affinity Designer and copy, then paste it into the FontLab glyph cell. If FontLab asks you to set preferences for pasting artwork, choose “monochrome contours” and “Descender to Caps Height”. Double-click the glyph cell to open your symbol, use Contour › Join if you see some paths that are white but should be black (see fig. 1).
If your logo or symbol has multiple portions with different colors, create more glyphs, like “two”, “three” etc., and put each portion into each glyph. When you’ll be typing your text, the text cursor with move ahead by each glyph’s “advance width” (like on a typewriter). In Metrics tool, move the sidebearings (left and right bounds of the advance width) for each glyph so that together, they take up the space of the full symbol. Each partial glyph can stick out beyond its sidebearings so that the portions that you’ll later colorize overlap nicely (see fig. 2).
If you’ve made a two-part logo in the glyphs “one” and “two”, you’ll be able to type “12”, colorize each digit, choose the font and get the result you want. With OpenType ligatures, you can make the typing even easier: in Features panel, create simple substitution rules that replace a series of input letters with the glyphs you’ve drawn. Click Compile and FontLab will create blank glyphs for the input letters — you don’t need to draw anything in them (see fig. 3).
And now the finale: in Font › Export Font As, click OpenType PS, click Customize, click Round nodes and handles and choose Keep fractional nodes and handles. Click Choose folder, choose your Desktop and click Export. On your Desktop, inside the MyLogoFont folder will be your fresh OpenType font. Install it, open a graphics program or text editor and type “12”. Colorize each letter and choose MyLogoFont from the font dropdown — voilà! If you created the ligature feature, you can even type the longer text, like “FontLab” (see fig. 4).
Now the logo is instantly available to all apps on your computer: Illustrator, PowerPoint, Word, InDesign, Photoshop… You can include the .otf as a web font that will work on your website. And that’s just the beginning. Next, you could turn a multi-color logo into an OpenType+SVG font that will work in Adobe Creative Cloud apps, or make a variable font with the optical size axis, where the logo or symbol adapts its shape depending on the text size!
Pictogram perfection: icon fonts in FontLab 8¶
Picture this: you’re a designer, and you’re handed a task to communicate a complex idea in a simple, universal language. You’re not allowed to use words, only visuals. What do you do? You turn to your trusty sidekicks: pictograms and icons. These graphic symbols shrink large concepts into bite-sized symbols. Quick to the eye, easy to understand, good icons and pictograms are visual haikus: simple yet poetic. They can enhance comprehension, help navigation, add visual interest, and work across cultures.
If you’ve created a logo and chosen a brand typeface, your own custom set will allow for a tailored, cohesive style. How? Three principles: simplicity, consistency, precision.
Keep your icons simple. Determine the subject matter, style, and number of icons needed. Sketch and scribble rough concepts with basic shapes like lines, simple curves, circles, squares and triangles. Stylize subjects down to their basic recognizable elements, remove unnecessary details.
Make your icons consistent: use the same style, perspective, and level of detail across all icons in a set, which helps users identify relationships and builds familiarity. Use a font editor like FontLab 8 where each icon can be a glyph (see figure 1).
There, start with the built-in tools to draw the vector skeletons of your icons. Use Bézier curves, ellipses, polygons and stars to create the basic modules of the icon set, and apply a stroke thickness to get a crisp result (see figure 2). Finally, use the powerful mechanism of element references to re-use the basic shapes in more complex icons.
Make your icons precise: can use a grid and guides to align the points in your drawings. And if you use a font editor like FontLab 8, you can also work with “pixel-perfect” integer coordinates. In fonts, and in icons made in a font editor, the “eM” is the hypothetical artboard on which you place your design. Let’s say you want to mainly use your icons a size that’s equivalent to the 18 pixels font size — then set “Font Info › Family Dimensions › Units Per eM” to 180 or, if you need more freedom for your Bézier handles, to 1800. Turn on “Round coordinates” and the points in your drawing will snap to the integer grid (see figure 3).
You don’t need to draw all icons from scratch. Perhaps you’ve picked an existing icon set that lacks one or two pictograms that you need. Drop all SVG icon files to a new FontLab font, select all glyph cells and choose “Element › Image › Make SVG Editable”, then “Font › Detect Composites”. FontLab will find identical elements across all icons and connect them to form references. Then use the streamlined, precise, intelligent contour editing tools to change one reference, and have all other update (figure 4). Magic, instant consistency and precision!
Test your designs to ensure they communicate effectively: use the Preview panel to look at a waterfall of icons in different sizes, then tweak until you achieve the right level of comprehension and clarity. Then turn your icon set into an OpenType font with “Font › Export Font As”, or into a set of SVG, PDF or PNG files with “Font › Export › Artwork Collection” (see figure 5).
Custom icon designs elevate interfaces and enhance user experience. They signify the time, thought and care put into a product. With the right mindset and tools, developing your own icon set is an exciting, rewarding process. Happy icon-making!