Now, I’m somewhat known for speaking out against CSS frameworks. However, I have to come clean: I’ve become quite a fan of BluePrint CSS.

If you don’t know much about BluePrint, make sure to check out this article and this handy little PDF cheat sheet. Before using a framework like this, I highly recommend digging through the code to figure out exactly what’s going on–you’ll be able to make much better use of it that way.

Configuring Your Font-Size and Baseline

BluePrint’s typography.css file sets up some very nice typography styles that create a beautiful baseline grid. By default, it sets the font-size to 12px and sets up the line-height and baseline of 18px based on that. While this is fine, I often prefer to have a larger font-size than 12px. So how do we calculate that?

A quick look under the hood makes this easy. If we go into typography.css, we see that the base font-size is set to 75%. This is the percentage of 16px (the default for 100%) that equals 12px. So if you need to set the text-size to something else, simply use this equation:

Desired font-size in px/16px = % value

Simply use this % value as your font-size in the body, set in the beginning of typography.css.

Doing this will, of course, change our line-height/baseline size. BluePrint CSS will calculate it by taking your font-size and multiplying it by 1.5. So for 12px (the BluePrint default), it will be 12*1.5 = 18px. When using a baseline grid, you want everything to be a multiple of this number (including images, etc.) in order to keep everything lined up.

This means that we will need to calculate what the new baseline is in pixels so that we can keep our images sized correctly. To do that, we simply use this equation:

Font-size in px from previous equation * 1.5 = New Baseline

And now you’re set to go. swan