Very Specific Technical Question


I’m doing some experimental work using Chrome (63) as a renderer for print design. This is definitely off label usage of the software but as I said, experimental. This is important for the context of this question. The other software involved in this is Glyphs Mini (1.5.7) and OS X (11.12).

While doing these experiments I occasionally find that I need additional or modified characters in a font that I’m using. I’ve successfully used Glyphs Mini previously to open a base font I’d like to supplement, delete all the characters, create new/replacement characters, and export it as a new font named something like “Foo Supplement”. I can then set the font-family in CSS like
’Foo Supplement’, Foo
This will cause Chrome to use the supplemental characters from the new font where they exist and fall back to the base font where they don’t. It has worked well.

I’m currently working on an experiment where I wanted to add a lowercase ‘d’ to the font Bungee Regular ( I followed the same procedure but in this case, setting the supplemental font causes Chrome to calculate the line-height differently, resulting in vertical displacement of the text when the supplemental font is set in the CSS. I suspect this has something to do with the vertical writing support in Bungee, but unfortunately I’m still learning the technical ins and outs of font creation, and I’m unsure how to go about debugging this problem (design is a former career I still maintain as a hobby, I’m a software developer now).

I understand I probably can’t fix this with Glyphs Mini, but I’m very comfortable learning how to use something like the python FontTools, FontForge, or the Apple Font Tools to manually make adjustments to the Glyphs Mini output for this single character.

Any pointers as to how I could go about figuring out what is causing this discrepancy?

Through some dumb luck I figured it out.

I used FontTools ttx to convert the Glyphs Mini generated otf and original font to a ttx and noticed that in the hhea table the original had
<ascent value="860"/> <descent value="-140"/> <lineGap value="200"/>
Whereas the Glyphs Mini font had
<ascent value="1060"/> <descent value="-140"/> <lineGap value="0"/>
I changed the values and recompiled to an otf and everything lines up now. Would love to know if there is a way I could have done this from Glyphs Mini to begin with though.


The values are calculated from the vertical metrics values in Font Info, they are recalculated and overwritten at export time. Vertical metrics in OpenType fonts are a complicated matter, because they are saved three times in the compiled file, all of them have different requirements. You may get one set of them right by experimenting with the Font Info values, but the other two may still be off. In the full version of Glyphs, you can control all values with so-called custom parameters, but Mini does not have those, for simplicity’s sake. So: To be on the safe side, your method is OK because it works with the compiled fonts, and you can even automate it.