diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 23aa11fe6d..ded893bd5c 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -1,8 +1,12 @@
+html {
+  font-size: 62.5%;
+}
+
 body {
   font-family: $main-font;
   margin: 0;
   color: $darkgray;
-  font-size: 14px;
+  @include font-size(14);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -12,9 +16,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  display: inline-block;
-  font-size: 24px;
+  @include font-size(24);
   font-weight: 500;
+  display: inline-block;
   margin: 8px 0px;
 
   @media screen and (max-width: 600px) {
@@ -23,37 +27,37 @@ h1 {
 }
 
 h2 {
-  font-size: 22px;
+  @include font-size(22);
   font-weight: 500;
   margin: 32px 0px 24px;
   clear: both;
 }
 
 h3 {
-  font-size: 20px;
+  @include font-size(20);
   font-weight: 400;
   margin: 24px 0px 12px;
   clear: both;
 }
 
 h4 {
-  font-size: 18px;
+  @include font-size(18);
   font-weight: 400;
   margin: 8px 0px;
   clear: both;
 }
 
 h5 {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
   margin: 8px 0px;
   clear: both;
 }
 
 h6 {
-  color: $mediumgray;
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
+  color: $mediumgray;
   margin: 8px 0px;
   clear: both;
 }
@@ -83,13 +87,13 @@ ol,
 li,
 input,
 a {
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0.3px;
+  @include font-size(14);
+  @include line-height(24);
+  @include letter-spacing(0.3);
   font-weight: 400;
   color: $darkgray;
   & > em {
-    letter-spacing: 0.3px;
+    @include letter-spacing(0.3);
   }
 }
 
@@ -129,7 +133,7 @@ a {
 }
 
 .app-toolbar a {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 400;
   color: $white;
   font-family: $main-font;
@@ -157,7 +161,7 @@ table tbody th {
 td {
   font-weight: 400;
   padding: 8px 30px;
-  letter-spacing: 0.3px;
+  @include letter-spacing(0.3);
 
   > p,
   ul {
@@ -171,7 +175,7 @@ td {
 }
 
 th {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
   padding: 13px 32px;
   text-align: left;
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index c470965570..fb25524c2f 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -1,6 +1,6 @@
 footer {
   position: relative;
-  line-height: 24px;
+  @include line-height(24);
   flex: 1;
   padding: 48px;
   z-index: 0;
@@ -37,7 +37,7 @@ footer {
     cursor: pointer;
   }
   h3 {
-    font-size: 16px;
+    @include font-size(16);
     text-transform: uppercase;
     font-weight: 400;
     margin: 0 0 16px;
@@ -82,23 +82,15 @@ footer {
     }
   }
 
-
-
-
-  @media (max-width: 700px) {
-    h3 {
-      font-size: 110%;
-    }
-  }
   @media (max-width: 600px) {
     h3 {
-      font-size: 100%;
+      @include font-size(14);
     }
   }
 }
 
 footer::after {
-    content: "";
+    content: '';
     position: absolute;
     z-index: -1;
     top: 0;
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 89d579eee0..034223b764 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -22,9 +22,9 @@
 
   .hero-title {
     display: inline-block;
-    font-size: 28px;
+    @include font-size(28);
     font-weight: 400;
-    line-height: 48px;
+    @include line-height(48);
     margin: 0 8px 0 0;
     text-transform: uppercase;
 
@@ -76,8 +76,8 @@ section#intro {
   }
 
   .hero-headline {
-    font-size: 40px;
-    line-height: 64px;
+    @include font-size(40);
+    @include line-height(64);
     font-weight: 500;
     margin: 32px 0;
 
@@ -90,8 +90,8 @@ section#intro {
     }
 
     @media (max-width: 575px) {
-      font-size: 32px;
-      line-height: 50px;
+      @include font-size(32);
+      @include line-height(50);
     }
   }
 
@@ -154,7 +154,7 @@ section#intro {
     align-items: center;
     height: 40px;
     min-width: 160px;
-    font-size: 16px;
+    @include font-size(16);
     color: $white;
     background-color: $blue;
     border-radius: 48px;
@@ -172,11 +172,11 @@ section#intro {
     right: 0;
     position: static;
     transition: all 0.3s ease-in;
-    font-size: 16px;
+    @include font-size(16);
   }
 
   p {
-    font-size: 16px;
+    @include font-size(16);
     margin: 8px;
     text-align: center;
   }
@@ -252,9 +252,9 @@ section#intro {
   width: 184px;
   height: 40px;
   padding: 0 24px;
-  font-size: 18px;
+  @include font-size(18);
   font-weight: 600;
-  line-height: 40px;
+  @include line-height(40);
   background-color: $white;
   border-radius: 48px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
@@ -325,7 +325,7 @@ aio-shell {
 }
 
 .text-headline {
-  font-size: 20px;
+  @include font-size(20);
   font-weight: 500;
   color: $blue;
   margin-top: 10px;
@@ -424,7 +424,7 @@ div[layout=row]{
 
   .banner-headline {
     text-transform: uppercase;
-    font-size: 24px;
+    @include font-size(24);
     font-weight: 300;
     color: $white;
     margin: 0;
@@ -432,7 +432,7 @@ div[layout=row]{
     -webkit-margin-after: 0;
 
     @media (max-width: 600px) {
-      font-size: 18px;
+      @include font-size(18);
       font-weight: 400;
     }
 
diff --git a/aio/src/styles/1-layouts/_not-found.scss b/aio/src/styles/1-layouts/_not-found.scss
index d599aa3b9a..10ab5679c4 100644
--- a/aio/src/styles/1-layouts/_not-found.scss
+++ b/aio/src/styles/1-layouts/_not-found.scss
@@ -13,8 +13,8 @@
     flex-direction: column;
 
     h1 {
-        font-size: 48px;
-        color: $blue;
+      @include font-size(48);
+      color: $blue;
         text-transform: uppercase;
         margin: 8px 0;
     }
@@ -22,6 +22,6 @@
 
 .nf-icon.material-icons {
     color: $blue;
-    font-size: 100px;
+    @include font-size(100);
     position: static;
 }
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 819ea52558..5eb058aa01 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -6,7 +6,7 @@
 aio-nav-menu {
   display: block;
   margin: 0 auto;
-  font-size: 13px;
+  @include font-size(13);
   ul, a {
     padding: 0;
     margin: 0;
@@ -137,7 +137,7 @@ button.vertical-menu-item {
 
 .level-1 {
   font-family: $main-font;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
   margin-left: 14px;
   transition: background-color 0.2s;
@@ -147,7 +147,7 @@ button.vertical-menu-item {
 .level-2 {
   color: $mediumgray;
   font-family: $main-font;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
   margin-left: 12px;
   text-transform: none;
@@ -156,7 +156,7 @@ button.vertical-menu-item {
 .level-3 {
   color: $mediumgray;
   font-family: $main-font;
-  font-size: 14px;
+  @include font-size(14);
   margin-left: 10px;
 }
 
@@ -195,7 +195,7 @@ mat-sidenav .doc-version {
 
     option {
       font-family: $main-font;
-      font-size: 14px;
+      @include font-size(14);
     }
   }
 }
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
index 213e4fc88f..b99c879660 100644
--- a/aio/src/styles/2-modules/_alert.scss
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -1,7 +1,7 @@
 .alert {
     padding: 16px;
     margin: 24px 0px;
-    font-size: 14px;
+    @include font-size(14);
     color: $darkgray;
     width: 100%;
     box-sizing: border-box;
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index f9e241f945..eeac9b1d7a 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -70,29 +70,25 @@ aio-api-list {
     box-sizing: border-box;
     border: 1px solid $white;
     color: $blue-600;
-    font-size: 16px;
+    @include font-size(16);
     height: 32px;
-    line-height: 32px;
+    @include line-height(32);
     outline: none;
     padding: 0 16px 0 32px;
     transition: all .2s;
 
     // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    &::-webkit-input-placeholder,
+    &::-moz-placeholder,
+    &::-ms-input-placeholder,
+    &:-moz-placeholder {
+      /* Chrome/Opera/Safari */
+      /* Firefox 19+ */
+      /* IE 10+ */
+      /* Firefox 18- */
+
       color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
-      color: $blue-grey-100;
-      font-size: 14px;
+      @include font-size(14);
     }
 
     &:focus {
@@ -103,7 +99,7 @@ aio-api-list {
 
   .material-icons {
     color: $blue-grey-100;
-    font-size: 20px;
+    @include font-size(20);
     left: 8px;
     position: absolute;
     top: 6px;
@@ -120,9 +116,9 @@ aio-api-list {
   box-shadow: 0 1px 2px rgba($black, .24);
   color: $white;
   display: inline-block;
-  font-size: 10px;
+  @include font-size(10);
   font-weight: 600;
-  line-height: 16px;
+  @include line-height(16);
   text-align: center;
   width: 16px;
 
@@ -170,9 +166,9 @@ aio-api-list {
     }
 
   li {
-    font-size: 14px;
+    @include font-size(14);
     margin: 8px 0;
-    line-height: 14px;
+    @include line-height(14);
     padding: 0;
     float: left;
     width: 33%;
@@ -187,7 +183,7 @@ aio-api-list {
     a {
       color: $blue-grey-600;
       display: inline-block;
-      line-height: 16px;
+      @include line-height(16);
       padding: 0 16px 0;
       text-decoration: none;
       transition: all .3s;
@@ -208,8 +204,8 @@ aio-api-list {
 
 .docs-content .h2-api-docs,
 .docs-content .h2-api-docs:first-of-type {
-  font-size: 18px;
-  line-height: 24px;
+  @include font-size(18);
+  @include line-height(24);
   margin-top: 0;
 }
 
@@ -251,7 +247,7 @@ p {
 .row-margin {
   margin-bottom: 36px;
   h2 {
-    line-height: 28px;
+    @include line-height(28);
   }
 }
 
@@ -292,7 +288,7 @@ p {
 }
 
 .api-doc-code {
-  font-size: 14px;
+  @include font-size(14);
   color: #1a2326;
 
   // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
@@ -314,11 +310,11 @@ p {
   }
 
   .api-doc-code {
-    font-size: 12px;
+    @include font-size(12);
   }
 
   p.location-badge {
     position: relative;
-    font-size: 11px;
+    @include font-size(11);
   }
 }
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index cba75060b5..f69e96eed4 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -6,7 +6,7 @@
 
       th {
           text-transform: none;
-          font-size: 16px;
+          @include font-size(16);
           font-weight: bold;
       }
 
@@ -52,7 +52,7 @@
 
       &.parameters-table {
         margin-top: 0;
-        font-size: 14px;
+        @include font-size(14);
         box-shadow: none;
 
         tr {
@@ -120,7 +120,7 @@
   .material-icons {
     border-radius: 4px;
     padding: 4px;
-    font-size: 20px;
+    @include font-size(20);
     &:hover {
       background-color: $mist;
     }
@@ -166,7 +166,7 @@
     }
 
     h4 {
-      font-size: 14px;
+      @include font-size(14);
       font-weight: bold;
       margin-top: 12px;
     }
@@ -175,12 +175,12 @@
 
   .api-heading {
     padding: 5px 0;
-    font-size: 14px;
+    @include font-size(14);
   }
 
   .parameters-table {
     margin-top: 0;
-    font-size: 14px;
+    @include font-size(14);
     td:nth-child(1) {
       width: 20%;
     }
@@ -245,9 +245,9 @@
 
 
   .from-constructor, .read-only-property, .write-only-property {
-    font-size: 12px;
+    @include font-size(12);
     font-weight: 600;
-    letter-spacing: 0.5px;
+    @include letter-spacing(0.5);
     font-style: italic;
     background-color: $lightgray;
     border-radius: 4px;
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
index bf59b91477..29702bd354 100644
--- a/aio/src/styles/2-modules/_buttons.scss
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -3,9 +3,9 @@
 .button,
 a.button.mat-button {
   display: inline-block;
-  line-height: 32px;
+  @include line-height(32);
   padding: 0px 16px;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
   border-radius: 3px;
   text-decoration: none;
@@ -15,20 +15,20 @@ a.button.mat-button {
 
   // SIZES
   &.button-small {
-    font-size: 12px;
-    line-height: 24px;
+    @include font-size(12);
+    @include line-height(24);
     padding: 0px 8px;
   }
 
   &.button-large {
-    font-size: 15px;
-    line-height: 48px;
+    @include font-size(15);
+    @include line-height(48);
     padding: 0px 24px;
   }
 
   &.button-x-large {
-    font-size: 16px;
-    line-height: 56px;
+    @include font-size(16);
+    @include line-height(56);
     padding: 0px 24px;
   }
 
@@ -85,10 +85,10 @@ a.button.mat-button {
 
 a.filter-button {
   width: 140px;
-  font-size: 14px;
+  @include font-size(14);
   padding: 0px 16px;
   margin: 8px;
-  line-height: 48px;
+  @include line-height(48);
   border: 2px solid $blue;
   border-radius: 4px;
 
diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss
index 41842d1c2b..5b4221b8f1 100644
--- a/aio/src/styles/2-modules/_callout.scss
+++ b/aio/src/styles/2-modules/_callout.scss
@@ -6,7 +6,7 @@
 
   header {
     color: $white;
-    line-height: 24px;
+    @include line-height(24);
     font-weight: 500;
     padding: 8px 16px;
     margin: 0;
@@ -17,7 +17,7 @@
   p {
     padding: 16px;
     margin: 0px;
-    font-size: 14px;
+    @include font-size(14);
   }
 
   > *:not(:first-child) {
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss
index 18552702dc..f989829e04 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/_card.scss
@@ -26,7 +26,7 @@
     }
 
     .card-footer {
-      line-height: 32px;
+      @include line-height(32);
       padding: 8px 16px;
       background-color: rgba($blue, 0.1);
       color: $blue;
@@ -36,8 +36,8 @@
 
   section {
     color: $deepgray;
-    font-size: 20px;
-    line-height: 24px;
+    @include font-size(20);
+    @include line-height(24);
     margin: 0;
     padding: 32px 0 24px;
     text-transform: none;
@@ -46,8 +46,8 @@
 
   p {
     color: $darkgray;
-    font-size: 13px;
-    line-height: 24px;
+    @include font-size(13);
+    @include line-height(24);
     padding: 0 16px;
     margin: 0;
     text-align: center;
@@ -57,7 +57,7 @@
     bottom: 0;
     border-top: 0.5px solid $lightgray;
     box-sizing: border-box;
-    line-height: 48px;
+    @include line-height(48);
     left: 0;
     position: absolute;
     right: 0;
@@ -66,7 +66,7 @@
 
     a {
       color: $mediumgray;
-      font-size: 13px;
+      @include font-size(13);
     }
   }
   .card-footer.center {
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 603143288e..e2931b2313 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -51,7 +51,7 @@ code-example header {
   background-color: $accentblue;
   border-radius: 5px 5px 0 0;
   color: $offwhite;
-  font-size: 16px;
+  @include font-size(16);
   padding: 8px 16px;
 }
 
@@ -88,7 +88,7 @@ aio-code pre {
     align-items: center;
 
     code span {
-      line-height: 24px;
+      @include line-height(24);
     }
 }
 
@@ -159,7 +159,7 @@ ol.linenums {
     margin: 0;
     font-family: $code-font;
     font-size: 90%;
-    line-height: 24px;
+    @include line-height(24);
   }
 }
 
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index d0984c1011..2000420131 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -72,7 +72,7 @@ aio-contributor {
 
     .info-item {
       color: $white;
-      font-size: 14px;
+      @include font-size(14);
       font-weight: 500;
       margin: 8px;
       padding: 0;
@@ -142,8 +142,8 @@ aio-contributor {
 
       p {
         margin: 8px 0;
-        font-size: 12px;
-        line-height: 14px;
+        @include font-size(12);
+        @include line-height(14);
         text-align: left;
       }
 
@@ -172,7 +172,7 @@ aio-contributor {
   }
 
   section {
-    font-size: 14px;
+    @include font-size(14);
     font-weight: 500;
     padding: 8px;
     margin: 0;
@@ -184,8 +184,8 @@ aio-contributor {
 
   p {
     cursor: pointer;
-    font-size: 14px;
-    line-height: 18px;
+    @include font-size(14);
+    @include line-height(18);
     margin: 8px 16px;
     text-overflow: ellipsis;
     overflow-y: auto;
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
index 7b9e46cae8..c14e4f2f40 100644
--- a/aio/src/styles/2-modules/_details.scss
+++ b/aio/src/styles/2-modules/_details.scss
@@ -14,7 +14,7 @@
 
 summary {
   cursor: pointer;
-  font-size: 16px;
+  @include font-size(16);
   position: relative;
   padding: 16px 24px;
   color: $black;
diff --git a/aio/src/styles/2-modules/_edit-page-cta.scss b/aio/src/styles/2-modules/_edit-page-cta.scss
index 54aeb1c5f7..21fa5e581b 100644
--- a/aio/src/styles/2-modules/_edit-page-cta.scss
+++ b/aio/src/styles/2-modules/_edit-page-cta.scss
@@ -1,10 +1,10 @@
 .edit-page-cta {
     font-weight: 400;
-    font-size: 14px;
+    @include font-size(14);
     color: $blue;
     text-align: right;
     margin-right: 32px;
     display: block;
     position: absolute;
     right: 0;
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss
index ffe8f92e27..b7e44e00a1 100644
--- a/aio/src/styles/2-modules/_features.scss
+++ b/aio/src/styles/2-modules/_features.scss
@@ -12,7 +12,7 @@
   }
 
   .feature-title {
-    font-size: 16px;
+    @include font-size(16);
     font-weight: 500;
     margin: 8px 0px;
     clear: both;
@@ -28,11 +28,11 @@
 
     .feature {
       max-width: 300px;
-      margin: 0 16px;  
-      
+      margin: 0 16px;
+
       @media (max-width: 768px) {
         max-width: 100%;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
index 224a21f837..2f8251d029 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -8,8 +8,8 @@
   .file {
     display: block;
     font-family: $main-font;
-    letter-spacing: 0.3px;
-    line-height: 32px;
+    @include letter-spacing(0.3);
+    @include line-height(32);
     color: $darkgray;
   }
 
diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/_label.scss
index 1036376355..8efca2d6e5 100644
--- a/aio/src/styles/2-modules/_label.scss
+++ b/aio/src/styles/2-modules/_label.scss
@@ -2,7 +2,7 @@ label.raised, .api-header label {
     border-radius: 4px;
     padding: 4px 16px;
     display: inline;
-    font-size: 14px;
+    @include font-size(14);
     color: $white;
     margin-right: 8px;
     font-weight: 500;
@@ -29,8 +29,8 @@ label.raised, .api-header label {
     }
 
     &.property-type-label {
-        font-size: 12px;
-        background-color: $darkgray;
+      @include font-size(12);
+      background-color: $darkgray;
         color: $white;
         text-transform: none;
     }
@@ -40,7 +40,7 @@ label.raised, .api-header label {
 
     // The API badges should be a little smaller
     padding: 2px 10px;
-    font-size: 12px;
+    @include font-size(12);
 
     @media screen and (max-width: 600px) {
         margin: 4px 0;
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
index 35121b27d9..8f0d1181a1 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -57,7 +57,7 @@ aio-notification {
       border-radius: 15px;
       text-transform: uppercase;
       padding: 0 10px;
-      font-size: 12px;
+      @include font-size(12);
       @media (max-width: 780px) {
         display: none;
       }
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
index f0a18d1e90..e1ca288c8b 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -16,8 +16,8 @@
   display: block;
   overflow: hidden;
   visibility: hidden;
-  font-size: 0;
-  line-height: 0;
+  @include font-size(0);
+  @include line-height(0);
   width: 0;
   height: 0;
 }
@@ -60,8 +60,8 @@
     display: block;
     overflow: hidden;
     visibility: hidden;
-    font-size: 0;
-    line-height: 0;
+    @include font-size(0);
+    @include line-height(0);
     width: 0;
     height: 0;
   }
@@ -79,8 +79,8 @@
     display: block;
     overflow: hidden;
     visibility: hidden;
-    font-size: 0;
-    line-height: 0;
+    @include font-size(0);
+    @include line-height(0);
     width: 0;
     height: 0;
   }
@@ -101,7 +101,7 @@ aio-resource-list {
   .c-resource {
     h4 {
       margin: 0;
-      line-height: 24px;
+      @include line-height(24);
     }
 
     p {
@@ -131,6 +131,7 @@ aio-resource-list {
         margin: 2px 0;
         padding: 3px 14px;
         font-size: 18px !important;
+        font-size: 1.8rem !important;
 
         &:hover {
           background: #edf0f2;
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
index 210fab6ebb..ab49f1d1c0 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -54,7 +54,7 @@ aio-search-results.embedded .search-results {
     height: 100%;
 
     .search-section-header {
-        font-size: 16px;
+        @include font-size(16);
         font-weight: 400;
         margin: 10px 0px 5px;
         text-transform: uppercase;
@@ -71,7 +71,7 @@ aio-search-results.embedded .search-results {
     }
 
     a {
-        font-size: 14px;
+        @include font-size(14);
         color: $lightgray;
         text-decoration: none;
         font-weight: normal;
diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss
index bf512414d9..bc2c991c76 100644
--- a/aio/src/styles/2-modules/_select-menu.scss
+++ b/aio/src/styles/2-modules/_select-menu.scss
@@ -10,10 +10,10 @@
   box-sizing: border-box;
   border: 1px solid $white;
   color: $blue-grey-600;
-  font-size: 12px;
+  @include font-size(12);
   font-weight: 400;
   height: 32px;
-  line-height: 32px;
+  @include line-height(32);
   outline: none;
   padding: 0 16px;
   text-align: left;
@@ -51,8 +51,8 @@
 
   li {
     cursor: pointer;
-    font-size: 14px;
-    line-height: 32px;
+    @include font-size(14);
+    @include line-height(32);
     margin: 0;
     padding: 0 16px 0 40px;
     position: relative;
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
index 495a10be63..147e06ed03 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/_table.scss
@@ -25,12 +25,12 @@ table {
       background: rgba($lightgray, 0.2);
       border-bottom: 1px solid $lightgray;
       color: $darkgray;
-      font-size: 12px;
+      @include font-size(12);
       font-weight: 500;
       padding: 8px 24px;
       text-align: left;
       text-transform: uppercase;
-      line-height: 28px;
+      @include line-height(28);
     }
   }
 
@@ -40,7 +40,7 @@ table {
       border-bottom: 1px solid $lightgray;
       padding: 16px;
       text-align: left;
-      line-height: 24px;
+      @include line-height(24);
       vertical-align: top;
 
       @media (max-width: 480px) {
@@ -53,7 +53,7 @@ table {
     }
 
     td {
-      letter-spacing: 0.30px;
+      @include letter-spacing(0.3);
 
       tr td:first-child {
         @media (max-width: 480px) {
@@ -112,4 +112,4 @@ table {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 099f6ac823..f18b5d8acc 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -23,13 +23,13 @@ aio-toc.embedded {
 }
 
 .toc-inner {
-  font-size: 13px;
+  @include font-size(13);
   overflow-y: visible;
   padding: 4px 0 0 10px;
 
   .toc-heading,
   .toc-list .h1 {
-    font-size: 115%;
+    @include font-size(16);
   }
 
   .toc-heading {
@@ -117,8 +117,8 @@ aio-toc.embedded {
 
     li {
       box-sizing: border-box;
-      font-size: 12px;
-      line-height: 16px;
+      @include font-size(12);
+      @include line-height(16);
       padding: 3px 0 3px 12px;
       position: relative;
       transition: all 0.3s ease-in-out;
@@ -140,7 +140,7 @@ aio-toc.embedded {
       a {
         color: lighten($darkgray, 10);
         overflow: visible;
-        font-size: 12px;
+        @include font-size(12);
         display: table-cell;
       }
 
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index a265208ffd..8b0d5f957c 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -40,6 +40,22 @@
   }
 }
 
+// REM Font Adjustments
+@mixin font-size($sizeValue) {
+  font-size: ($sizeValue) + px;
+  font-size: ($sizeValue / 10) + rem;
+}
+
+@mixin letter-spacing($spacingValue) {
+  letter-spacing: ($spacingValue) + px;
+  letter-spacing: ($spacingValue / 10) + rem;
+}
+
+@mixin line-height($heightValue) {
+  line-height: ($heightValue) + px;
+  line-height: ($heightValue / 10) + rem;
+}
+
 @mixin rotate($degrees) {
   -moz-transform: rotate($degrees);
   -webkit-transform: rotate($degrees);
@@ -72,4 +88,4 @@
     box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
     text-decoration: none;
   }
-}
\ No newline at end of file
+}