Aligning non text elements to a baseline grid

Question

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 the same sizes as the typography scale or baseline grid?

I'm confused because things don't seem to be lining up properly for example, I follow the grid with the type and then add a button below and the container of the button is either too big with a small gap above or too small with a big gap above it. So I'm struggling with how to achieve overall balance within the design because I don't know whether I have to follow the grid for all elements including things like containers, images, icons etc, or do I just need to worry about the type and balance the other elements myself without following the grid or any sort of scale. Any help is appreciated, even if it's just a link to a tutorial that helped you. Cheers.

Answer 1

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.