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.

  • Hi Matt, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Oct 31 '16 at 13:03

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.
  • 1
    Thanks Vincent that helps. I like the half line-height tip, I'm going to go and try it now. – Matt Oct 31 '16 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.