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?

Lombardi

Hey, have you got solution for this. I have tried many things but not got proper solution. Even this problem is with some specific fonts only not for all. – Sheryllshetland

Comment on my progress so far: I have found another .otf file for the same font; this time it works perfectly. On Monday morning I'll study the differences between the two fonts, specifically the "Font metrics" part in FontLab, and report what I will find. – Lombardi

The same issue: #7535998, #5415230 – Comestible

Thanks Pavel, according to my research it really was a problem with the ascenders. I fixed it this morning by editing the font in FontLab, but basically I just did the same thing you did with ftxdumperfuser. If you would mind copy/pasting your answer here, I'd mark it as the correct one and grant you the points. – Lombardi

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 }];

Lublin

As promised about one year ago (see comments to my question), here's the points for you! – Lombardi

I think NSBaselineOffsetAttributeName was deprecated in ios6. developer.apple.com/LIBRARY/ios/releasenotes/General/… Due to compatibility concerns, the NSBaselineOffsetAttributeName attribute is no longer supported in iOS 6. I'm having this issue with built in Helvetica-Neue =[ Can't fix it. – Demur

@SeanDunford UIKIT_EXTERN NSString *const NSBaselineOffsetAttributeName NS_AVAILABLE_IOS(7_0); // NSNumber containing floating point value, in points; offset from baseline, default 0 basically NSBaselineOffsetAttributeName is iOS 7.x-specific constant – Lublin

Apple Font Tools cannot install in Macbook Pro El Capitan. See apple.stackexchange.com/questions/211138/… for workarounds. – Hagridden

@VadimYelagin thanks, I've put your comment into the post. – Lublin

This did work for me. One teency problem is it doesnt tell you what values to use for the Ascender and Descender. I used 0 on both and it worked just fine (they were originally something like 673 and -321). – Gupta

For those running Catalina, here's how to run the command on terminal in case you also encounter the command not found issue. superuser.com/questions/1475680/… – Komsomolsk

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.

Simp

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Ortego

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.

Sheryllshetland

That's OK for UIButtons, but what about other controls? What if tomorrow my client wants another font? – Lombardi

Just try with one UILabel with center alignment. I guess you will face this problem only for the UIButtons not anywhere else. – Sheryllshetland

The screenshot attached to my question obviously shows that I'm not only facing the problem with UIButtons, but also with UITextFields, and in fact for all controls. The problem is inherent to the metrics of the font itself, not to the rendering of one particular control in UIKit. – Lombardi

@Cyrille: For UILable and UITextFields you can adjust by changing its location up-down, end-user point of view there is no change in UI. But for Button, because of its boundaries we require to set text insets accordingly. – Sheryllshetland

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.

Indivisible

That's what I'm gonna do in FontLab, as I have found another .otf of the same font that does not exhibit the baseline problem. – Lombardi

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

Rascal

That's a fine workaround, but it’s not a real universal solution. For example, it does not solve the alignment problem for UIBarButtonItems. – Lombardi

UITextView does not inherit from UIControl, and UITextLabel does not exist in Cocoa Touch as far as I know. Maybe you are thinking of UITextField, which does inherit from UIControl and thus has the contentVerticalAlignment property you describe. – Intracutaneous

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!

Ardelia