What's more important, baseline font-size or baseline line-height when creating grids based on a modular scale?

Question

I'm trying to understand grids based on modular scales and how to use them in web design. From what I understand, there's two ways to decide a baseline value for your scale...using your baseline font-size (1rem) or using your baseline line-height (1rem * 1.6).

CSS Frameworks like Foundation seem to prefer baseline font-size and will use that value in the grid like so:

.myDiv {
    padding: 1rem;
    margin-bottom: 0.5rem;
}

Other CSS frameworks like Bootstrap seem to prefer baseline line-height and will use that calculated value in their grid like:

// $baselineFontsize is a pixel value like 14px 
// $baselineLineHeight is a unitless number like 1.4 or 1.6

$baseline = $baselineFontsize * $baselineLineHeight;

.myDiv {
    padding: $baseline;
    margin-bottom: $baseline * 0.5;
}

// or, based on em:

.myDiv {
    padding: 1em * $baselineLineHeight;
    margin-bottom: 1em * $baselineLineHeight * 0.5;
}

What are the main differences between using font-size vs. line-height as your baseline? What are the advantages and disadvantages of each? Will they lead to a distinct looks?

Answer 1

Baseline grid are used to create a system of vertical rhythm and matching baselines between columns. This is extremely difficult to do in web design for a number of reasons.

One of the main reasons this is so difficult on the web is because of line-height. Text is placed roughly in the middle and may render differently based on the browser you're using, unlike print design programs (InDesign) where the text literally snaps and bottom aligns to the baseline.

There's a great article in Smashing Magazine that answers most of your questions about the pros and cons of different methods for setting up a baseline grid system with CSS.

As to which is best—it really depends on what you're building. Are you creating a simple brochure-like a website that's maybe 10 pages? Maybe it's worth it to strive for pixel perfection. Are you creating a web app where the content is out of your control? Maybe the simplest system that's easily transferable to multiple designers and developers is best.

Anyway, best of luck!