Font unit does not change the font size value in design spec.
Ideally, in the Design mode, the fonts unit should change for mobile to DP or Pt. And Pixels for Web browsers. Harshika considers this as a bug and has asked me to report it here.
Kindly follow the link to our thread below for more detail:
Happy to assist with the font size issues.
The behavior of not changing the value when switching font units is “Working-as-designed”. Units are showing as per the defaults applicable to platforms i.e pt for iOS , px for web and dp for Android
XD designs can be scaled/stretched to any size as best thought of as unitless designs. The elements and their relative positions will be honored when you scale the design. For example; An artboard created with 375×667 in turn creates 750×1334 artboard on applying 2x scale. In such cases the unit of measurement can be anything i.e. px, pt or even cm/inches
15 commentsComments are closed
I read the conversation below. We experience exactly the same issues. This is quite a huge problem because it delays our processes between design and development. Please deliver a fix asap. Thank you.
Any luck with resolving this? It's a matter of urgency now.
Hi Abhishek Das,
Our company is having the same issue with all XD designs/development specs. The values for web are not consistent for things like font sizes. Our developers are having to eyeball the design rather than using the specs.
I am getting this exact same problem. My company has a web client if I inspect the font size and font and test them out in XD they are an entirely different size. In my previous job I worked in Sketch and I never had this sort of problem. It is very annoying not to be able to replicate what we have on the web. Figma does an ok job of this.
As a designer and web developer, I believe the easiest solution to get consistency between Adobe XD and the web would be to give the option of sizing things in pixels in Adobe XD.
I've been using XD for a few days now since my company is switching over to it and it's been bothering me that the fonts don't seem to be the size I'd expect. Then I noticed that the font size doesn't specify what unit it's being sized in. A quick search turned that XD is using points (pt), but developers don't code in that unit, which creates some problems.
If we can get the ability to change the unit of measurement like in Photoshop and other Adobe apps, that would make it so we can design and develop using the same units of measurement.
The preview window in XD does not resize the design. You can try it. Also, we checked on the actual browser with the preview link and it has the same issue.
There can be one explanation for this. You are seeing the difference maybe because you are seeing the font in web browser in full screen but in xd the artboard can't get to full screen. Maybe that's why there is a difference in visualization.
You can do one more thing, in xd open preview window and maximize the screen and then check if there is any difference between the text in preview window and chrome browser.
Abhishek Das(Adobe XD Team)
This is how the screenshot looks like with much-elaborated explanation. Hope this helps.
I tried your scenario by creating one web artboard in xd with 26px text and one html with the same 26px text but could not see any differences. Please provide me the screenshot of the difference that you are seeing by placing both the xd with 26px text and html in web with 26px text together.
As we are using px for web, pt for ios, you can't convert it in design specs. If you want the output as pt for ios only, then you have to create one iphone artboard and see which size of text is suitable for it. Then in design specs you will see the output as pt.
If you have further query please comment.
Abhishek Das(Adobe XD Team)
It happens on both browsers I am using: Chrome and Safari.
What I would like you to do is this:
In Adobe XD please add a text line with font size: 26px (for.e.g)
Now create a normal HTML file with a text set to 26px.
Now try and view both files in the browser and you will see the difference. I have already shared the screenshot and resolution with you below.
My point is if it selects web, the units change to px. but the font size does not convert based on changing the units.
Here's the formula:
1 point = 1.333333 px and this is what is missing in Adobe XD.
So we should be able to set units in XD when designing for the web.
If you use this site for points to pixel conversion you will see what I am trying to say: http://www.endmemo.com/sconvert/pixelpoint.php
26points - 34.666667 px
Also, if I try using the conversion tool and use the actual pixel values, then the appearance in XD will not match what I am trying to create. Therefore, it is crucial if pixels unit is introduced throughout the XD for desktop experiences.
The version of Adobe XD: 126.96.36.199
Steps to reproduce the issues: adding pixels unit and conversion from pixels to points and vice versa
Thank you for your patience.
I have tested your scenario using the same resolution but for me H1 as 26px is same as in both xd and web.
Please share me the file if you can and kindly tell me the browser in which you are seeing the issue.
As I mentioned earlier if your are designing a web project then in design spec the unit will automatically show px, as px is the measurement for web links. If you are sharing design specs for android then use dp. That's the reason the values are not changing.
I hope this makes sense.
Abhishek Das(Adobe XD Team)
Hi, Abhishek, any luck with the comments below?
Also, in the "Developer view" mode, when you change the points to px, the font value does not change.
1 px = 0.75 point.
2 px = 1.5 point.
Then it should convert the value of the text when we change units from px to points and vice versa in the developer mode.
But, this is not the case in Adobe XD. The value doesn't change if the units change. Please see attached video
Thanks for sharing your feedback.
Attached is my display size: 1680 x 1050.
So how would the design convey to the web if it's unit-less?
If I have assigned H1 as 26pt/px - the pixels in actual Web is quite huge. But in XD it's showing perfectly fine.
I have also tried typing the same in photoshop - 72ppi setting. it looks super small as compared to XD. I think XD is perfectly ideal for mobile apps but the typography is not suited for Web UI (desktop in specific). But this definitely needs addressing.
Hope my answer makes sense.
XD 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 depending on the type of link
It's easiest to think of XD as unit-less, kind of like a vector graphic, and focus instead on the relationships between elements. Let's say you design an iPhone 6/7 artboard at 375x667 units, and it uses type with a 10 unit font size. That relationship is the same, no matter what physical size your design is scaled to.You could rasterize your design to an image where each unit maps to 1, 2, 3, or even more physical pixels
That is the reason why design specs automatically defaults to the below units based on the link type
For iOS links, measurements are in pt.
For Android links, measurements are in dp.
For Web links, measurements are in px.
In adobe forum you said that you are seeing different size for same px in xd and web. I tried that but I see same size visually. Can you please tell me the resolution of the screen you were seeing the different size for same px text?