typography.scss

// ==========================================================================
// TYPOGRAPHY
//
// Global typography settings and styles
// base/_typography.scss
// ==========================================================================



// Font-size scale (Based on http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/)
// --------------------------------------------------------------------------

$font-size-giga:      rem-calc(48);
$font-size-mega:      rem-calc(36);
$font-size-kilo:      rem-calc(24);
$font-size-alpha:     rem-calc(21);
$font-size-beta:      rem-calc(18);
$font-size-gamma:     rem-calc(16);
$font-size-delta:     rem-calc(14);
$font-size-epsilon:   rem-calc(12);
$font-size-zeta:      rem-calc(11);
$font-size-milli:     rem-calc(10);



// Font-size scale (Based on http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/)
// ==========================================================================

h1, 
.alpha { 
  font-size: $font-size-alpha; 
}

h2, 
.beta { 
  font-size: $font-size-beta; 
}

h3, 
.gamma { 
  font-size: $font-size-gamma; 
}

h4, 
.delta { 
  font-size: $font-size-delta; 
}

h5, 
.epsilon { 
  font-size: $font-size-epsilon; 
}

h6, 
.zeta { 
  font-size: $font-size-zeta; 
}

.giga { font-size: $font-size-giga; }
.mega { font-size: $font-size-mega; }
.kilo { font-size: $font-size-kilo; }

small, 
.milli { 
  font-size: $font-size-milli; 
}



// Headers
// --------------------------------------------------------------------------

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem;
}