Vertical alignment of iOS custom font in different languages

Question

I am using a custom .ttf font called Classic Robot in my iOS app. I am trying to add Japanese translation and this font appears to not support Japanese characters. This is not a problem initially because it appears iOS automatically changes the font to the system default font which can support Japanese.

My issue is that these two fonts have different vertical alignment when rendered by iOS as in the below pictures. As you can see, the Japanese font is aligned near the top of the white box (which is the frame) whereas the English font sits somewhere near the middle. This makes it difficult for me to layout text properly. Does anyone know why this might be the case?

I believe it might have to do with the ascender and descender properties on the iOS font I cannot be certain.

Answer 1

Your question is: "Does anyone know why this might be the case?" The answer is that the ascender property of the Japanese font is smaller than the Classic Robot one. This can be fixed by generating a custom Japanese font that has an ascender property large enough to make it match the spacing you get from the other font. This can be done by downloading the Apple Font Tool Suite and following the instructions posted in this answer.

Also for buttons you can solve the issue by increasing the insets:

myButton.contentEdgeInsets = UIEdgeInsetsMake(15.0, 0.0, 0.0, 0.0);

You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. This works for the button image and button title.