47

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: enter image description here

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?

4
  • 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.
    – Mrunal
    Commented Feb 18, 2012 at 10:41
  • 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.
    – Cyrille
    Commented Feb 25, 2012 at 7:41
  • 3
  • 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.
    – Cyrille
    Commented Mar 6, 2012 at 10:43

6 Answers 6

41

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 }];
7
  • As promised about one year ago (see comments to my question), here's the points for you!
    – Cyrille
    Commented Jun 28, 2013 at 19:35
  • 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. Commented Apr 9, 2014 at 19:41
  • @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
    – art-divin
    Commented Apr 10, 2014 at 8:09
  • 1
    Apple Font Tools cannot install in Macbook Pro El Capitan. See apple.stackexchange.com/questions/211138/… for workarounds. Commented Feb 24, 2016 at 15:59
  • 1
    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/…
    – Teffi
    Commented Dec 6, 2019 at 14:09
5

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.

1
  • 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.
    – honk
    Commented Oct 5, 2014 at 12:47
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.

enter image description here

Hope this will help you out.

4
  • 3
    That's OK for UIButtons, but what about other controls? What if tomorrow my client wants another font?
    – Cyrille
    Commented Feb 12, 2012 at 10:37
  • Just try with one UILabel with center alignment. I guess you will face this problem only for the UIButtons not anywhere else.
    – Mrunal
    Commented Feb 12, 2012 at 11:22
  • 1
    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.
    – Cyrille
    Commented Feb 12, 2012 at 16:26
  • @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.
    – Mrunal
    Commented Jun 7, 2013 at 10:11
0

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.

1
  • 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.
    – Cyrille
    Commented Feb 25, 2012 at 7:44
0

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

2
  • That's a fine workaround, but it’s not a real universal solution. For example, it does not solve the alignment problem for UIBarButtonItems.
    – Cyrille
    Commented Feb 25, 2012 at 7:43
  • 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.
    – Tim
    Commented Aug 27, 2013 at 16:41
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.