Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Aligning type to baseline the right way with SASS
$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;
}
@jeromev

This comment has been minimized.

Copy link

commented Mar 11, 2015

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

@ghost

This comment has been minimized.

Copy link

commented Feb 29, 2016

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

@ghost

This comment has been minimized.

Copy link

commented Mar 4, 2016

Hi there, anyone have any suggestions?

@sebdesign

This comment has been minimized.

Copy link

commented Mar 23, 2016

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

@dmitriz

This comment has been minimized.

Copy link

commented May 5, 2016

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?

@dmitriz

This comment has been minimized.

Copy link

commented May 5, 2016

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

Feedback most welcome ;)

@jdudek

This comment has been minimized.

Copy link

commented Jun 16, 2016

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/

@razwan

This comment has been minimized.

Copy link
Owner Author

commented Jun 20, 2016

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 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.