Copy link to clipboard
Copied
Hi All,
I was just wondering in which unit the Character spacing are indicated in XD.
I do know that they are not px, unlike the line spacing.
Thanks for your help.
1 Correct answer
We're working in milli-ems, which is 1/1000th of the point size of the font. If you're from the web world, it's similar to ems, but just divided by 1/1000. Hope that helps!
-Elaine
Copy link to clipboard
Copied
Hi Laura,
As far as I know, the units used are points which you can read more about here:
CSS Font-Size: em vs. px vs. pt vs. percent / Kyle Schaeffer
Hope it helps
Copy link to clipboard
Copied
We're working in milli-ems, which is 1/1000th of the point size of the font. If you're from the web world, it's similar to ems, but just divided by 1/1000. Hope that helps!
-Elaine
Copy link to clipboard
Copied
Thanks Elainecc,
I may think that it is not too practical for working on a web project and give the specs for the dev team.
Thank you!
Copy link to clipboard
Copied
would you provide an example? e.g. how does 0.2em line-spacing convert to character spacing in XD?
Copy link to clipboard
Copied
You never got an answer so I'll just leave this here for the future.
As elainecc said it's just divided by 1000, in your case just multiply it by 1000 instead.
0.2em * 1000 = 200 line-height (in XD)
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;
}
Copy link to clipboard
Copied
This is absurd. I have to do calculations to pass styles off to developers! Please translate, or give us the option to translate over to px or other units for spec'ing CSS
Copy link to clipboard
Copied
Yeah, I have to throw my support in for this opinion. Up until now I've recognized that it wasn't px and just winged it for the "real" value in CSS, but that's getting old, and I'm really surprised that this is what that dimension is. I've never heard of that unit, maybe it's the "best" objectively, but I find it absurd that you guys aren't giving us options here. We should be able to switch that to px and ems at the very least.
Copy link to clipboard
Copied
This is really stupid...
If I want to use 1.5px as character spacing, for 1.5px at default 14px, it translates to:
1.5px = 0.10714285714285714em
so I have to multiply by 1000 which is :
107.1428571429
....
REALLY? I have to do all this just for my character spacing in px?
Copy link to clipboard
Copied
Hi Elaine,
Sorry but this is not solved.
This is the first time I heard about "mili-ems".
I just realized now that I was sending numbers like "-0.84px" to my devs team, thru the XD share link, which completly looks like a random number, and they even tend to not use it!.
On the shared file we have px/pt/dp option. It's more than obvious that we need the same units (+ mili-ems if you guys need it) on the application.
Thank you. This is a huge issue IMO
Copy link to clipboard
Copied
I didn't know that I needed a calculator to use this programm...If adobe wants to make a better user experience for their users please change this to pixels, no one understands this system! For type / font systems styleguides this is a horrible user experience! Lately they just released "marketing features" for new users, instead of focusing in the users that use this professionaly...
Copy link to clipboard
Copied
You might be able to use this CSS formula to workout the corresponding CSS-to-AdobeXDLetterSpacing equivilant (See below).
letter-spacing: calc(-1em * 0.001 * <XDCharacterSpacing>);
For example, lets say you have Character Spacing set to "-70", then you'll use ...
letter-spacing: calc(-1rem * 0.001 * 70);
For example, lets say you have Character Spacing set to "120", then you'll use ...
letter-spacing: calc(1rem * 0.001 * 120);
Copy link to clipboard
Copied
Thank you Pandauxstudio,
But this is a CSS solution, and I think it'ss way to complicated for a design software!
I hope they won't take if as a solution 😉
But thank you for your work!
Copy link to clipboard
Copied
Here, I made a converter just to make my life simpler.
You can use it to convert letter spacing from XD to CSS(px) and vice versa.
You can find it here: https://codepen.io/raunaqpatel/full/bGpwBvo
If you want the formula, its:
lineSpaceinCSS = (lineSpaceinXD * fontSizeinXD)/ 1000;
Copy link to clipboard
Copied
Great, thank you!
Copy link to clipboard
Copied
Would like to add my voice and say this should probably be fixed. Software is designed for developing websites & apps, but all the metrics need to be converted manually? Doesn't make sense
Copy link to clipboard
Copied
This does not work for web/app development. Please address the issue.
Copy link to clipboard
Copied
Here is the mlliems to point conversion
Copy link to clipboard
Copied
It's been nearly 6 years since this question was asked. Why does XD still not natively support unit conversion? (similar to how it's done in Webflow)
Copy link to clipboard
Copied
[abuse removed by moderator]