2

I'm not actually a font designer. I'm a web developer who's using Glyphicons, a library of icons encoded as glyphs within a font. I'm using them in Bootstrap 3 and they're really great because they scale to any size and can be set to any color, making them really flexible for web design.

Anyway, the icons within Glyphicons are great but there are many icons which simply don't exist and I would like to create my own custom icons. I actually managed to do this by editing an open-source font with FontLab Studio 5 and adding my own custom glyph. Here is the glyph viewed within FontLab:

In FontLab

And this is the result when used in a web page:

Actual usage

For comparison, here are some Glyphicons at the same font size:

Glyphicons

As you can see, the Glyphicons look much better, even though they're both outline fonts. I'm guessing there is something you can do to improve rendering at specific font sizes, but I just don't know what I don't know. Any pointers in the general direction would be appreciated.

Improve this question
2
  • I don't have direct experience with this so no answer, but it may be instructive to examine the Glyphicon set for comparison. It looks like they have 2 default sizes (regular and "halfling") which they have targeted, probably using a pixel grid appropriate for the two sizes. In your example, the gap between the frame and the reflection scales to nothing, so you need to figure out the smallest unit size for the scale you want.
    – horatio
    Oct 1, 2013 at 21:12
  • Thanks. I see what you mean about the gap between frame and reflection. However, if I tweak that so it looks good at small sizes, it will look bad at bigger sizes. When designing icons, you can have different icons at different sizes, and each size can be custom tailored to look good at that size (for example, remove detail at smaller sizes, etc.). Is there a similar thing available when designing fonts? Like perhaps different outlines for different point size ranges?
    – T Nguyen
    Oct 2, 2013 at 1:58

1 Answer 1

Reset to default
1

To make the icon sharper, you need to keep in mind the intended dimensions for smaller versions while drawing the source.

Try drawing your icon on a grid that is a factor of your smallest size.

e.g. 10px icon, 10x10 grid 16px icon, 16x16 grid

Makes sense in my head anyway. :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.