Fix typography

[getdave]

I think the typography of the CSS framework requires a big review.

Would like to move towards use of rem unit. That requires setting html to font-size: 62.5% (or similar) which is equal to 10px. That makes 1rem = 10px.

We then need to decide on a sensible base font size by bumping up the body font size back to 14-16px.

Then we need to make the heading hierarchy dependant on the rem unit.

[getdave]

Consider following pattern from Snook

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

[getdave]

Latest take on this is

html { font-size: 62.5%; } 

body {
    @include rem(font-size, $baseFontSize);
    color: #3c3d3b;
}

Using the following mixins

@mixin rem($property, $values) {
  $px : (); /* 3 */
  $rem: (); /* 3 */

  @each $value in $values { /* 4 */

    @if $value == 0 or $value == auto { /* 5 */
      $px : append($px , $value);
      $rem: append($rem, $value);
    }

    @else {
      $unit: unit($value);    /* 6 */
      $val: parseInt($value); /* 6 */

      @if $unit == "px" {  /* 7 */
        $px : append($px,  $value);
        $rem: append($rem, ($val / 10 + rem));
      }

      @if $unit == "rem" { /* 7 */
        $px : append($px,  ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {     /* 8 */
    #{$property}: $px;  /* 9 */
  } @else {
    #{$property}: $px;  /* 9 */
    #{$property}: $rem; /* 9 */
  }
}

// required for rem mixin
@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

Also amend fsize mixin as follows

// Font Size
@mixin fsize($font-size) {
    @include rem(font-size, $font-size);
    line-height:ceil($font-size / $baseLineHeight) * ($baseLineHeight / $font-size);
}