Request details

← Adobe XD: Feature Requests

Include Baseline Grid for text

I really like the feature on InDesign where you can view the baseline grid for text. Since the placement of text on a website depends on where it sits in its own baseline grid, it would be really helpful if there was a way to toggle it on and off.

Having this would make it easier to know where exactly a block of text would be placed if it were say, 30px underneath an image.

It would also really help if I wanted to make a word have a background color, so I could easily figure out how tall that background block should be, and where it should be placed in relation to the word.

192 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Jason Kilp shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

18 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Henry Owens commented  ·   ·  Flag as inappropriate

    Agree, this is essential - especially when it comes to converting a design into code. The strange behavior with a container being placed around text (and the container snapping to the grid rather than the baseline) makes it incredible difficult to deploy a material design layout (or anything else that requires alignment of the baseline to a 4pt or 8pt grid).

  • Anonymous commented  ·   ·  Flag as inappropriate

    Agreed. I like to use a 8px pixel square are this makes types easier (e.g 16px on 24px leading) 4px and 8px are good increments I find. But what is annoying for me is that using "shift" + arrow keys moved in increments of 10px - can we have the ability to modify the number of pixels increments, so for me 8px. PS. When you snap to pixel grid, its works fine at 8px, just the shift+arrows is 10px

  • Tata Socjopata commented  ·   ·  Flag as inappropriate

    Yeah a baseline grid for me is essential. Really needed. I really like the way Sketch does that. Simple and to the point.

  • Jesse commented  ·   ·  Flag as inappropriate

    Also they should figure out how the actual text boxes in the layout function like they do on the web. I created a 40px size type path with 44px line height, but creates a 48px frame around it... and even shows up that way in Design Specs. They should either make an option to align to baseline grid, or make the text boxes function like they do in code.

  • Jesse commented  ·   ·  Flag as inappropriate

    Agreed, especially since Material design utilizes a 4 point baseline grid, and other design systems are adopting them as well.

  • a. commented  ·   ·  Flag as inappropriate

    As a typographer and User Interface designer it would be very helpful to have a baseline grid (as in InDesign) for text.
    Possible Workaround =>

    Actually there is already a workaround: I set up the square grid as my baseline grid and use the layout grid for the layout.

    In Order to be used as a real baseline grid the square grid would need to be blended in together with the layout grid. Both grids should be activated at the same time and it would be nice if one could alter the appearance of the baseline grid to show only the bottom lines and not the vertical lines. Voila, the feature would already be working both ways.

    With the Workaround still needed =>

    Please let the text snap to the baseline grid (square grid). Text should either stand on the grid or hang from the grid. That's the two ways a typographic grid is used.

    Regards,
    a.

  • John commented  ·   ·  Flag as inappropriate

    I agree with this!

    I'd also like to have the option for BOTH the columns layout AND the grid layout activated.

  • Camilo commented  ·   ·  Flag as inappropriate

    There needs to be a "New Guide Layout" feature, same as in Photoshop, so that the user can create a baseline grid. See screenshot attached.

    This is VERY important.

    Grids, guides, and baseline grids, need be implemented.

    Thank you!

  • Charlie commented  ·   ·  Flag as inappropriate

    Without this, all of the smart guides helpers that show you the distance between text containers are kind of pointless.

Adobe XD: Feature Requests: 01 : Design mode

Categories

Feedback and Knowledge Base

(thinking…)