Have text boxes match font-size
Right now every font sits differently inside a text box making it very difficult to design text elements to align horizontally. I've uploaded a few images to visualize the issue.
The gray area shows a height in pixels. Text boxes are laid over the gray areas. You'll notice that for the most part the fonts line up correctly from ascender to descender which is that a font-size should be.
The blue area on the left of each example shows how far off from font-size the text box is.
A few observations:
1) You'll notice that as a font gets larger the excess area also gets larger.
2) You'll notice that the amount of excess text area varies wildly font-to-font. The extra is usually on the top, but for some fonts its on the bottom.
A few takeaways:
1) When trying to cap-align a large size next to a small size, the text boxes cannot be mechanically aligned. We have to manually position them to visually align. This is especially true when dealing with contrasting font sizes or typefaces.
2) The excess makes it nearly impossible to both design an accurate looking prototype and have a mechanically accurate prototype to hand off to a developer. A developer wants to select an object and get a reading to show the distance in pixels from other objects. Right now, developers cannot trust any pixel readings they get from text elements because the objects themselves are not aligning the typographic content within it accurately.
Brandt
shared this idea
Thanks for your feedback. I’m going to leave this open, but I will say that the current text boxes match the size of the glyphs as defined by the font designer and is not calculated separately by XD. This means that you’ll often find fonts that either have extra padding or insufficient padding to include all pixels in the font, as it’s defined in the font itself. Hope that helps!
-
Cyrill Studer commented
The way XD handles the height of the text boxes is different than Illustrator and InDesign do it. In Illustrator, e.g. the distance from the base line of a font to the top of the text box stays the same no matter which font you use.
I suggest you make XD handling fonts the same way as the other apps. Please! -
Lukas Brückner
commented
I hope this post gets more votes and/or you can find any solution for this: because without this feature our developers can't even use our pixel perfect handovered layouts. Since the textboxes don't behave anything like the textboxes in HTML. They always have to manually compare the designs to the layouts and rearrange them depending on the font size by 4-5 or even 10 px.
Probably this ticket could be a solution to:
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13025094-vertical-alignment-of-text-in-text-box -
Andy
commented
I don't know if this is related but as a user of Sketch I am used to assigning a line height of text and having the height of the text container match that value. I was told how this is real html behaves.
But in Xd if I make my line height (spacing) 25px the bounding area of that text is only 19px and the option to amend the height is greyed out.
This makes it hard to maintain design rhythm
-
Husien
commented
that's right I agree with Jennifer, photoshop is not like xd , xd give a higher Cab height that appears when aligning to text blocks
-
Jennifer
commented
Elaine, why not just improve XD's text boxes by matching the existing functionality of point text in Photoshop? I realize that XD currently has a point and area text feature, but neither mimic the way Photoshop makes the bounding box the same size as text. If this isn't possible could a keyboard shortcut be created that allows users to measure pixel distances from the cap height or baseline of text instead of the bounding box? My team is new to using XD and this is holding us back from providing accurate spec for dev hand off.
