How to layout the UIlabel object according to design spec in iOS

Question

I have some difficult time in creating iOS screen to match with visual design provided by design team.

The design team has provided the spacing info for each screen which shows how much space each text needs to be apart from other UI element on the screen. This is attached for your reference. You can see here that the two text labels "Activate Your Account" and "A Verification link...." are placed apart by 25px.

The same thing I am trying to achieve in the storyboard. I am attaching the storyboard screen snapshot for reference.

From this you can see that I cannot keep exactly 25px b/w the two text labels because for the following issue

1. The text font is custom font and I cannot load the same in storyboard. I have added the font file in the project, but when I try to open it in storyboard for UILabel, it doesn't list out. I am not sure why xcode doesn't show up. This makes me hard to resize the label's frame. If I try to decrease the empty space in the label (upper and lower part of the text), this will make label height less, but when I set the font programmatically, it doesn't fit in this small space.

2. When I try to increase the height of the label, the text inside the label starts displaying at the center leaving space at the top and bottom of the label frame.

So I want to know how to solve this problem. If anyone had this issues and sorted out, please let me know how to fix this.

Many Thanks

Answer 1

Your designers aren't speccing their designs correctly :) Show them how iOS renders text and have them spec their designs in the same way. This is what we do on the Facebook design team. I mocked up an example for you (each square is 4dp/8px).

https://i.stack.imgur.com/q4tZX.png