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

Sizing in XD differs than that in CSS

New Here ,
Jan 16, 2025 Jan 16, 2025

Copy link to clipboard

Copied

I created a website design in Adobe XD and now that I am turning the design into code (css), the font sizing looks slightly off. The 1.0625 rem (17px) size set as body font is looking way larger than the size in the XD and due to that the design on the page is looking awkward.

 

Upon researching a bit on Google, I found that Adobe XD uses the point (pt) unit so I converted the point sizes from the design to px to match the sizes but still it seems a tiny bit off. I am using this converter - https://cssunitconverter.com/pt-to-px

 

What am I missing?

 

Also I know that this is not the px to rem conversion issue because I am using a chrome extension which me and a few other folks at my company have been using for quite some time. Don't think that's the one causing the issue.

Views

107

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 ,
Jan 16, 2025 Jan 16, 2025

Copy link to clipboard

Copied

I made a mistake with numbers in my post. I meant I need body fonts equivalent to 17px but my design in xd shows the size of the font as 23. Now obviously 23px as body font size would be way to large.

so is there a way to change unit in xd?

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 ,
Jan 17, 2025 Jan 17, 2025

Copy link to clipboard

Copied

@Pritul Jitend325302161dgl honestly, when the time comes to code the site, I would use standard practices for the fonts, such as the H1 to H6, to the body copy. So for the body copy, I would use 16 pixels. Some text will be smaller and headings will often times be larger. But, the main body text (like what you're reading right now) should usually be 16px.

creativeexplorer_0-1737164868298.pngexpand image


I do stink with font conversions, so I will sometimes use a cheatsheet

 

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 ,
Jan 25, 2025 Jan 25, 2025

Copy link to clipboard

Copied

LATEST
  • XD does not use points, it uses pixels.
  • If you're viewing a desktop design on a desktop at 100% zoom, 17 px in XD should match 17 px in CSS.
  • For mobile devices you'd have to figure out the correct zoom level (it's not 100%).
  • It sounds to me more like the issue is your zoom level not being correct in XD, more so than an actual XD to CSS issue.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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