CSS Font modifiers

Description:
Provides a common system for setting font sizes and font title appearance between HTML elements.

Usage:
Mark the element with the desired font class.

Complete acronym reference based on Emmet:

FIRST 2 LETTERS
fz = font-size

WORDS AFTER THE DASH
The words after the dash are based on shirt sizes or heading elements:
h1, h2, h3, h4, h5
xs, s, m, l, xl, xxl

EXAMPLES
fz-l
fz-h1



%title {
& {
font-family: $font-face-title;
line-height: map-get($fonts, line-height-title);
font-weight: map-get($fonts, weight-title);;
margin-bottom: $spacing/4;
}
small {
font-size: .6em;
@include opacity(.7);
}
}

%fz-h1 {
@include rem-fallback(font-size, $font-size-xxl*$font-title-exponential, true);
@extend %title;
}

%fz-h2 {
@include rem-fallback(font-size, $font-size-xl*$font-title-exponential, true);
@extend %title;
}

%fz-h3 {
@include rem-fallback(font-size, $font-size-l*$font-title-exponential, true);
@extend %title;
}

%fz-h4 {
@include rem-fallback(font-size, $font-size-ml*$font-title-exponential, true);
@extend %title;
}

%fz-h5 {
@include rem-fallback(font-size, $font-size-m*$font-title-exponential, true);
@extend %title;
}

@mixin baby-headings() {
h1, .fz-h1 {
@include rem-fallback(font-size, $font-size-xxl*.9, true);
@extend %title;
}

h2, .fz-h2 {
@include rem-fallback(font-size, $font-size-xl*.9, true);
@extend %title;
}

h3, .fz-h3 {
@include rem-fallback(font-size, $font-size-l*.9, true);
@extend %title;
}

h4, .fz-h4 {
@include rem-fallback(font-size, $font-size-ml*.9, true);
@extend %title;
}

h5, .fz-h5 {
@include rem-fallback(font-size, $font-size-m*.9, true);
@extend %title;
}

h1, h2, h3, h4, h5, .fz-h1, .fz-h2, .fz-h3, .fz-h4 , .fz-h5 {
&.logo {
font-family: $font-face-logo;
font-weight: $font-weight-logo;
}
}

.fz-xxxl {
@include rem-fallback(font-size, $font-size-xxxl, true);
line-height: $base-line-height;
}

.fz-xxl {
@include rem-fallback(font-size, $font-size-xxl, true);
line-height: $base-line-height;
}

.fz-xl {
@include rem-fallback(font-size, $font-size-xl, true);
line-height: $base-line-height;
}

.fz-l {
@include rem-fallback(font-size, $font-size-l, true);
line-height: $base-line-height;
}

.fz-m {
@include rem-fallback(font-size, $font-size-m, true);
line-height: $base-line-height;
}

.fz-default {
@include rem-fallback(font-size, $font-size-default, true);
line-height: $base-line-height;
}

.fz-s {
@include rem-fallback(font-size, $font-size-xs, true);
line-height: $base-line-height;
}

.fz-xs {
@include rem-fallback(font-size, $font-size-xxs, true);
line-height: $base-line-height;
}
}

@if $ui != true {

h1, .fz-h1 {
@extend %fz-h1;
}

h2, .fz-h2 {
@extend %fz-h2;
}

h3, .fz-h3 {
@extend %fz-h3;
}

h4, .fz-h4 {
@extend %fz-h4;
}

h5, .fz-h5 {
@extend %fz-h5;
}

h1, h2, h3, h4, h5, .fz-h1, .fz-h2, .fz-h3, .fz-h4 , .fz-h5 {
&.logo {
font-family: $font-face-logo;
font-weight: $font-weight-logo;
}
}

.fz-xxxl {
@include rem-fallback(font-size, $font-size-xxxl, true);
line-height: $base-line-height;
}

.fz-xxl {
@include rem-fallback(font-size, $font-size-xxl, true);
line-height: $base-line-height;
}

.fz-xl {
@include rem-fallback(font-size, $font-size-xl, true);
line-height: $base-line-height;
}

.fz-l {
@include rem-fallback(font-size, $font-size-l, true);
line-height: $base-line-height;
}

.fz-m {
@include rem-fallback(font-size, $font-size-m, true);
line-height: $base-line-height;
}

.fz-default {
@include rem-fallback(font-size, $font-size-default, true);
line-height: $base-line-height;
}

.fz-s {
@include rem-fallback(font-size, $font-size-xs, true);
line-height: $base-line-height;
}

.fz-xs {
@include rem-fallback(font-size, $font-size-xxs, true);
line-height: $base-line-height;
}


.fw-n {
font-weight: normal;
}

.fw-b {
font-weight: bold;
}
}

h2 as h1. Lorem ipsum dolor sit amet

h3 as h2. Lorem ipsum dolor sit amet

.fz-xl Lorem ipsum dolor sit amet

.fz-l Lorem ipsum dolor sit amet

.fz-s Lorem ipsum dolor sit amet

<h2 class="fz-h1">h2 as h1. Lorem ipsum dolor sit amet</h2>
<h3 class="fz-h2">h3 as h2. Lorem ipsum dolor sit amet</h3>
<p class="fz-xl">.fz-xl Lorem ipsum dolor sit amet</p>
<p class="fz-l">.fz-l Lorem ipsum dolor sit amet</p>
<p class="fz-s">.fz-s Lorem ipsum dolor sit amet</p>