For our base we use the following font settings on the HTML
element to standardize the typographic scale in a consistent manner. We also make sure not to use united values for our line-heights per the recommendations of Mr. Eric Meyer himself.
// $Variable $BaseType
// -------------------------------------//
//the serif boolean var can be redeclared from another stylesheet. However
//the var must be placed after your @import "typeplate.scss";
$serif-boolean: true !default;
$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack
$font-weight: normal !default;
$line-height: 1.65 !default;
$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
// $Styles $Globals
// -------------------------------------//
html {
@if $custom-font-family {
font: $font-weight #{$font-size}%/#{$line-height} $custom-font-family, $font-family;
} @else {
font: $font-weight #{$font-size}%/#{$line-height} $font-family;
}
}