Just getting started...

Salux

Hi Community!

I'm usually one for reading all of the manuals, but I'm hoping the community might have a few generous experts that wouldn't mind pointing me in the right direction for a project that fell into my lap at work.

I work at a software company and built a collection of icons for my team that we currently have as SVGs. A few weeks after sharing it with folks, I learned we also have a few people that are using icon fonts, so I'm trying to build an icon font they can use.

Fortunately (and hopefully not too overkill), I convinced my management to get a license of FontLab, so I have a great tool, but I'm so new to it that I'm having a hard time finding any good guidance/best practices on building an icon font. Things like setting up UPM, importing SVGs without distortion, editing SVG artwork, and supporting variations are on my radar.

Any help is very, very appreciated!

Yves Michel

You could go to the specialized Fontlab 8 forum: FontLab 8 - FontLab Forum
The forum users and the staff will certainly help you as long as you ask clear questions.
I personnaly don't build icon fonts but I'm sure you'll find members skilled in that domain.
There are also videos by Dave Lawrence and Adam Twardoch on YouTube.
Good luck!

Thomas Phinney

I am super busy the next couple of weeks at least, but would be happy to chat after that, to offer some general advice, and maybe a few specific tips.

Having been working on Google’s Material Symbols fonts for the past couple of years (as a contractor), using FontLab, I have learned a few things about this.

Are the icons built on any sort of grid system?

Cory Maylett

Salux said:

Fortunately (and hopefully not too overkill), I convinced my management to get a license of FontLab

FontLab is certainly a very capable, high-end tool. I use it myself, along with Glyphs. However, if all you have in mind is putting together a font of already-drawn SVG icons, Fontlab might very well be overkill, in addition to its rather steep learning curve.

Among other options, FontForge is free to use, and Fontself is an easy-to-use extension for Adobe Illustrator. Since you already have FontLab, though, by all means, learn to use it. Doing so might trigger an interest in diving deeper into type design and using the application to its full potential.

Salux

@Yves Michel - Yes! I've been getting signed up over there and watching videos/reading docs to get up to speed. There's just so much new material, it's tricky to connect it until I hit critical mass on understanding the basics. I'm getting there.

@Thomas Phinney - AWESOME! I'd seriously appreciate guidance and pointers. I'm doing my own investigation, but also have the Material Icons font I refer to so that I can see how close/far I am from where Google landed (and diagnose weird things I notice as I get started). I'll reach out in a couple weeks to check in and see what would work for your schedule to chat.

The icons are built on a 16px grid (SVGs built using strokes so that we can tweak the stroke width independently from the overall dimensions). It was great to see Google's icon refresh in the middle of building out the set as it sort of confirmed the concept of variable weight has some value for icons. Having an icon font that can support the variability while being built with fills (and not strokes) will extend the resource to many other teams at work.

@Cory Maylett - no doubt. I had tried a few tools out there to see if there was a quick way to get where we wanted to go (Nucleo was pretty neat). Variability support and possibly doing some actual type work down the road led me to FontLab. But yes, I feel like I'm trying to plant a seed with a backhoe right now.

Thomas Phinney

My main piece of advice is, if you are working on a pixel grid, make your units per em a nice multiple of that grid. Technically it could be any number, but I wouldn’t bother with anything that isn’t also a multiple of 10. So for example 40 units times 16 means a 640-unit grid. 960, 1280, lots of plausible numbers you could pick.

Doing this means you will be able to see point coordinates and instantly know when things are on-grid and when they are not. Your sanity will thank you later.

Using strokes instead of fills means that the stroked icons will no longer be grid-aligned, of course. Whether anyone involved will care about that I can’t say, just an observation!

Salux

Yes, I was wondering about that. Good call on the multiple of 10. I had landed on 512 UPM after some experimentation but assumed I'd be pulling in from an SVG file coming from Illustrator or something where the nodes were already dialed in.

And yes... grid alignment with strokes is a bit more work. All of our strokes need to hit the .5 mark between whole numbers.

Thomas Phinney

Yeah, we went from 512 in the old legacy font version of the icons, to 480—and then 960 when we needed more precision.

Even if you are initially pulling from an SVG file, you don’t know what the future will bring. AND, there could always be bugs in the source data… which you want to be able to catch. You should not assume the data is perfect.

As a former colleague of mine used to say, “if you haven’t tested it, it’s broken.” (That was Terry Dowling at Adobe, IIRC. Meaning that you should at least assume it could be—he like to put it dramatically. But he was not all that wrong!) 

Salux

FYI - I'm going to try and document the process online in case anyone else on the planet is attempting to jump into this, too. I started over in FontLab's forums: https://forum.fontlab.com/fontlab-8/newbie-icon-font-workflow/. Some things are FontLab specific, so I'll try to save those for that forum.

I changed the UPMs to 640 - great advice there!

One of the reasons we're looking into an icon font is because we can make variations. Our original intention was to use SVG strokes because it gave us finer control over weighting and we could match icon/font pairings better. Unfortunately, in practice people didn't want to deal with that control and just wanted an icon. Coupled with some oddities in stroke terminals where we had to use masks to make them look right, this effort will let us move to 100% filled contours while still having the ability to adjust weight through variations. Once the workflow seems dialed in, we'll be able to adjust the stroke weight for our thinnest and heaviest versions of an icon, outline the strokes, and then create the variations from the extremes.

And yes, testing will be an absolute must. Fortunately, that's built into the process over here!