: Aligning non text elements to a baseline grid I'm starting to use a baseline grid for web design. Does everything have to align to the baseline or just the type and do they have to be

@YK2262411

A few tricks and guidelines that helped me, by no means complete:


Also create guides at half a line height. It's very hard to align everything to a single-height grid, especially if you're using different font sizes. This way, you can make borders or gaps half-size, or make typography have smaller increments of line height.
Don't try to align user-inserted images (as in a CMS) to the grid on all sides. It's a nightmare to try and resize images in all directions without your user ending up fighting the system and disliking it for it. Align images to the grid with their top and either left or right, let the other side and the bottom 'fall free'.
Align as many elements to the grid as possible, and let your element sizes be guided by it.
Ignore the grid if the result doesn't look good. The grid is a means, not an end. If the tool gets in the way of good design, ignore the tool. Don't let a tool limit your design.
Be aware that the size of your grid might have to change if the vieweport changes size--that is, if the screen size changes. I say might, for I have seen web designs that keep the same (vertical) rhythm throughout all their screen sizes and still be great.

Vote Up Vote Down