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.
Jason Kilp
shared this idea
16 comments
-
Marc
commented
Yes please !
But the Square mode isn't enough (https://helpx.adobe.com/lu_en/xd/help/artboards-grids.html#grids) ?
Moreover, it's a shame that it isn't possible to combine the Layout mode and Square mode. It's one or the other.
-
Anonymous
commented
indispensable!
-
yas
commented
yes please...
-
James Kachan commented
YES - Please
-
Paul
commented
YES Baseline grid please! This is/should be a no brainer!!
-
Henry Owens commented
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).
-
Amogh
commented
Yes, Adobe XD will be a huge letdown without baseline grid.
-
Anonymous
commented
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
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
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
Agreed, especially since Material design utilizes a 4 point baseline grid, and other design systems are adopting them as well.
-
a.
commented
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
I agree with this!
I'd also like to have the option for BOTH the columns layout AND the grid layout activated.
-
Camilo
commented
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
Without this, all of the smart guides helpers that show you the distance between text containers are kind of pointless.
-
Stevo
commented
Not just a baseline grid for text, baseline grid for images too.