Moving other fonts down

I am trying to create a font consisting of icons for an app and website. When I add the font next to another font (any other font) it causes the text in other font to move down about 20%. Like the height of the font itself is taller and pushing everything else down. I have used fonts in the past that were taller and they usually just ascend higher than the fonts next to them and do not alter the baseline at all.

I have tried resizing the icons from the start, changing the height of the font I am making to match other fonts, and have not been able to understand the issue.

Any help is appreciated. Thanks!


This has much to do with how the app you are using the font in uses the font. Some apps measure the paths, some apps respect (some of) the vertical metrics stored in the font. If the app you are using the font in falls into that category: There is a tutorial about vertical metrics in the Tutorials section.

Thanks mekkablue. I’ll give that a look and see if I can figure it out.

FYI This is an iOS, android, and web app. It will also be used for the web and possibly for print. I was having the issue everywhere I used the font. Illustrator, InDesign, Safari, web views in both iOS and Android, etc.

Thanks again.

Illustrator alone can employ half a dozen ways of determining first line offset and line height.

This has to do with how you set up the vertical metrics and the overall size of the font. Try a bigger UPM value (1300 instead of 1000). This will produce smaller icons but it might help finding the cause of the problem.