: Does the typographic baseline grid manage images and other elements as well? 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
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. 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?
More posts by @Pierce403
3 Comments
Sorted by latest first Latest Oldest Best
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.
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 ;)
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.