_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;
}

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).