Copy link to clipboard
Copied
Surprisingly, the XD team slept on adding the typography scaling and alignment controls required to create and hand off design properly.
The random feeling em box around text, is just a complete mess and options to scale and align text properly by baseline and cap height are just entirely missing.
Here is a visual illustrating the severity of this. Showing a 20 sized text in different fonts aligned to the top of the 20 sized cubes on the left.
As even a blind man can see, aligning this properly and getting a consistent design feel which can be handed off to development, is completely out of the question as it is.
Here the exact same scene in Illustrator. Where "font height reference" can be set to "cap height".
Beautifully consistent result in other Adobe software, just not the one where it matters the absolute most...
How this was overlooked in XD is baffling to me.
This should be the default. I see no reason why anyone would not want their typography to work consistently.
Have you ever heard the designer say "ohh I love how my text does not align to the graphic or object next to it" NO? WHAT A SURPRISE.
If anyone has a fix for this in XD, please let me know.
Thanks for the help.
If anyone from Adobe reads this, I genuinely hope you realized how large this issue of not being able to scale and align text properly is. I seriously hope this finds the right person.
Thanks.
Copy link to clipboard
Copied
Hi Itami,
Thank you for sharing your feedback and all the details. I'll share the same with the product team. I also found a few feature requests around this issue, I would request you to please upvote this request and add comments to add your voice.
Is it ok if I reach out to you if the product team needs additional information from your machine?
Thanks,
Atul_Saini
Copy link to clipboard
Copied
I'd be happy to assist the product team any way possible.
However, the feature requests you linked are not exactly sure it's the same thing.
For a better reference, here is a graphic illustrating what is needed better.
Text visual height "cap height to baseline" is what should not only drive the scale of the font. Meaning then size 20 will actually be 20. But it should also drive the bounding box used for alignment and spacing of objects around the font.
That way, developers will get the correct spacing around font objects and the font will look correctly when realized in apps or the web.
Copy link to clipboard
Copied
We just came across this exact same problem, when trying to transition our design team to Adobe XD for a large project.
With this issue present, we can't accurately create and hand off design specs as required by our employer.
Especially since most of our clients are Japanese, we noticed that this is even more severe in traditional Japanese writing, when we could not align a slogan with our employer's brand logo.
Adobe XD seems like a potentially good and useful tool, but until major functionally like this is sorted out, we can't make use of XD in any of our workflows.
Copy link to clipboard
Copied
Ditto. This is a BIG deal.
Copy link to clipboard
Copied
Thank you for posting this! I just spent 3 hours trying to figure out what the hell I was doing in wrong. I should have googled the issue sooner.
Copy link to clipboard
Copied
I agree this would be a great addition, but I'm pretty sure Illustrator only started aligning to glyphs that way recently (I think it was 2020).
Be sure to upvote feature requests (or create new ones) on https://adobexd.uservoice.com as that's where new features (or improvements) are handled. These user forums are for helping people with apps.
Copy link to clipboard
Copied
I sadly can't create a feature request. I assume it requires special permissions or something?
I believe that at least adding the option to align based on baseline and cap height, would tremendously help the process of creating accurate designs and passing them on to development.
Other features, like running the text scale off it, may be more optional, but creating and passing off alignments which work, is essential.