How to make friends with iOS typography

It happens that the finished mobile product is different from what was originally in the layout. Of course, we all respect the dimensions and indents, but this is not always enough. Very often we forget (perhaps not accidentally) about the parameters of the text, so they will be discussed below.





What are we forgetting?

')

When creating a layout, the designer takes into account the correct arrangement of elements in it, which, however, does not describe in specific numerical expressions. As a result, the developer doesn’t implement exactly the verified design, and the designer gets upset.







Most often when aligning text, designers change the tracking and leading. Let's understand what it is.



Tracking - a uniform change in the distance between letters (inter-letter spaces). In some systems, the concept of character spacing is used, which is the same; only the units of measurement differ, which will be discussed below. It is usually used for thinning inscriptions, consisting entirely of uppercase letters.







The leading is a line spacing, the distance between the base lines of adjacent lines. In computer layout, this concept is usually called "line spacing."







What to do with it?



Suppose the designers gave us along with the map of the fonts also the values ​​of tracking and leading. Then you can safely add them to our code.



Apple provided us with a tool such as NSAttributedString for working with text. It can be easily used inside standard components: UILabel, UITextView, UITextField. You just need to get a dictionary with parameters and initialize the string with it.

For example, NSKernAttributeName is the key by which we indicate the tracking value, and NSFontAttributeName, as you might guess, is responsible for transferring the font in the parameter list.

let attributes = [NSFontAttributeName : font, NSKernAttributeName : tracking] let newAttributedText = NSAttributedString(string: text, attributes: attributes) 

The code looks very simple. The difficulty lies in the tracking parameter.



If your designer uses Sketch, then you are lucky. There, this parameter is called character spacing, and its value is the same as what needs to be transferred to our dictionary. Most likely, it still needs to be divided by 2 if layouts are made on a 2x scale.



A little harder will have to those designers who work in Photoshop. In order to obtain the required value, you need to use the following formula:



tracking = fontSize * trackingPS / 1000



The formula seems to be magical, but in fact it has historical significance. Tracking is measured in thousandths of a round space . In turn, the round fancy is equal to the size of the pt. And character spacing is measured at point. Knowing this, it is easy to understand the origin of the formula.



With leading things are different. The value that designers gave us, even from Sketch, even from PS, will be the same. But, unfortunately, we can not just take it and use it. The fact is that the value that the designers gave us is the distance between the baselines. We don’t have properties that would be responsible for this distance. But there are a few that will help us get the picture, as on the layout. One of them - lineSpacing, which we find in NSParagraphStyle - is the distance between the upper and lower boundaries of adjacent lines.



This means that we need to carry out the following manipulation:

 let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.lineSpacing = lineSpacing - font.lineHeight 

Here you should pay attention to the fact that we use the font.lineHeight property, and not the font.pointSize. As a rule, we do not set the lineSpacing value, and by default it is 0, but nevertheless, on the screen we see lines between which there is some distance (it depends on the font and on the size of the size). The font.lineHeight property includes this distance. According to the specification NSParagraphStyle - lineSpacing can have non-negative values. At this point, you can notice the problem. If suddenly the leading set by our designer is less than the height of the line, then nothing will happen. lineSpacing will remain zero. Of course, you can say that you do not need to reduce the standard leading, and calm down on this. But you can solve this problem.



You can use the heightMultiple property all in the same NSParagraphStyle. We can give it a value less than 1, and this will allow us, if necessary, to reduce the height of the line defined by the font. To do this, we also need to write a couple of lines of code:

 let paragraphStyle = NSMutableParagraphStyle() let heightMultiple = lineHeight / font.lineHeight paragraphStyle.lineHeightMultiple = heightMultiple 

And then add the paragraphStyle parameter to our NSAttributedString with the key NSParagraphStyleAttributeName.



Simplify the process



I would also like to say a few words about the interaction with the designers. There is a tool like Zeplin . This is a plugin for Sketch, which easily and naturally allows you to transfer all the data from designer to developer. He is able to build a map of colors, fonts and a lot more.

The most interesting thing for us now is that from Zeplin you can get all the text parameters without touching the designer.







Total



Now the incomprehensible words tracking and leading are not so scary and I want to believe that they will be used as calmly as the font, size and color. And in the world there will be more happy users, designers and developers.