A big deal has been made of Flatiron’s impeccable baseline grid, which keeps text precisely aligned. But what happens when an image is added to the mix? Since images can be any height, it’s difficult to ensure the text stays on the grid when a picture is added.
To keep images aligned with the baseline grid, make sure their height is a multiple of 21, and they don’t have any borders or padding.
Alternatively, you can make an image’s height whatever you want, as long as the height + padding + borders add up to a multiple of 21.
It’s as easy as that!
Flatiron is free to use, and can be downloaded here.