I know this is a very common problem, but I have yet to find a canonical solution for it.
I have a design created in Sketch, and when I use the exact font, font-size and line-height in css, the browser renders the text differently.
Example:
Here is how the text is rendered in Sketch:
See how the text is beautifully aligned with the icon?
Now, I render the exact same thing in the browser. I am using flex's align-items: center for vertical alignment of the text with the icon. But, since the text is not vertically aligned inside it's bounding box, the alignment is off.
I know that the Braid design system handles this by cropping the whitespace around text nodes. While this looks like a very nice approach, it also feels a bit overkill for a problem that seems to be so basic.
So my question is: Is there a solution for aligning the two? Either make CSS render text like sketch, or, make sketch render text like CSS?
Thanks to all that took the time to read this!
