Aligning type to baseline the right way with SASS

_baseline.scss

$base-font-size: 	16px;
$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;
}

https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b

Thanks razwan
Here is a little component I wrote based on this gist: https://github.com/jeromev/grid.scss

Hi,

This is very interesting. At some point could you provide some examples on how this would be used? I started making a codepen, but the calculations seem to be off. http://codepen.io/jkinley/pen/pyoBbZ?editors=0100

Thanks,

Jeff

Hi there, anyone have any suggestions?

@razwan @yckart @jkinley @jeromev I made a small library to help calculating the cap height of web fonts: https://github.com/sebdesign/cap-height

Shouldn't it be

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

instead of

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

That way $rhythm will stay consistent across the fonts.
Right now it depends on the font-size of the current element, which is not desired if I see it right?

Here is my update with small corrections and comments:
https://gist.github.com/dmitriz/071afc8f6f7d25645b524a1777aa894a

Feedback most welcome ;)

There is a third method—use positive top margin and negative bottom margin. It won’t break due to margin collapsing, because positive+negative margins collapse to their sum. I wrote on article on how to implement that: https://pilot.co/blog/implementing-baseline-rhythm-in-css/

Hi guys!

The main reason It didn't pay too much attention to the activity on this gist is because it was just a proof of concept at the time.
It worked for me and hopefully worked for most people who bumped into it.
As time went by... many tools that do these tiny bits of work for you and that are built in Sass have emerged (ie. http://sassline.com)

@jeromev @sebdesign @dmitriz @yckart thanks for your interest and your effort for moving forward!
@jdudek great article! and thanks for the mention.

@jkinley hope you figured out that the mixin should've been applied on the p element not on the html and that there were some other margins / paddings that would interfere with your rhythm. But if you have other questions feel free to ask. I'll try to be more present 😄