_baseline.scss

// $base-font-size: 	16px; // not sure this ever did anything
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

	// rhythm unit
	$rhythm: $base-line-height * $font-size / $scale;

	// number of rhythm units that can fit the font-size
	$lines: ceil(($font-size + 0.001px) / $rhythm);

	// calculate the new line-height
	$line-height: $rhythm * $lines / $font-size;

	// use the results
	font-size: $font-size;
	line-height: $line-height;

	$baseline-distance: ($line-height - $cap-height) / 2;



	// METHOD 1
	/////////////////

	// this method can relatively move down elements you may not want to
	// position: relative;
	// top: $baseline-distance + em;



	// METHOD 2
	/////////////////

	// if you use this mixin only on elements that have one direction margins
	// http://csswizardry.com/2012/06/single-direction-margin-declarations/
	// you can use this method with no worries. 
	// this method assumes the direction is down and the margin is $base-line-height
	padding-top: $baseline-distance + em;
	margin-bottom: $base-line-height - $baseline-distance + em;
}

// Step 1. Put Baseliner on the page. Because.
// http://keyes.ie/things/baseliner/
// 
// Step 2. Determine a good looking base font-size for paragraph tag.
// I chose 18px. Without specifying the second argument, the scale is 2. That looked ok to me.
// Why? See this article: https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b
// The formula is: font-size * (line-height - cap-height) / 2
// $cap-height has been set already (default of 0.68), but may need to change based on the typeface.
// 
// Step 3. Adjust baseliner settings to make the grid fit (padding on the page affects offset).
// It was 27 for the baseline and 26 for the offset for my page (18px * 1.5 line-height = 27).
// This will vary a lot depending on what other CSS you have going on. Just line it up is all.
// 
// Step 4. Adjust each element to use a new font-size and scale with the baseline() mixin.
// The scale is easy to calculate. If the font-size is to increase to 72px in this case (from the paragraph setting of 18px), then it's 4 times as large. 
// The scale is 4. Another example: 22px would be 22/18 = 1.2222 scale.
// 
// Step 5. Adjust for leading. 
// Things should be mostly aligned by following those steps. However, the rounding doesn't always work out and there may be a gap
// of a pixel or maybe a few pixels. Simply adjust the font-size or change the rounding on the scale value and it should be easy 
// to get things to align properly. Also, the leading may be wonky -- but that's simply fixed by choosing a different font-size.
// That's a design matter that is now completely within your control.
// 
// 
p {
    @include baseline(18px);
}

h1 {
    @include baseline(72px, 4);
}

This was actually pretty handy:

http://www.pearsonified.com/2011/12/golden-ratio-typography.php (not sure I agree with everything there, but there's some good points - and this calculator: http://www.pearsonified.com/typography/)

So for 18px I'm going to set the following base line height: $base-line-height: 1.65; ... That should provide a long line according to this chart (~900px). With my 465px wide column and a Helvetica face I get about 48-52 characters per line. With Times it's more like 58-59. These seem to be close with the tool that calculates CPL.

I don't know if anyone tried to translate Bringhurst's section and table on average character count per line from picas to pixels. http://webtypography.net/2.1.2 ...maybe, but I'm not sure I agree with their sizes and characters per line. That page doesn't explain any sort of translation from the width of a page to the example widths on screen that they are talking about (starting with 400px).