Copy link to clipboard
Copied
I have a problem about font tool in Adobe xd.
font-family: Arial;
font-size:30px;
line-height:30px;(line-spacing in Adobe xd is also 30px)
But there is a border around the text in Adobe xd
I can't make sure get the same result as the chrome browser.
It's not the real text alignment on browser.
There are two pictures you can see the difference.
You can't make your design come true on browser.
This is Adobe xd team replied me:
The line-height on web has an extra space, line spacing on AdobeXd without it.
You should minus extra space when you code your design make sure it is the same as web.
Copy link to clipboard
Copied
Hi John,
Can you provide me with the exact steps to reproduce your issue?
Thanks,
Preran
Copy link to clipboard
Copied
1、create a new Artboard use web 1920*1080
2、Enter three lines text and change style like this:
note: The line spacing 23 is default line-height of Arial font.
3、Move the text area, then it has 60px distance from the top of Artboard:
4、open your code editor, use the same style create a html file:
or there is a link:
https://jsfiddle.net/2vap3jfk/https://jsfiddle.net/2vap3jfk/
5、open this html file use chrome browser:
Align the Adobe XD Artboard and browser window, you can see they are same.
6、change the style in code editor:
7、do the same thing on Adobe Xd:
Then you can see the difference:
You can find two points:
1、Space between text lines is fine, it still the same as chrome browser.
2、Top and bottom changed on chrowm browser, but on Adobe XD top and bottom still the blue border
you need move 4px to make sure remove the inaccuracy:
But the inaccuracy sometimes is 4, sometimes is 3 or other value.
inaccuracy is depends on what font you use.
So, the result is, I create a design, and developer take it for coding web page.
,margin-top of my design is 63, but developer need write 60 or other value you can't sure。
As you can see, Adobe XD get the same result when only use default line height, if you change line height, everything become an inscrutability thing
Copy link to clipboard
Copied
Design specs is also wrong!
Copy link to clipboard
Copied
Thank you for the information, John. I will share this information with the product team for their review.
Meanwhile, you can log a bug with the team using Adobe XD Feedback : Feature Requests & Bugs
Copy link to clipboard
Copied
This is Adobe xd team replied me:
The line-height on web has an extra space, line spacing on AdobeXd without it.
You should minus extra space when you code your design make sure it is the same as web.