title: Text vertical alignment in sketch different than in css
body: <p>I know this is a very common problem, but I have yet to find a canonical solution for it.<br>
  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.</p>
  
  <p><strong>Example:</strong></p>
  
  <p>Here is how the text is rendered in Sketch:
  <a href="https://i.stack.imgur.com/qacDH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qacDH.png" alt="Text alignment in sketch"></a></p>
  
  <p>See how the text is beautifully aligned with the icon? </p>
  
  <p>Now, I render the exact same thing in the browser. I am using flex's <code>align-items: center</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/gMmru.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMmru.png" alt="Text alignment in the browser"></a></p>
  
  <p>I know that the <a href="https://github.com/seek-oss/braid-design-system" rel="nofollow noreferrer">Braid design system</a> handles this by <a href="https://twitter.com/markdalgleish/status/1182836856997593089" rel="nofollow noreferrer">cropping the whitespace</a> 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.</p>
  
  <p>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?</p>
  
  <p>Thanks to all that took the time to read this!</p>