Hey, I was wondering if someone can give me a hint how to create a sharp icon web font. Let’s say I want to use the icons at 12px or 16px how can I make sure these icons are crisp. Right now some of my icons are badly anti-aliased (too smooth) and appear blurry.
I am using Glyphs Mini right now. Thank you very much for your help.
I can recommend this blogpost about the making of Octicons.
Keep in mind though that you do not have pixel-precise control about how your dingbats will render on every browser/OS combo.
A very good starting point, thank you for the link. It’s not going into detail very much, but I try to come along with it.
What makes me wonder is that the Octicons are only sharp at 16px while the Font Awesome Icon set stays sharp at any size. Of course I’d love to have a free scalable font rather than being bound to 16px.
I don’t think the “Awesome Icon Set” looks particularly crisp. Just as I would expect it. Can you show some comparison screenshots?
Hi Georg, below is a screenshot from within my web app. As you can see especially the speech bubble looks blurry although the lines are 100% straight and aligned to the grid in “Glyphs”.
You have to find a grid that aligned with the pixel grid when scaled to the final font size. How to do it is described in the blog post.
I just tried it myself:
If you what to use the font in 18 px, we need to define the ump in 18 units. So we divide the UPM by 18. The grid size is 1000/18 = 55.555. You need to round it. If you choose 55 (its easier to use) we get a new UMP size of 990. Put this in Font Info > UPM size.
Set the grid size to some fraction of 55, e.g. 11.
Now you align the drawings to the grid. The smaller grid allows some intermediate positions, but make sure that the main lines sit on the 55 unit grit (temporarily change the grid size to 55 or add some guide lines)
To get the sharp rendering, you need to set -webkit-font-smoothing:antialiased; in your CSS.
Thank you Georg.
So, if i choose 16px to be my default icon font size I’ll do the following:
16px * 64 = 1024
16 = unit width
64 = grid size, I can choose a fraction, like 4 but the main lines should be at multiples of 64 (i could place guides at the 64s, right)
1024 = x-height and em width (I have to set that for every glyph, right?)
See my font settings, are they right?
What’s the thing with “4px under the baseline”?
Thank you very much for your help.
Sorry, I did not remember that you can’t set the UMP size in the mini Version. I will need to add that.
For now, open the .glyphs file a text editor and search for “unitsPerEm” and change the number next to it to 1024.
Choose something like 800 for ascender and -200 for descender. Otherwise you would get strange line spacing.
Cap height and x-height are not very important, use them as guidelines or leave them as they are.
The width of the letters should stick to the 64 unit grid.