Golden Ratio Typography for Sass

_golden-ratio.scss

//
// Golden Ratio Typography
// --------------------------------------------------


// Golden Ratio Math
//
// Let's do some math so we can build beautiful typography and vertical rhythm.
// For any magic to happen, set the $ContentWidth variable on _variables.scss
// to match your content box width (normally this is 640px, 740px, etc...).
//
// Many thanks to Chris Pearson's scary math skills http://t.co/KoeUoEWrNS
// and his Golden Ratio Calculator http://t.co/6MyXPtRrlu
//
// @author Greg Rickaby
// @since 1.0
// @requires $ContentWidth
// ----------------------------------
$phi: (1 + sqrt(5)) / 2; // 1.61803398874989 or "The Golden Ratio"
$xoo: 1 / (2 * $phi);
$yoo: sqrt($ContentWidth) / $phi; // Line-height
$zoo: $phi - $xoo * (1 - ($ContentWidth / $yoo));


// Title Size
//
// Calculated title size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grTitleSize();
// --------------------------------
@function calcTitleSize() {
  $foo: calcFontSize() * pow($phi, 2);
    @return round($foo);
}

@mixin grTitleSize() {
  font-size: calcTitleSize() + px;
  font-size: (calcTitleSize() / calcFontSize()) + rem;
  line-height: calcTitleSize() / $yoo;
}


// Headline Size
//
// Calculated headline size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grHeadlineSize
// --------------------------------
@function calcHeadlineSize() {
  $foo: calcFontSize() * pow($phi, 1);
    @return round($foo);
}

@mixin grHeadlineSize() {
  font-size: calcHeadlineSize() + px;
  font-size: (calcHeadlineSize() / calcFontSize()) + rem;
  line-height: calcHeadlineSize() / $yoo;
}


// Sub-headline Size
//
// Caclulated sub-headline size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grSubHeadlineSize();
// --------------------------------
@function calcSubHeadlineSize() {
  $foo: calcFontSize() * sqrt($phi);
    @return round($foo);
}

@mixin grSubHeadlineSize() {
  font-size: calcSubHeadlineSize() + px;
  font-size: (calcSubHeadlineSize() / calcFontSize()) + rem;
  line-height: calcSubHeadlineSize() / $yoo;
}


// Font Size
//
// Calculated font size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grFontSize();
// --------------------------------
@function calcFontSize() {
  $foo: sqrt($ContentWidth) / $phi;
    @return round($foo);
}

@mixin grFontSize() {
  font-size: calcFontSize() + px;
  font-size: (calcFontSize() / calcFontSize()) + rem;
  line-height: calcFontSize() / $yoo;
}


// Secondary Text
//
// Calculated secondary text size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grSecondaryText();
// --------------------------------
@function calcSecondaryText() {
  $foo: calcFontSize() * (1 / sqrt($phi));
    @return round($foo);
}

@mixin grSecondaryText() {
  font-size: calcSecondaryText() + px;
  font-size: (calcSecondaryText() / calcFontSize()) + rem;
  line-height: calcSecondaryText() / $yoo;
}


// Default Line Height
//
// Calculate default line-height based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grBaseLineHeight();
// --------------------------------
@function calcBaseLineHeight() {
  $foobar: sqrt($ContentWidth) / $phi;
  $foo: calcFontSize() * ($phi - $xoo * (1 - ($ContentWidth / pow(calcFontSize() * $phi, 2))));
  $fo: $foo / $foobar;
    @return $fo;
}

@mixin grBaseLineHeight() {
  line-height: calcBaseLineHeight();
}


// Custom Line Height
//
// Calculate a Golden Ratio line-height based on a custom
// value specified by you.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grCustomLineHeight(26);
// --------------------------------
@function calcCustomLineHeight($target) {
  $foobar: sqrt($ContentWidth) / $phi;
  $foo: $target / $foobar;
    @return $foo;
}

@mixin grCustomLineHeight($target) {
  line-height: calcCustomLineHeight($target);
}

This is super awesome, did you actually use it ? do you have the functions for sqrt and pow ? I'm wondering why the font-size: property is two times, once in rem once in px.

Backward compatibility for browsers that don't support rem. Modern browsers will overwrite the px rule with the subsequent rem rule. Older browsers will ignore the rem rule and use the px rule

Is there a certain webpack config you need for this? I kept on reveiving the following error:
Module build failed:
$zoo: $phi - 20 * (1 - ($ContentWidth / $yoo));
^
Undefined operation: "20 times 1-500/sqrt(500)/1.61803"

Its worth pointing our the use of a maths library with this file in order to use the sqrt and pow functions, there is a very good library here:
https://github.com/terkel/mathsass

Which contains all of the necessary functions to get this working in actual projects, you should also specify the Contentwidth as a number, i.e. 350px would be $Contentwidth: 375;

Wow! Thank you man. Good job.
:)