Demo to Show The Effects of Using a Baseline Grid
A baseline grid adds vertical rhythm to your design. They create unity through your text and generally make your page easier to read
You can turn the baseline grid on and off in this demo to observe the difference. It's on by default when you load the page and you can turn it off with the link above.
When turned off the vertical measurements in this demo are mainly the defaults for each element, though the body has a consistent line-height applied in either case.
The height of the image above has been set to 336px in so that it's a multiple of the baseline unit of 24px.
This heading is off the grid
Setting up a baseline grid comes to attention to details and consistency across the following properties.
- font-size
- line-height
- top and bottom margins
- top and bottom paddings
- top and bottom borders
- height
The above are the vertical properties controlling your type.
By consistently setting the "box" around each element to be a multiple of the basic unit (the line-height) you ensure your elements remain on the grid.
Below is a table showing the same 6 properties. It exists to show that a table can be aligned on the baseline as well as anything else.
| font-size | top and bottom paddings |
| line-height | top and bottom borders |
| height | top and bottom margins |
It's important to pay attention to detail, since even one element's box not aligned to the baseline can throw off the entire rhythm.
Because it's ultimately the box that needs to align with the baseline and not specifically the element, you can play with space and rhythm, by having some elements off the grid while still maintaining the grid itself.