Skip to content

Instantly share code, notes, and snippets.

@beaucharman
Last active January 1, 2016 07:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save beaucharman/5459188 to your computer and use it in GitHub Desktop.
Save beaucharman/5459188 to your computer and use it in GitHub Desktop.
rhythm() | Sass function | Creates a funky vertical rhythm.
/**
* Rhythm
* ------------------------------------------------------------------------
* rhythm()
* @version 1.0 | April 25th 2013
* @author Beau Charman | @beaucharman | http://www.beaucharman.me
* @link https://gist.github.com/beaucharman/5459188/
* @param {em} $fontsize | em unit value
* @param {float} $lineheight | decimal value
* @return {em} em unit value
*
* Creates a funky vertical rhythm
* Assuming a unitless line height and that we are working with ems for
* font sizes. perfect for dynamic vertical rhythm on headings.
* The $lineheight can be set to a default value of the global line
* height of the project, rather than 1.4 (which is a good value anyway).
*
* A quick note on heading typography
*
* A line-height of 1.4 across headings is fantastic. This keeps the
* top and bottom margins sizes relevent, but allows for a natural
* vertical gap between multiple heading lines. This is dependent on
* the font, and size of course.
*/
@function rhythm($fontsize, $lineheight: 1.4) {
@return ($lineheight + 0em) / $fontsize + 0em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment