Skip to main content
P
Pritul Jitend325302161dgl
Participant
January 16, 2025
Question

Sizing in XD differs than that in CSS

  • January 16, 2025
  • 3 replies
  • 471 views

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.

    3 replies

    Dan Rodney
    Community Expert
    Dan RodneyCommunity Expert
    Community Expert
    January 26, 2025
    • 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
    creative explorer
    Community Expert
    creative explorerCommunity Expert
    Community Expert
    January 18, 2025

    @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

     

    m
    P
    Pritul Jitend325302161dglAuthor
    Participant
    January 16, 2025

    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?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices