§ 1.1 Base Type

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.

_typeplate.scss
// $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;
	}
}
↑ back to top