• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Question about font tool

Guest
Jun 09, 2018 Jun 09, 2018

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.

2.png1.png

You can't make your design come true on browser.

Views

814

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Deleted User
Jun 14, 2018 Jun 14, 2018

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.

image_preview.png

Votes

Translate

Translate
Adobe Employee ,
Jun 11, 2018 Jun 11, 2018

Copy link to clipboard

Copied

Hi John,

Can you provide me with the exact steps to reproduce your issue?

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 11, 2018 Jun 11, 2018

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.

bug-1.png

3、Move the text area, then it has 60px distance from the top of Artboard:

bug-2.png

4、open your code editor, use the same style create a html file:

bug-4.png

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.

bug-3.png

6、change the style in code editor:

bug-5.png

7、do the same thing on Adobe Xd:

bug-6.png

Then you can see the difference:

bug-7.png

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:

bug-9.png

But the inaccuracy sometimes is 4, sometimes is 3 or other value.

inaccuracy is depends on what font you use.

bug-10.png

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 12, 2018 Jun 12, 2018

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 13, 2018 Jun 13, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 14, 2018 Jun 14, 2018

Copy link to clipboard

Copied

LATEST

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.

image_preview.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines