Problem centering dingbat glyph horizontally

Glyphs
#1

I have created a Dingbat typeface for use in our apps, web, presentations and print. On screen, I can’t seem to get it centered vertically inside a button for example.

Here’s how it looks in Glyphs:

My UPM is 1000 with a grid of 40/40.

Here’s my master settings:

When using it in Photoshop, I get a nice square box when I select a character in the Dingbat font. But in iOS and Textedit, I get a lot of extra space on top.

Could it have to do with line gap options? I don’t have any custom params in my Glyphs document.

Here’s TextEdit:

Any hints greatly appreciated!

Running Glyphs v1.3.23 (500) on OS 10.8.3 (Latest iMac 27")

#2

Ooh, you have tapped into a rather difficult topic. For one thing, it is probably not that smart to set the descender to 0.

Perhaps this helps, but do take your time for it. Pay special attention to the hhea values:
http://glyphsapp.com/blog/vertical-metrics/

Also, how do you test your font? Can you exclude font cache problems? Make sure you use a different family name every time you export:
http://glyphsapp.com/blog/eliminating-font-cache-problems/

#3

Yeah, I was fearing that :slight_smile:

I tried a lot of different hheaXXX combinations, but nothing seemed to help so I removed them altogether.

I managed to get it working (sort of) by changing the descender in my master settings to -98. I have no idea how that particular amount adds up to a working horizontal centering. It is not perfectly centered either, my pixel grid seems to be slightly off now (vertically). At least it’s much better than before.

Also. If I set the Cap Height Lower, the font gets a negative vertical offset in Photoshop. (Might be useful for someone)

#4

Update

  1. I made an error above and put the hheaXXX values into the “font” tab instead of the individual masters. Got it working better now. I removed the weird -98 descender and forced it to be D:0 A:1000 instead. This resulted in almost centered icons.

  1. But I noticed that when I selected a 200pt character in TextEdit, the selection was actually 200 x 204 pixels in regular and 200 x 202 in bold. Both should be 200 x 200 exactly. Bug?

This made me suspect that Glyphs (or Mac OS) actually does some calculation based on the glyphs. I changed one glyph (.notfound) to fill the full 1000 em space vertically:

After that, the selection is a perfect square 200 x 200 px, both for regular and bold!

The icon is still not perfectly centered (off by 0.5 - 1 px). But that might be Mac OS, and it is a cleaner solution that the above :wink:

#5

Thanks for your research, kanino!