Icon font and vertical alignment


I’m trying to create an icon font to use in an ios app. All icons will have about the same height.

I have a problem with the that when I use the font in an iOS app the icons (characters) are net correctly vertically aligned and there is some space around each icon.

I have provided a few screenshots and of the settings for the font and the result.

Why are my icons not centered vertically and why is the so much space in above the font?

Font metrics: https://dl.dropboxusercontent.com/u/63179/font/Screen%20Shot%202014-08-19%20at%2013.4 4.48.png

Icon 1: https://dl.dropboxusercontent.com/u/63179/font/Screen%20Shot%202014-08-19%20at%2013.4 4.53.png

Icon 2: https://dl.dropboxusercontent.com/u/63179/font/Screen%20Shot%202014-08-19%20at%2013.4 5.01.png

Result: https://dl.dropboxusercontent.com/u/63179/font/iOS%20Simulator%20Screen%20shot%2019%2 0Aug%202014%2013.46.02.png

The links don’t work.

There are spaces in the URLs:

Font metrics:

Icon 1:

Icon 2:


Perhaps because you did not center them vertically in the iOS layout? It depends on what you used in Xcode/IB to get the glyphs onscreen. Keep in mind that text renderers may calculate extra offset for the first line (often ~20% of the em). This seems to be the case here. I suppose these are supposed to be squares, but they are 20% higher. Did you just apply redColor to the background of the text field?

The red box is a UILabel that I have size with sizeToFit the get the correct size of the label. The preferred result would be a label with an icon that is vertically aligned.

Could you send the .glyphs and the .otf file to support at this domain and we have a look.