Pay attention to the line height! It is possible that the line height is inconsistent with the development spacing.
Font width and roundness have been slightly increased due to font centralization on Android and iOS to keep the screen clear and legible. So there is a line height guarantee in the default development font.
For an example of iOS, see this article “How to achieve the correct line spacing and line height in iOS.”
As you can see, iOS still has a lot of work to do to achieve pixel-level restoration of the design.
★ In our design process only need to pay attention to a downward high can avoid the problem of inconsistency.
Using the default line height or setting it to the same size as the font size can make a difference.
Theoretically, including the above article, development can achieve the same effect as the design draft;
However, in order to ensure that all development results are consistent, it is recommended to standardize as much as possible from the design draft, after all, not all developers will bother to adjust the spacing of a few pixels (and adjust it every time); Adjusting the line height from design or subtracting it from development is also part of working collaboratively.
Android development font is also a line high, because Android open source research, but in fact, the development effect and iOS gap is not big, if we use iOS sketchpad to do design;
Contrast table
Here’s an example of how to calculate/set the line height of a font on iOS:
The plug-in
To address this problem, some people have also developed the Sketch font line height automatic repair plug-in.
Plug-in download
Auto Fix iOS Text Line Height
Auto Fix Android Text Line Height
The formula
In addition to looking up tables and using plug-ins, I recommend this method, which is easier to understand.
Whatever size size we use, we divide it by 10, multiply it by 2, and add the size argument to get the line height of the development font for the current size.
Common font size/line height comparison table
