3

Since we build a baseline grid to rule our copy on the web, on articles I read, it's not clear if we should use this base line for giving spaces to other elements of the web as well, such as images for example. Say, for example the baseline is 6px height, so margins of pictures would be multiple of 6px. And same with any dimension I use, my pictures should be then always be a number than can be divided by 6px? having all elements on my web built with that rule. If the baseline is only for the copy, then I can't see how I could keep the baseline properly for the copy.

UPDATE: Please have a look to what I have. http://gyazo.com/c2db7fb79a8f1b6ae3b34cd4591e6bbf My baseline is 6px and sizes and spaces of elements follow that as well. I was not aware of "the grid for layout and logical sections." Would we have two horizontal grids? where could I see that?

Improve this question

3 Answers 3

Reset to default
4

I have a feeling the answer would come down to opinions.

In my opinion no, the baseline is for consistent vertical flow. And the grid for layout and logical sections.

The two could be integrated. But may create more design issues than they fix.

You could have baseline with multiples of 4px and a grid with multiples of 7px, as long as it looks good its your call.

They are two separate guide lines developed to aid, but not to govern ;)

Improve this answer
2
  • could you have an example on what you explain? Since 7 is not multiple of 4, don't know how both can match or keep and order?
    – Franco
    Dec 24, 2014 at 6:37
  • 1
    @Franco no I'm trying to illustrate they can be different, they don't need to match.
    – Lex
    Dec 24, 2014 at 16:27
4

I think of the baseline grid as a framework to build from. You could probably potentially use it for everything but your work will end up looking robotic. For the web, I think it could make sense to use multiples of your baseline grid to create spaces between your elements as you can probably define it as an em or somehow in sass and reuse it.

In print, I use the baseline grid for my main copy mostly. For images, I use the baseline grid to align the bottom of the images and I align the top of images on x-height or cap-height, depending on the situation. I'll also tend to align the first line or bottom of captions and excerpts (pick an option and stick with it throughout) but not necessarily all the lines as that might make for an awkward line-height. I align headers and pages on elements of the layout but it doesn't have to be on the baseline grid; it really depends where they are situated.

Apart from the baseline grid, I'll often pull 2-3 main guides to create consistent alignments throughout a document.

Improve this answer
2
  • Could you specify a bit more about "Apart from the baseline grid, I'll often pull 2-3 main guides to create consistent alignments throughout a document."?
    – Franco
    Dec 23, 2014 at 1:12
  • @Franco I'll use 2 other guides, also on the baseline grid and often somewhere around the thirds but usually a bit higher. I'll rarely start text at the top of the page on a first page so those other guides ensure that I do this consistently throughout pages; they form an anchor on which to start the first page of an article vs. a full page of text.
    – curious ♦
    Dec 23, 2014 at 4:44
3

My understanding and knowledge of grids is quite limited but from what I've learned when it comes to images the upper side should line up with the f-height of the copy and the lower side should line up with the actual baseline. That may be a bit tricky to implement properly on the web but it's worth considering.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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