Skip to content

Instantly share code, notes, and snippets.

@dmitriz
Forked from razwan/_baseline.scss
Last active October 8, 2020 22:01
Show Gist options
  • Save dmitriz/071afc8f6f7d25645b524a1777aa894a to your computer and use it in GitHub Desktop.
Save dmitriz/071afc8f6f7d25645b524a1777aa894a to your computer and use it in GitHub Desktop.
Aligning type to baseline the right way with SASS
// font-size of the regular font used
$base-font-size: 16px;
// it is convenient to declare a fixed base-line-height,
// so every other line-height is a simple multiple of base-line-height
$base-line-height: 21px; // 1.5 * base-font-size
// allow fractional line-height as integer multiple of base-line-height / line-height-scale
$line-height-scale: 1;
// rhythm is that fraction of the base-line-height
$rhythm: $base-line-height / $line-height-scale;
// The height of a capital letter for the typeface chosen (may vary)
// https://en.wikipedia.org/wiki/Cap_height
// Usually about 0.7em (see http://jsbin.com/gofexi/edit?html,css,output)
$font-cap-height: 0.7em;
@mixin baseline($font-size) {
// number of rhythm units that can fit the font-size
$lines: ceil(($font-size + 0.001px) / $rhythm);
// set the new line-height
// to be the minimum integer multiple of $rythm exceeding current $font-size
$line-height: $lines * $rhythm;
// use the results
font-size: $font-size;
line-height: $line-height;
// distance between current font's baseline and its box bottom edge
$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;
// 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
// move current font baseline down to the previous position of the box bottom edge,
// which is integer multiple of $rhytm away from the top,
// assuming the mixing has been consistently applied above:
padding-top: $baseline-distance;
// ensure the next box top edge is $line-height + $base-line-height below the current box top edge
// in particular, the next box top edge falls onto our grid
// (i.e. integer multiple of $rhythm away from the top edge)
margin-bottom: $base-line-height - $baseline-distance;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment