Howdy, Stranger!
Categories
- All Categories
- 39 Introductions
- 3.6K Typeface Design
- 764 Font Technology
- 1K Technique and Theory
- 588 Type Business
- 435 Type Design Critiques
- 526 Type Design Software
- 30 Punchcutting
- 132 Lettering and Calligraphy
- 79 Technique and Theory
- 53 Lettering Critiques
- 461 Typography
- 289 History of Typography
- 111 Education
- 61 Resources
- 479 Announcements
- 74 Events
- 104 Job Postings
- 147 Type Releases
- 153 Miscellaneous News
- 259 About TypeDrawers
- 52 TypeDrawers Announcements
- 109 Suggestions and Bug Reports
Options
Just getting started...
Salux
Posts: 4
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!
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!
0
Comments
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!
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?
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.
@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.
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!
And yes... grid alignment with strokes is a bit more work. All of our strokes need to hit the .5 mark between whole numbers.
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!)
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!