Mobile app version of vmapp.org
Login or Join
Jamie315

: Unifying sizing of font icon into a set with illustrator? I look around the web, and there are a lot of tutorials on how to create icons, but my question is, how do you unify the icons

@Jamie315

Posted in: #AdobeIllustrator #FontDesign #Fonts #Icon

I look around the web, and there are a lot of tutorials on how to create icons, but my question is, how do you unify the icons into a set using illustrator?

So here's the problem: I am a UI Designer, and icon creation is kind of a side job when needed. A lot of times, I use fontello to pick the ones I want. Development then use the fonticons like fonts onto the UI -- More often than not, I have to custom create them.

The icon creation part isn't the hard part, the hard part seems to be unifying them into a set. The sizing seem to be all different when they're converted into fonts even if we set them to all, say, 12px, due to the padding around the artboard. How do you account for that? Just enlarging the icons to the max artboard size either width or height?

But how do you account for the different shapes that appear to be bigger or smaller, for example, an icon (like the save floppy icon) where width and height can go to the maximum length due to the square nature of it, versus like, the refresh icon (circle outline with arrow sticking out). If I push both of them to the edge, the refresh icon will look smaller.

Is there a way to measure it, and account for all these problems?

Edit with example at the bottom (not my icon set but a font icon set from the web -- apologize to the author for not crediting, i don't know whose it belongs to)



I put a grid on it (imagine the red lines are individual artboard in illustrator). Notice how some icons are at the edge and some has padding/space around it. The question is, what is the rule, if any, with sizing, if I convert them into fonts using some generator like fontello?

Edit 2: A screenshot on fontello. When I make the artboard the edge of the icons, width or height. My icons seem obviously bigger than the default ones at fontello. So it seems like there may be some rule other people follow that I don't know about and I shouldn't be creating the icon to the edge of the artboard.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Jamie315

1 Comments

Sorted by latest first Latest Oldest Best

 

@Lee3735518

It probably has to do with the way you're importing/exporting them. Try exporting them with a transparent rectangle as a background. That way they'll all have the same base size.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme