Skip to main content
A
andinichtandy
Participant
December 7, 2020
Question

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

  • December 7, 2020
  • 1 reply
  • 4482 views

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?

    This topic has been closed for replies.

    1 reply

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    December 12, 2020

    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 🙂

      A
      andinichtandyAuthor
      Participant
      December 15, 2020

      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.

        Spas K.
        Community Expert
        Spas K.Community Expert
        Community Expert
        December 16, 2020

        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.

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