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

Which unit does Adobe XD use for pixel sizing?

New Here ,
Apr 14, 2016 Apr 14, 2016

Copy link to clipboard

Copied

Hello,

is Adobe XD using dp, px, pt? I can´t find this information in the gui.

Is there a option to change between units now?

TOPICS
How to

Views

194.7K

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 2 Correct answers

Adobe Employee , Apr 14, 2016 Apr 14, 2016

Hi!

XD currently uses a virtual pixel for most of its measurements (including font size), which should be the same unit of measure as a CSS pixel, or most measurements in iOS. It's roughly equal to 1 physical pixel on a 72 dpi monitor (and, incidentally, a point).

I'm afraid there's no option to change the unit currently. Which units would you find useful?

Votes

Translate

Translate
Adobe Employee , Aug 24, 2017 Aug 24, 2017

Hello there,

The pttopx converter you linked is using the conversion of number of pixels = number of points * (pixels per inch / points per inch), where the pixels per inch (or DPI) can change, and 72 is the typical number of points per inch. This whole problem of converting design units to a physical size is tricky, and so, at least for now, XD kind of sidesteps it.

It's easiest to think of XD as unit-less, kind of like a vector graphic, and focus instead on the relationships between elements. Le

...

Votes

Translate

Translate
replies 101 Replies 101
New Here ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

I think this have been answered by Bear Travis, but I'll just leave this here in case anyone needs it.

I'm usually just using this mixin in my projects: https://gist.github.com/wiseoldman/b7660e1acb39229f1d06db484506eeb4

@mixin letter-spacing($spacing) {

  letter-spacing: ($spacing / 1000) * 1em;

}

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
Explorer ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

this does nothing for me :3

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
New Here ,
Oct 29, 2019 Oct 29, 2019

Copy link to clipboard

Copied

Pixel please

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
Community Beginner ,
Nov 04, 2019 Nov 04, 2019

Copy link to clipboard

Copied

Hello,

I encountered the same issue, the fonts appears much bigger while it looks good on xd. Apparently the font size on XD is not pixels (in points maybe?). Do you know how to get the specs in pixels?

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
Community Expert ,
Dec 21, 2019 Dec 21, 2019

Copy link to clipboard

Copied

While looking for some discussions I came across this lengthy and long-standing thread. My 2 cents: keep in mind that large parties who contribute to the inner workings of various web engines (like Apple, Google, and Microsoft) are still debating on how to work with font sizes. They just can't agree on a standard, its unit, and not even its name and acronym. These modern kingdoms are just as stubborn as the ancient ones, whose kings commanded to let their very physical foot be the unit for their reign and realm (with monks, publishers, and units following suit). Resulting in metrical and typographical confusion all over mediaeval Europe...

 

As a designer, we should stick to the point for font size (equaling the old 72 dpi pixel). And leave it up to the front-enders to settle on a standard and tweak everything to whatever is necessary to get it right with and in their frameworks. And apart from that, there are still the users who can set some size and zoom default for a browser, and overrule whatever the designer and developer came up with. So always leave plenty room for margin, for text to dependently differentiate in size.

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
Community Beginner ,
Mar 02, 2020 Mar 02, 2020

Copy link to clipboard

Copied

If that answer is correct—that XD uses pixel measurement for font sizes, then why do fonts show up in the assets panel in points? 

MicrosoftTeams-image.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
Explorer ,
Jun 24, 2020 Jun 24, 2020

Copy link to clipboard

Copied

Essa medida pode ser alterada  no painel de ativos, porém não muda nada. Ao trocar a unidade, o valor permanece sempre o mesmo. Não entendi qual a função disso.  

Essa questão de tamanhos de fontes visualzadas de forma diferente no XD e na web, quando projetadas com o mesmo valor, me parece ainda não ter sido resolvido pela Adobe. Talvez a resposta do Ray10co abaixo tenha sentido.

 

Screenshot_2.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
Community Beginner ,
Jul 04, 2020 Jul 04, 2020

Copy link to clipboard

Copied

Its not availabe to me. Like there always comes a '+' button to add more. There is nothing to change the unit.

 

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
Community Beginner ,
Mar 05, 2020 Mar 05, 2020

Copy link to clipboard

Copied

The problem stems from the fact that the desktop mockups don't display at 100%. Only the mobile mockups do. When yourself (the designer), the client, the programer look at the mockups you don't see them as 100%. Using a design of 1920px margins with 1450px inner window, there are additional margins. Looking on my 1450px laptop screen, I still see the 1920px margins with an additional bumber on the edges of the mockup. Even with the fullscreen toggle on my 1920 x 1080 monitor, the inner container is ~1260px instead of 1450px. XD desktop should have the option to view the designs on different screen options. ie. Have it responsive. If I am on my 1920px desktop screen I should see my margins. When on my 1450px screen I shouldn't.

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
Explorer ,
May 10, 2020 May 10, 2020

Copy link to clipboard

Copied

i always recalculate px to % in css for my responsive design so I would like the possibility to set % instead of px

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
Community Expert ,
May 10, 2020 May 10, 2020

Copy link to clipboard

Copied

Then you would need to set a base value somewhere like a rem. Otherwise it's left up to the browser's default to declare the base font size and derive the size in its percentage (which isn't such a bad thing, if you'd be a puritan or brutalist designer...)

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
New Here ,
Jul 16, 2020 Jul 16, 2020

Copy link to clipboard

Copied

The answer to this question cannot be correct, as it contains two logically conflicting statements:
- "the same unit of measure as a CSS pixel"
- "equal to 1 physical pixel on a 72 dpi monitor"

However, a CSS pixel is the equal to 1 physical pixel on a 96 dpi monitor, NOT a 72 dpi monitor. So which one is it? The current answer makes no sense.

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
Community Expert ,
Jul 28, 2020 Jul 28, 2020

Copy link to clipboard

Copied

The term "pixel" is highly ambiguous, as you can read in my several answers in this thread. According to CSS, they indeed seem to settle the debate on 1/96th of an inch. So on a 96 dpi monitor, a pixel is indeed the very physical pixel. And that's also the size at which Microsoft tends to chime in. Google however doesn't, and they adhere to a totally different idea for Android: their "density pixel" (dp) has a size at a grade, ranging from 120 to a whopping 640 pixels per inch.

 

So any answer which tries to fixate or even indicate the size of a "pixel", is making no sense, as long as huge and crucial stakeholders are using different ideas and standards...

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
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

So here's my pain-point and I tried looking on the web but there's no solution to this.

When the design is created in Adobe XD, MacBook Pro - Retina (2018), the prototype on the web browser shows the design absolutely perfect. However, when the developer uses the same font size assigned to the content, the font size just goes super large.

Upon inspecting this further and doing some groundwork, I found out that Adobe XD has fonts set in points instead of pixels. However, that does not match pixels on the actual web.

For. e.g. 23pt font size pm XD prototype on a browser looks different to the coded 23px font size on the actual site - please see attached.

Please help.

font-size-xd.jpg

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
Community Expert ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Please review

Font size conversion

A chart of font sizes stated in points, pixels, ems, percent and keywords. px to pt, pt to em conversion

Font Size Conversion chart: px to pt, px to em

23px17.25pt1.4375em143.75%Sample

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
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Thanks Ares,

I have used this method and still facing the same issue as Adobe XD exports fonts in CSS and it looks completely different. Unfortunately, this option is not right either in this scenario

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 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Hi Karanpreet.chawla,

Thank you for performing the troubleshooting steps. In addition to what Ares has mentioned, I would suggest converting the size from points font size to pixels in design specs from here. Please see the screenshot below:

Let us know if that helps.

Thanks,

Harshika

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
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Hi Harshika,

I tried changing the px to pt and dp but the value remains the same. It doesn't change the value when you change the units. Ideally, it should be able to convert the value of the text size when changed from px to pt or dp (not in that order).

Hope it makes sense?

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 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Good catch Karanpreet, could you please submit your feedback here: Adobe XD Feedback : Feature Requests & Bugs and share the thread here so that we can also keep the track of it?

Thanks,

Harshika

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
Explorer ,
Jun 18, 2019 Jun 18, 2019

Copy link to clipboard

Copied

Thanks Harshika, appreciate this.

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
Explorer ,
Jun 18, 2019 Jun 18, 2019

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 19, 2019 Jun 19, 2019

Copy link to clipboard

Copied

Thank you for sharing the link with us.

PS: We would be delighted if you could join us in discussing Overlays through this forum post Make it, share it - Overlays

Thanks,

Harshika

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
Explorer ,
Jul 30, 2019 Jul 30, 2019

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 ,
Jul 30, 2019 Jul 30, 2019

Copy link to clipboard

Copied

Hi Karan,

Sorry to hear that you're still facing trouble with Adobe XD. I will check with the team and will follow up with you shortly.

Thanks,

Harshika

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
Explorer ,
Jul 31, 2019 Jul 31, 2019

Copy link to clipboard

Copied

Hi Harshika,

I think Abhishek is struggling to understand what I am trying to explain. Could you also please look into it if possible.

Thanks,

Karan

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