Custom UIFont baseline shifted

Question

I'm having a problem with custom UIFonts. I load 6 of them (font A in regular/bold/regularItalic/boldItalic, font B in condensed/condensedSlanted variants).

However, here is what it gives when rendered:

The two first rows are OK, but the last one exhibits a baseline problem.

I've tried changing the UPM, ascender, descender, x-height of the font in FontLab so that it matches the first font's values (which render correctly), but to no avail. I've tried converting the font format from OTF to TTF, no luck. Whatever I try, it always renders this way.

Does anyone have experience with this?

Answer 1

Here or even here you can find the solutions for you. It's all about baseline.

Note There's a problem with installing Apple Fonts Utility on El Capitan. See https://apple.stackexchange.com/questions/211138/apple-font-tools-cannot-install-in-macbook-pro-el-capitan for a workaround.

To edit these in the font you will need to download the Apple Font Tool Suite. Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:

1. ftxdumperfuser -t hhea -A d font.ttf This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for ascender and descender. Generally if you font sits too low you want to decrease ascender and increase descender. After editing and saving enter the following command into terminal to reconstruct your Font file:

2. ftxdumperfuser -t hhea -A f font.ttf You can now use the font.ttf file in your application. If the font still isn’t right just repeat the above procedure until you are happy.

OR you can easily change NSBaselineAttributeName as follows:

NSAttributedString *attrStr = [[NSAttributedString alloc] initWithString:@"a string"
                              attributes:@{ NSBaselineOffsetAttributeName : @-13 }];

Answer 2

Another interesting solution I found comes from the following post: http://www.andyyardley.com/2012/04/24/custom-ios-fonts-and-how-to-fix-the-vertical-position-problem/

So you should check if this is the case with your font, as he says there in one of the comments:

My solution actually fixes the custom font to work with iOS’s rendering engine allowing you to use it as a direct replacement for the standard fonts without any modifications.

And how does he do it?

Basically he suggests editing the metrics of the font using an external Apple tool (see font metrics reference at https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html#//apple_ref/doc/uid/TP40009542-CH4-SW66)

To edit these in the font you will need to download the Apple Font Tool Suite. Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:

ftxdumperfuser -t hhea -A d font.ttf

This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for ascender and descender. Generally if you font sits too low you want to decrease ascender and increase descender. After editing and saving enter the following command into terminal to reconstruct your Font file:

ftxdumperfuser -t hhea -A f font.ttf

You can now use the font.ttf file in your application. If the font still isn’t right just repeat the above procedure until you are happy.

Answer 3

Hi I have also faced such issue at that time I have set Title Content Edge accordingly for UIButton.

So if you are using this fonts for UIButton then surely you can use this.

Hope this will help you out.