Highlighted

Very confused on character spacing based on google material UI Kit

New Here ,
Apr 23, 2020

Copy link to clipboard

Copied

From what I understand, the character spacing measurement in XD is using milli-ems which are 1/1000 of ems. I'm still trying to properly understand ems in general, but that's what I know at the moment.

 

Looking at the google material UI Kit and they have their font hierarchy listed row by row, with the font size followed by the letter spacing. But when I look at the properties for a specific character style (e.g. Header 01), I can' t make heads or tails on how they came up with the numbers in XD.

 

For example, they have a text label that says "H1 / Roboto Light     96 size/-1.5 letter-spacing". When I click the text to see it's properties, sure enough it's 96 point size, Roboto Light. However, the character spacing is set to -16.1. How does -16.1 translate to -1.5 letter spacing?

 

I attached an image of what I mean but it seems to not be previewing on here.

Hi there,

 

Thank you for reaching out. XD works on milli-ems, which is 1/1000th and material UI  is using rem

 

I would suggest checking similar post here: https://community.adobe.com/t5/adobe-xd/units-for-character-spacing/td-p/8835008?page=1 Please see if that helps.

 

Please see the attached image for font size description:

image (3).png

 

Thanks,

Harshika

TOPICS
Design, How to

Views

216

Likes

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

Very confused on character spacing based on google material UI Kit

New Here ,
Apr 23, 2020

Copy link to clipboard

Copied

From what I understand, the character spacing measurement in XD is using milli-ems which are 1/1000 of ems. I'm still trying to properly understand ems in general, but that's what I know at the moment.

 

Looking at the google material UI Kit and they have their font hierarchy listed row by row, with the font size followed by the letter spacing. But when I look at the properties for a specific character style (e.g. Header 01), I can' t make heads or tails on how they came up with the numbers in XD.

 

For example, they have a text label that says "H1 / Roboto Light     96 size/-1.5 letter-spacing". When I click the text to see it's properties, sure enough it's 96 point size, Roboto Light. However, the character spacing is set to -16.1. How does -16.1 translate to -1.5 letter spacing?

 

I attached an image of what I mean but it seems to not be previewing on here.

Hi there,

 

Thank you for reaching out. XD works on milli-ems, which is 1/1000th and material UI  is using rem

 

I would suggest checking similar post here: https://community.adobe.com/t5/adobe-xd/units-for-character-spacing/td-p/8835008?page=1 Please see if that helps.

 

Please see the attached image for font size description:

image (3).png

 

Thanks,

Harshika

TOPICS
Design, How to

Views

217

Likes

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
Apr 23, 2020 0
Adobe Employee ,
Apr 23, 2020

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching out. XD works on milli-ems, which is 1/1000th and material UI  is using rem

 

I would suggest checking similar post here: https://community.adobe.com/t5/adobe-xd/units-for-character-spacing/td-p/8835008?page=1 Please see if that helps.

 

Please see the attached image for font size description:

image (3).png

 

Thanks,

Harshika

Likes

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
Reply
Loading...
Apr 23, 2020 0