Line height in exportet html file differs from line height in xd (red marks)

Hi @Nebenraum,
Welcome to the forums! Thank you for the screenshot. Can you also attach a screenshot of what it should look like? And if possible can you attach an XD file?

Line height is a known problem with text on the web versus text in a design tool. There are a few options:

  • make sure to include the font in the css to ensure the end user gets the correct font
  • manually adjust the line height (you can do this with in the styles field in the element property inspector) (for example, set line-height:1.1em)
  • rasterize the text layer. this is a last result but it will export the text as an image that you will faithfully represent your design
  • Use multiple single line text fields instead of one multiline text field
  • there is a line height property in XD that you may help if you adjust it near the text properties

This is a challenging issue because font authors do not have to follow any guidelines for the top edge alignment of the text. This shows up in different ways in browsers, design tools and as the font size increases.