Sizing in XD differs than that in CSS
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.
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?
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.
I do stink with font conversions, so I will sometimes use a cheatsheet
Copy link to clipboard
Copied
- 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
![](/skins/images/F05736DC39F4E9CD27A7C9535F10667B/responsive_peak/images/icon_anonymous_message.png)
![](/skins/images/F05736DC39F4E9CD27A7C9535F10667B/responsive_peak/images/icon_anonymous_message.png)