2

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?

  • 1
    @DumbNic Thank you. I've edited the post titled based on your feedback. – yourfriendzak Jan 28 '15 at 15:32
  • 1
    what is 'baseline font-size'? Are you asking about a typographic grid, or a page layout grid? If the latter, there's no real need to have any direct correlation to font size. It's just an arbitrary decision made by the designers of each grid system. – DA01 Jan 28 '15 at 16:11
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!

  • Good answer. Not only is it difficult on the web, it's usually irrelevant there's no need to have content wrap in columns on a vertically scrolling page. – DA01 Jan 28 '15 at 16:10
  • @DumbNic I wasn't saying it is difficult to align text, I was saying it's difficult to replicate a baseline grid system on the web in the same way you do in print because of all of the variables. Especially when you're creating a flexible framework. – Kurtis Beavers Jan 28 '15 at 17:49
  • @DumbNic the context is baseline grids--which is a very different thing than text-align/vertical-align. – DA01 Jan 28 '15 at 18:28
  • @DumbNic we may just be thinking of two different things. A baseline grid for typography is about having columns of type adhere to a consistent baseline (see: webdesignstuff.co.uk/in108/files/2012/01/… ) It's mostly a print concept as it's not really practical to implement on the web as there simply is no concept of a type baseline in CSS. – DA01 Jan 28 '15 at 19:53
  • @DumbNic traditionally (in print) that's exactly what it was for...text that would be laid out across columns (Newspapers, magazines, etc.). Some have argued for the same thing on the web, but it never really works and is arguable as to whether it's even necessary. Even with separate text in each column you have issues mixing font styles and retaining the baseline (headers, for example). – DA01 Jan 28 '15 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.