status-mobile
status-mobile copied to clipboard
status-im
Improve quo2 text component
1. letter-spacing
Letter spacing currently used by the component doesn't match with letter spacing for Figma design.
And looks like small changes in letter spacing are not affecting the text component.
Formula used by Figma for letter spacing: formula (ref)
Heading-1/Regular
2. Line Height:
The line height currently used by the component doesn't match with line height from the Figma design
Paragraph-2/Regular
[Original image]
- Line Height:
H @Parveshdhull I compared Paragraph-2/Regular and can't find line height difference.
hi @yqrashawn, Thank you very much for looking into this. Please can you try with 5-10 lines? Small line heights difference might not be visible, but they add up to a big difference with multiple lines.
reopening issue (https://github.com/status-im/status-mobile/pull/16981#pullrequestreview-1587186278)
related PR https://github.com/status-im/status-mobile/pull/13960, and related discussion https://github.com/status-im/status-mobile/pull/13960#discussion_r966749759
add more info here we use inter font, and it has this thing called Dynamic Metrics http://rsms.me/inter/dynmetrics/ it's a formula that calculates letter spacing based on font size
merged PR https://github.com/status-im/status-mobile/pull/13960 fixed the formula in our code
yet, quo2 text component is different from figma design
A is figma design B is screen shot from http://rsms.me/inter/dynmetrics/ C is quo2 text component screenshot on ios, not tested on android
you can see B and C are identical, which means quo2 text implementation is the same as the Inter font recommended dynamic metrics implementation
the calculated letter spacing value always looks like 0.31585560420509633% and figma round it to 0.32%, which might be the reason A is not the same as B/C
this might help https://www.figma.com/community/plugin/795733302011238428/Inter-Letter-Spacing Inter Letter Spacing figma plugin