Native app designs and line-height problem

I will try to explain the problem that I and my dev team are facing right now. It is mainly about texts that are used in designs and building designs for native apps. Figma decided to use an approach that would be optimal for designers who work and build for different platforms. How texts are presented in designs required some kind of compromise described here Link which in general makes sense but is irrelevant to how typography should be built for native apps. Line-heigh that is implemented in Figma position text by adding from the top and the bottom of the text block the same amount of space. And in code, it doesn’t look the same. So we cannot use my interpretation of the typography that describes each font by font size and line-height. On iOS for example our devs could use lineHeightMultiple but because Figma respect different logic the differences between design and reality are far from the pixel-perfect world.

The other workaround would be to not use line-height on designs, add “enter” after each line and use paragraph-spacing to position text properly. Then create a group/frame from these texts and add some space from the top and the bottom. Then our devs could use fonts without providing information about line-height but with information about line-spacing and include information about additional space from the top and the bottom to position text properly. But this approach required refactoring the whole design and still it is not an elegant way also in code where unfortunately we will need to use some not rounded values (like 4,8, 16) to make our layout nice.

So the question is. Do you have any guidance for a designer or for native developers on how to deal with that problem?

3 Likes

I have the same problem here. Did anyone come to a solution?

How about setting the baselineOffset of the attributed string? swift - using baselineOffset in NSAttributedString problem in iOS 16.4 - Stack Overflow

Did you find any other solution?