Participant

Answered

What is character spacing measured in

Forum|Forum|7 years ago
December 21, 2018
4 replies
11943 views

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

This topic has been closed for replies.

Correct answer Peter Villevoye

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...

S

shane2350642264sk

Participant

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.

Peter Villevoye

Correct answer

Community Expert

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...

R

Raunaq5EF3

Participant

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

Nightshde v2

Participating Frequently

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.

Atul_Saini

Community Manager

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

T

thomaso65374540

Participant

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, %)

Peter Villevoye

Community Expert

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:

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded