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

What is character spacing measured in

New Here ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

Hi guys so im doing a design for a front end person to go and develop and one of the questions was about the spacing between the letters which in XD we call "Character spacing" but in the actual css code you call that "letter-spacing" Both the same thing. Anyway i know the letter spacing written in his css will be using px but what measurement does it use in XD?

Example right now my titles are using "117 Character spacing" in XD however what is that in pixels for the css code?

Thanks for the help

Views

10.2K

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 , Dec 21, 2018 Dec 21, 2018

Hi Alii,

Thanks for using Adobe XD and sharing your feedback about the character spacing. I would request you to take a look at this thread to understand the difference :- https://forums.adobe.com/message/9787442#9787288.​

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

Votes

Translate

Translate
Community Expert , Aug 26, 2020 Aug 26, 2020

The value stands for "thousands of an em",

and the "em" stands for the current font size.

 

So in essence, it's a relative size and certainly not a fixed pixel size.

 

Adobe XD loosely based its spacing/tracking value on a typographer's method for defining character spacing.

Historically, the character M used to be the widest plain character in the letterpress collection of a font. That M's physical block of lead or wood [see the image in my other reply] often measured as a square in width and h

...

Votes

Translate

Translate
Adobe Employee ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

Hi Alii,

Thanks for using Adobe XD and sharing your feedback about the character spacing. I would request you to take a look at this thread to understand the difference :- https://forums.adobe.com/message/9787442#9787288.​

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

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 ,
Dec 20, 2019 Dec 20, 2019

Copy link to clipboard

Copied

Why is it called "character-spacing" in XD??? Should be called "letter-spacing"... very confusing. By trying to appeal to print designers you are just making it more confusing for them to make the switch to digital. Please show us alternate unit conversions in a future update (px, ems, %)

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

Just a thought on a weekend day:

I agree with you and I don't agree...

 

Yes, it can all get very confusing.

But if tools like Adobe XD would strictly adhere to the originally and technically devised terms as used in HTML and CSS, then things would become very unclear. There's a wide gap between what techies came up with as their jargon, and what designers and even users might think of it. As a matter of fact, in print media software character spacing is even divided into two types: kerning and tracking...

And what might be the right name for a plain text's style: Normal (Word), Body text (print), Paragraph (HTML) ?

And how about hover ? Should that become mouse-over ?

BTW, do you know where the "EM" font size evolved from ?

Here it is, digitally on Wikipedia, and its precursor, solidified in lead:

em in lood.JPG

It's not so bad or unusual to appeal to the roots of something... 😉

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 ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

I am traditionally a print designer so I know all about typography, letterpress, kerning, tracking, ligatures, etc.

 

but XD is trying to bridge the gap between digital product designers and developers, and this product is mainly for creating layouts that will be handed off for coding. So it's important that we as designers understand and use the correct terminology and design for the real world. It's hard enough to get engineers to take us seriously and when we use print terms when trying to collaborate with them it just justifies their argument that we don't know how a design system works in the scalable, atomic design world of modern engineering and development. The first company to develop a tool that lets us as designers create real-word design systems and components that speak a developers language will win (Figma, Adobe, etc). At this point only Webflow or maybe the new Editor X form Wix is closest to doing this. We need to get out of our bubble and get tools for designers that actually help the process not hinder it with inside-baseball terminology... otherwise we are just designing in XD to impress ourselves and other designers with cool prototype videos that will never ever make it to code. 

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 ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

Hey, 
Adobe has its own system of writing character spacing.
I made a converter on codepen which converts character spacing from XD value to CSS(px) value and vice versa.
You can find it here if that helps.

https://codepen.io/raunaqpatel/full/bGpwBvo

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 ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

Thank you this is extremely helpful for someone just getting into XD. I've been trying to build emails and webpages in XD since it is so much faster than using illustrator, but it has been extremely difficult to convert it to html when they don't state what is px, pt, or whatever measurement they used for letter-spacing.

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 ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

@Raunaq5EF3 thank you very much, great tool! 🙂 

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 ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

The value stands for "thousands of an em",

and the "em" stands for the current font size.

 

So in essence, it's a relative size and certainly not a fixed pixel size.

 

Adobe XD loosely based its spacing/tracking value on a typographer's method for defining character spacing.

Historically, the character M used to be the widest plain character in the letterpress collection of a font. That M's physical block of lead or wood [see the image in my other reply] often measured as a square in width and height – not entirely coincidentally. Hence the reason why typesetters also used to call that size the "em" or "the square".   And that very idea of using a flexible size called em still lives on in CSS !

 

BTW, the various lengths of dashes also refer to that principle: the em-dash, and the en-dash (half of the em). See this Wikipedia page for their usage, but keep in mind that it differs a lot between languages !

 

So handing-off your materials to a developer by converting all flexible values into pixels, will result in type not being able to automatically and accordingly scale in responsive designs, and it can't accomodate anymore for accessibility aspects. I.M.H.O. any conversion is better left to front-end developers and their frameworks, because of the difficulties and debates about screen densities.

 

That's why you need to hand it over to a developer (or an intermediate) who also understands these modern and appropriate principles of using flexible sizes. Anyone demanding a 100% pixel-perfect execution from a mockup, is asking for trouble.

 

There's also some trouble with Adobe XD, though. The starting position of text boxes, the height of the baseline within a text box, the way how line height and paragraph spacing is actually adding above and/or below the text line – these are all very ambiguous. The W3C's CSS definitions are very clear on this ! On the other hand, I wonder if browser engines and operating systems are consistent among each other by now...

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 ,
Mar 09, 2022 Mar 09, 2022

Copy link to clipboard

Copied

LATEST

For web devs who used sass. 

 

I wrote quite a simple function for calculating character spacing in XD to PX for css based on @Raunaq5EF3 reply provided.

 

SCSS Code: 

@function ptToPx($fsize, $csize) {
    $ptValue: ($fsize * $csize) / 1000 + px;
    @return $ptValue;
}

Really simple and takes headache away from having to work out the px unit for letter spacing in css when developing from an XD design.

 

Hope this helps someone else.

 

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