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

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.

Answer 3

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 4

You need to check these fonts side by side in some vector software like Adobe Illustrator or CorelDraw. If you find the fonts rendering in the same base offsetted fashion into these software also, then its something to do with the font itself. i.e. the fonts might be created with such pixels offset within the font file. Hence, no need to do any such changes into the .xib parameters for any UIButton or UITextField etc.

Share your font files here if possible.

Answer 5

maybe have a look at UITextView / UITextLabel's property 'thLabel.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;'

this defines the vertical alignment. It was helpfull for me a few days ago in a similar case

Answer 6

By the way Apple Font Tool Suite is not the one program that can help you. So if you don't want to install virtual copy of macOs, you can use FontForge for Windows to play with ascender and descender: element -> font info, then OS/2 tab and then metrics. And don't forget to check 'Apple' checkbox when generating font at the end. Good luck!