Text field margins are different in Mac and Windows!

Question

I just noticed that the distance between the text field in a button and the edges of the buttons differens depending on the device you are using!?

As an example of one button:

My designer have 18pts margin up and down, and 107pts to the left side

On my Mac I have 21pts up and 18 down, and 105 to the left side

On my Windows I have 16 pts up and 18 pts down, and 113 to the left side

The font used is SF Pro Text so should be a fairly common font.. 🙂

We are using the Point Text. And you can see that the area around the text is different in each case.

This is causing a lot of issues trying to center align the text on some device and it looks bad on another device.

Is this a bug you are working on fixing in XD or is there some way I can work around this?

Kenneth Kawamoto · Accepted Answer

Generally text is rendered differently between OS/devices/browsers and it's not a XD specific issue. Having said that I think XD can be improved by eliminating the "buffer" area from text box: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12939972-snap-text-box-edges-to-edge-of-text (this unfortunately marked as "completed", which is wrong.) You can outline the text to solve this but that may not be a solution for you.

(BTW SF is a macOS system font.)

Sign up