Font size configuration with Sass (SCSS)

_config.scss

/* font size & line height in px */
$font-size-body-px: 14;
$line-height-px: 21;

/* calculate font-size (in %) and line-height (in em) */
$font-size-body: pc($font-size-body-px, 16);
$line-height: em($line-height-px, $font-size-body-px);

_sizes.scss

// Reset the global font size to the given value.
// Helpful if the font size should change at different responsive breakpoints.
//
// @param integer new global font size in px
// @return string new font size var and stylesheet for body
@mixin refont($px) {
  $font-size-body-px: $px;
  $font-size-body: $font-size-body-px / 16 * 100%;
  body { font-size: $font-size-body; }
}

// Calculates em so it could be used everywhere.
//
// @param integer (font) size in pixel
// @param integer reference font-size in pixel
// @return string em
@function em($px: $line-height-px, $font-size: $font-size-body-px) {
  @return $px / $font-size * 1em;
}

// Calculates rem so it could be used everywhere.
//
// @param integer font size in pixel
// @param integer reference size (for rem always font-size of body) in pixel
// @return string rem
@function rem($px: $line-height-px, $font-size: $font-size-body-px) {
  @return $px / $font-size * 1rem;
}

// Calculates percent so it could be used everywhere.
//
// @param integer size in pixel
// @param integer reference size in pixel
// @return string em
@function pc($px: $line-height-px, $standard: $font-size-body-px) {
  @return $px / $standard * 100%;
}

// Creates the font size in %
//
// @param integer font size in px
// @param integer font-size of parent element in px (if empty than it's the global font size)
// @return string css font-size with calculated % value
@mixin font-size($px, $standard: $font-size-body-px) {
  font-size: pc($px,$standard);
}

// Creates the line height in em
//
// @param integer font size in pixel
// @param integer line-height in pixel
// @return string line height
@mixin line-height($line-height: $line-height-px, $font-size: $font-size-body-px) {
  line-height: em($line-height, $font-size);
}

typography.scss

// typography dummy - example of how to use the Sass functions
//
// @author             Michael Schulze
// @version            1.0
// @copyright          Michael Schulze, 19 Juli, 2012
// @license            MIT license
//
// @package            sass
//
// @lastmodified       $Date: 2012-07-19 13:19:13 +0200 (Do., 19 Jul 2012) $

@include "sizes";
@include "config";

@media all
{

  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: $font-size-body;

    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  h1 {
    font-size: rem(28);
    line-height: em(42);
  }

  big {
    font-size: pc(16);
  }
  small {
    font-size: em(12);
  }

  div.info {
    font-size: pc(16);
  }

  /* You have to set a new reference when using pc() or em() */
  div.info .description {
    font-size: pc(12,16);
  }

}