Golden Ratio typography mixin and function for Stylus CSS preprocessor

golden-ratio-line-height.styl

// Simple Stylus functions for approximating a golden-ratio line height,
// based on a font size and target content width.
//
//
// goldenRatio(font-size, content-width)
// * given font size and content width, generate the font size, height, and width
//
// Usage:
//    div.readable
//      goldenRatio 20px 550px
//
//
// goldenRatioLineHeight(font-size, content-width)
// * figure out the optimal line height, given font size and content width
//
// Usage:
//    div.readable
//      width: 550px
//      font-size: 20px
//      line-height: goldenRatioLineHeight 20px 550px
//
//
// @author Arsenio Santos
// @since 1.0

goldenRatioLineHeight(font-size, content-width)
  phi = 1.618033989
  two-phi = 2 * phi
  one-over-two-phi = 1 / two-phi
  width-ratio = content-width / ((font-size * phi) ** 2)
  one-minus-width-ratio = 1 - width-ratio
  height-factor = phi - (one-over-two-phi * one-minus-width-ratio)
  line-height = round(height-factor * font-size)

goldenRatio(font-size, content-width)
  font-size font-size
  width content-width
  line-height goldenRatioLineHeight(font-size, content-width)