Line-Height vs. Paragraph Spacing – Something is going wrong here.

New Here ,
Dec 07, 2020 Dec 07, 2020

Copy link to clipboard

Copied

If Xd wants to be a web design tool you should replace line or paragraph spacing with line height in the text formatting options. This is a huge difference(!!!), if you want to develop code from the designs later on – you only have the option for line height and NOT for line spacing in CSS.

 

I tried to document different margins below and or above typographic hierarchies but the behaviour of the paragraph spacing instead of line height (like every other web design tool and css) it totally weird.

 

Can somebody help?

TOPICS
Design, Missing feature

Views

236

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Hi there. 

 

Well, Xd isn't really trying to be a web design tool. It's mostly trying to be a UX design tool first, then maybe a UI design tool (even vector editing is very limited compared to Illustrator or even other similar tools).

 

Webflow, for example, can be considered a "web design" tool.

 

Don't get me wrong, I mostly do web design as well and I'd love to see the CSS approach within Xd, but it's just not the team's focus for now.

 

Let me try to bring some clarity into how text is handled in Xd right now.

Here's an explanation with specs, so you can click on the text areas and see how it shows the values in CSS:
https://xd.adobe.com/view/2f5e7ec6-b725-490c-8394-3c0c8f447953-7a0d/

 

In short - Line Spacing in Xd is the same as line-height in CSS (in pixels anyway). It works differently, but it looks the same. Paragraph spacing is below each paragraph, sort of like a bottom margin, but in Xd you can have it within the same text element, while in CSS you would apply it as a bottom margin to the paragraph element.

 

Hopefully this helps 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 15, 2020 Dec 15, 2020

Copy link to clipboard

Copied

Hi Spas K.,

I also uploaded an example: https://xd.adobe.com/view/d77ff444-101b-4636-8185-c34011fe3f15-822c/?fullscreen

 

The blue area shows the actual line height. That is, the height that the text requires in the browser.

In the second example, the line height was increased (marked red simulates the actual browser or sketch or figma behavior), which would have to be increased accordingly.

 

So if I later tell the developer that there should be 10px (or some kind of 0.625 rem or whatever) spacing below the headline, this corresponds visually to a larger spacing with a real line height – But I don't get a chance to estimate such distances without the real representation.

 

Don't get me wrong, but I like to design things which can be implemented smoothly in the frontend later.

... otherwise I am not surprised that all designers love Sketch and Figma.

This is a mistake to offer line spacing instead of line height.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

LATEST

Okay, I get what you're saying. Yeah, in that context I can see how it can be confusing. The CSS bounding box will be bigger on the bottom of the paragraph, so whatever margin you put will start from there and not the baseline.

Devs never complained to me about it so I never saw it as an issue.

 

But yeah, its a matter of whether one app's problems are enough to make you use another. If it's crucial to work exactly like CSS you can use Webflow (which is basically visual coding) or Figma, that are more closely based on web elements. Whatever works best for you.

 

For me it's that Xd plays more nicely with other Adobe apps, which makes me look over most of its problems (for now), otherwise I've been complaining about many nuicances within it as well.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines