diff --git a/fonts/_config.fonts.scss b/fonts/_config.fonts.scss
deleted file mode 100644
index fe53fa2bbe..0000000000
--- a/fonts/_config.fonts.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-$font-family-light:   'proxima_novalight', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-$font-family-regular: 'proxima_nova_rgregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-$font-family-heading: 'code_pro_bold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-$font-family-heading-light: 'code_pro_regular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-$font-family-icons:   'Font Awesome 6 Free';
-$font-family-brands:  'Font Awesome 6 Brands';
-
-// Font awesome
-$fa-path: '../fonts/fontawesome-free-6.0.0-web' !default;
-$fa-font-path: $fa-path + '/webfonts' !default;
-$fa-css-prefix: 'icon';
-
-@import '../fonts/fontawesome-free-6.0.0-web/scss/fontawesome';
-@import '../fonts/fontawesome-free-6.0.0-web/scss/regular';
-@import '../fonts/fontawesome-free-6.0.0-web/scss/solid';
-@import '../fonts/fontawesome-free-6.0.0-web/scss/brands';
-@import '../fonts/fontawesome-free-6.0.0-web/scss/v4-shims';
-
-@font-face {
-  font-family: 'proxima_novalight';
-  src: url($font-path + 'proxima_nova/proximanova-light.woff2') format('woff2'),
-       url($font-path + 'proxima_nova/proximanova-light.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'proxima_nova_rgregular';
-  src: url($font-path + 'proxima_nova/proximanova-regular.woff2') format('woff2'),
-       url($font-path + 'proxima_nova/proximanova-regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'code_pro_bold';
-  src: url($font-path + 'code_pro/code_pro_bold_lc-webfont.woff2') format('woff2'),
-       url($font-path + 'code_pro/code_pro_bold_lc-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'code_pro_regular';
-  src: url($font-path + 'code_pro/code_pro_lc-webfont.woff2') format('woff2'),
-       url($font-path + 'code_pro/code_pro_lc-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/js/NavMainComponent.js b/js/NavMainComponent.js
index 4bc6c93516..5cd01762cb 100644
--- a/js/NavMainComponent.js
+++ b/js/NavMainComponent.js
@@ -54,9 +54,11 @@ NavMainComponent.prototype.init = function () {
     // Open navigation on mobile
     component.$mobileMenuButton.on('click', function(event) {
         var $self = $(this);
+        var $menuExpanded = $self.attr('aria-expanded');
+    
         event.stopImmediatePropagation();
 
-        if ($self.text() === 'Menu') {
+        if ($menuExpanded === 'false') {
             component.showMobileNav(true);
         } else {
             component.showMobileNav(false);
@@ -368,7 +370,6 @@ NavMainComponent.prototype.showMobileNav = function (show) {
         component.$body.removeClass('open-nav');
         component.$mobileMenuButton
             .removeClass('open')
-            .text('Menu')
             .attr('aria-expanded', 'false');
         component.$brandingLink.attr('tabindex', '-1');
         component.$primaryNavLinks.attr('tabindex', '-1');
@@ -384,7 +385,6 @@ NavMainComponent.prototype.showMobileNav = function (show) {
     component.$body.addClass('open-nav');
     component.$mobileMenuButton
         .addClass('open')
-        .text('Close')
         .attr('aria-expanded', 'true');
     component.$brandingLink.attr('tabindex', '3');
     component.$primaryNavLinks.attr('tabindex', '3');
diff --git a/stylesheets/_component.badges.scss b/stylesheets/_component.badges.scss
index 75412dd9cf..6a901beed2 100644
--- a/stylesheets/_component.badges.scss
+++ b/stylesheets/_component.badges.scss
@@ -39,7 +39,7 @@
 
     .badge {
         color: color(white) !important;
-        font-size: 12px;
+        font-size: $font-size-medium;
         margin-bottom: -1px;
         margin-top: -1px;
         min-width: 20px;
diff --git a/stylesheets/_component.buttons.scss b/stylesheets/_component.buttons.scss
index 7084275f5b..19af2e5eaf 100644
--- a/stylesheets/_component.buttons.scss
+++ b/stylesheets/_component.buttons.scss
@@ -56,7 +56,7 @@
 
     .icon,
     [class*=icon-] {
-        font-size: 14px;
+        font-size: $font-size-medium;
     }
 }
 
diff --git a/stylesheets/_component.colorpicker.scss b/stylesheets/_component.colorpicker.scss
index 245592cde8..5b5c7b1f88 100644
--- a/stylesheets/_component.colorpicker.scss
+++ b/stylesheets/_component.colorpicker.scss
@@ -86,7 +86,7 @@
 }
 
 .sp-container {
-    font-size: 14px;
+    font-size: $font-size-medium;
     padding: 5px 0;
     margin: 0;
     background-color: #fff;
@@ -110,7 +110,7 @@
 }
 
 .sp-cancel {
-    font-size: 14px;
+    font-size: $font-size-medium;
 }
 
 .sp-container button,
@@ -129,7 +129,7 @@
         color: color(text);
         cursor: pointer;
         display: inline-block;
-        font-size: 14px;
+        font-size: $font-size-medium;
         font-weight: normal;
         line-height: normal;
         margin: 0;
diff --git a/stylesheets/_component.datatables.scss b/stylesheets/_component.datatables.scss
index ae220d38ba..39f90c9a55 100644
--- a/stylesheets/_component.datatables.scss
+++ b/stylesheets/_component.datatables.scss
@@ -249,7 +249,7 @@ th.sorting_disabled:hover {
 
 .dataTables_actions {
     position: absolute;
-    font-size: 14px;
+    font-size: $font-size-medium;
     left: 24px;
     top: 62px;
     z-index: 1;
diff --git a/stylesheets/_component.datepicker.scss b/stylesheets/_component.datepicker.scss
index ba37918392..5345066d1e 100644
--- a/stylesheets/_component.datepicker.scss
+++ b/stylesheets/_component.datepicker.scss
@@ -45,7 +45,7 @@
     overflow: hidden;
     margin: 0;
     padding: 5px 3px;
-    font-size: 14px;
+    font-size: $font-size-medium;
     line-height: 20px;
     font-weight: bold;
     background-color: #fff;
@@ -155,7 +155,7 @@
 
 .pika-table th {
     color: #999;
-    font-size: 12px;
+    font-size: $font-size-small;
     line-height: 25px;
     font-weight: bold;
     text-align: center;
@@ -170,7 +170,7 @@
     width: 100%;
     padding: 5px;
     color: #666;
-    font-size: 12px;
+    font-size: $font-size-small;
     line-height: 15px;
     text-align: right;
     background: #f5f5f5;
diff --git a/stylesheets/_component.daterange.scss b/stylesheets/_component.daterange.scss
index 08f925b4f8..98d3a9817e 100644
--- a/stylesheets/_component.daterange.scss
+++ b/stylesheets/_component.daterange.scss
@@ -60,7 +60,7 @@
 .daterangepicker .calendar th,
 .daterangepicker .calendar td {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 12px;
+    font-size: $font-size-small;
     min-width: 32px;
     text-align: center;
     white-space: nowrap;
@@ -69,7 +69,7 @@
 .daterangepicker .ranges label {
     color: color(gray, darker);
     display: block;
-    font-size: 11px;
+    font-size: $font-size-small;
     font-weight: normal;
     height: 20px;
     line-height: 20px;
@@ -81,7 +81,7 @@
 }
 
 .daterangepicker .ranges input {
-    font-size: 11px;
+    font-size: $font-size-small;
 }
 
 .daterangepicker .ranges .input-mini {
@@ -90,7 +90,7 @@
     border: 1px solid color(gray, lightest);
     color: color(gray, darker);
     display: block;
-    font-size: 11px;
+    font-size: $font-size-small;
     height: 30px;
     line-height: 30px;
     margin: 0 0 10px;
@@ -111,7 +111,7 @@
     border: 1px solid color(gray, off-white);
     color: color(primary, dark);
     cursor: pointer;
-    font-size: 13px;
+    font-size: $font-size-medium;
     margin-bottom: 8px;
     padding: 3px 12px;
 }
@@ -149,7 +149,7 @@
 
 // scss-lint:disable SelectorFormat
 .daterangepicker .daterangepicker_input i {
-    font-size: 14px;
+    font-size: $font-size-medium;
     position: absolute;
     left: 8px;
     top: 8px;
@@ -160,7 +160,7 @@
     border: 1px solid color(gray, lightest);
     border-radius: $border-radius;
     color: color(gray, darker);
-    font-size: 14px;
+    font-size: $font-size-medium;
     height: 30px;
     line-height: 30px;
     display: block;
@@ -241,7 +241,7 @@
 .daterangepicker select.monthselect,
 .daterangepicker select.yearselect {
     cursor: default;
-    font-size: 12px;
+    font-size: $font-size-small;
     height: auto;
     margin: 0;
     padding: 1px;
diff --git a/stylesheets/_component.filterbar.scss b/stylesheets/_component.filterbar.scss
index 8198e03788..cc3c15d110 100644
--- a/stylesheets/_component.filterbar.scss
+++ b/stylesheets/_component.filterbar.scss
@@ -68,14 +68,14 @@
     .legend {
         border: 0;
         display: block;
-        font-size: 16px;
+        font-size: $font-size-base;
         padding-right: $padding-base;
 
         @include respond-min($screen-tablet) {
             border: 0;
             display: table-cell;
             float: left;
-            font-size: 16px;
+            font-size: $font-size-base;
             height: 100%;
             line-height: 38px;
             margin-bottom: 0;
diff --git a/stylesheets/_component.modals.scss b/stylesheets/_component.modals.scss
index d452572f9e..03216eace0 100644
--- a/stylesheets/_component.modals.scss
+++ b/stylesheets/_component.modals.scss
@@ -171,7 +171,7 @@
     }
 
     .form-v2 legend {
-        font-size: 20px;
+        font-size: $epsilon;
         margin-left: 0;
 
         &::before {
@@ -216,7 +216,7 @@
     .modal__header {
         border-bottom: 1px solid color(gray, lightest);
         display: flex;
-        font-size: 16px;
+        font-size: $font-size-base;
         height: 60px;
         padding: 0;
     }
@@ -308,7 +308,7 @@
 
         .modal__title-meta {
             color: color(text, help);
-            font-size: 14px;
+            font-size: $font-size-medium;
             margin-bottom: 0;
         }
 
diff --git a/stylesheets/_component.navigation.scss b/stylesheets/_component.navigation.scss
index cebce4084c..1a68f58dc4 100644
--- a/stylesheets/_component.navigation.scss
+++ b/stylesheets/_component.navigation.scss
@@ -135,7 +135,7 @@
     }
 
     .popover {
-        font-size: 14px;
+        font-size: $font-size-medium;
         padding: 5px 0;
         margin: 0;
         list-style: none;
diff --git a/stylesheets/_component.notifications.scss b/stylesheets/_component.notifications.scss
index e27cdca1d1..33df422b8a 100644
--- a/stylesheets/_component.notifications.scss
+++ b/stylesheets/_component.notifications.scss
@@ -102,7 +102,7 @@
     display: inline-block;
     line-height: 1.2em;
     margin-bottom: 0;
-    font-size: 20px;
+    font-size: $epsilon;
 }
 
 .notifications-dismiss {
diff --git a/stylesheets/_component.piano.scss b/stylesheets/_component.piano.scss
index 26114d89f8..9f87e4c51a 100644
--- a/stylesheets/_component.piano.scss
+++ b/stylesheets/_component.piano.scss
@@ -187,7 +187,7 @@ $piano-bg: #fafafa;
 .piano__time {
     clear: both;
     display: block;
-    font-size: 14px;
+    font-size: $font-size-medium;
 }
 
 .piano__form {
@@ -197,7 +197,7 @@ $piano-bg: #fafafa;
 }
 
 .piano__item-toggle {
-    font-size: 20px;
+    font-size: $epsilon;
     position: absolute;
     right: 20px;
     text-decoration: none;
diff --git a/stylesheets/_component.ribbon.scss b/stylesheets/_component.ribbon.scss
index 9a31af417f..7716379a8c 100644
--- a/stylesheets/_component.ribbon.scss
+++ b/stylesheets/_component.ribbon.scss
@@ -16,7 +16,7 @@
     border-bottom: 1px solid #ccc;
     border-top: 1px solid #ccc;
     color: #000;
-    font-size: 14px;
+    font-size: $font-size-medium;
     padding: 0 $gutter-width;
     position: relative;
     width: 100%;
@@ -26,7 +26,7 @@
 
 .ribbon__mobile-toggle {
     color: #000;
-    font-size: 28px;
+    font-size: $gamma;
     position: absolute;
     right: 10px;
     text-decoration: none;
diff --git a/stylesheets/_component.rules.scss b/stylesheets/_component.rules.scss
index 9a188bb89a..946c790326 100644
--- a/stylesheets/_component.rules.scss
+++ b/stylesheets/_component.rules.scss
@@ -144,7 +144,7 @@
 }
 
 .rule-block__heading__icon {
-    font-size: 16px;
+    font-size: $font-size-base;
     margin-left: 10px;
 }
 
@@ -230,7 +230,7 @@
         content: '\f061';
         font-family: $font-family-icons;
         font-weight: 900;
-        font-size: 19px;
+        font-size: $font-size-large;
         left: 0;
         position: absolute;
         top: 17px;
@@ -408,7 +408,7 @@ td.table__form .rules + .form__group:last-of-type {
             content: '\f061';
             font-family: $font-family-icons;
             font-weight: 900;
-            font-size: 19px;
+            font-size: $font-size-large;
             left: 0;
             position: absolute;
             top: 17px;
diff --git a/stylesheets/_component.search.scss b/stylesheets/_component.search.scss
index 20248f0fa2..199df36075 100644
--- a/stylesheets/_component.search.scss
+++ b/stylesheets/_component.search.scss
@@ -75,10 +75,10 @@ input.main-search__field::-ms-clear {
     background: none;
     border: 0;
     color: #555;
-    padding: 1px 8px 0;
+    padding: 3px 8px;
     position: absolute;
     right: 0;
-    top: 8px;
+    top: 6px;
     z-index: 3;
 
     @include respond-min($screen-tablet) {
@@ -95,7 +95,7 @@ input.main-search__field::-ms-clear {
 .main-search__extras {
     background-color: #eee;
     display: block;
-    font-size: 14px;
+    font-size: $font-size-medium;
     padding: 5px 12px;
     text-align: left;
     text-transform: lowercase;
diff --git a/stylesheets/_component.select2.scss b/stylesheets/_component.select2.scss
index 7c7808c7ab..ef2c1d7cbd 100644
--- a/stylesheets/_component.select2.scss
+++ b/stylesheets/_component.select2.scss
@@ -307,7 +307,7 @@
     @include ie-lte(9) {
         color: color(black);
         float: none;
-        font-size: 18px;
+        font-size: $zeta;
         line-height: 20px;
         padding: 0 $padding-base;
     }
diff --git a/stylesheets/_component.timeline.scss b/stylesheets/_component.timeline.scss
index 674ef0b6a2..fcbbb3f4a2 100644
--- a/stylesheets/_component.timeline.scss
+++ b/stylesheets/_component.timeline.scss
@@ -76,16 +76,16 @@
 
     span {
         display: block;
-        font-size: 10px;
+        font-size: $micro;
         line-height: 2.1;
         text-align: center;
 
         @include respond-min($screen-phone) {
-            font-size: 13px;
+            font-size: $font-size-medium;
         }
 
         @include respond-min($screen-tablet) {
-            font-size: 20px;
+            font-size: $epsilon;
         }
     }
 
@@ -209,7 +209,7 @@
 
     &__date {
         display: block;
-        font-size: 14px;
+        font-size: $font-size-medium;
         margin-top: $padding-base;
 
         @include respond-min($screen-tablet) {
diff --git a/stylesheets/_component.toggle-switch.scss b/stylesheets/_component.toggle-switch.scss
index 02d8b66857..6ac7e7fffc 100644
--- a/stylesheets/_component.toggle-switch.scss
+++ b/stylesheets/_component.toggle-switch.scss
@@ -39,7 +39,7 @@
         width: 4em;
 
         &::after {
-            font-size: 32px;
+            font-size: $font-size-xxlarge;
             left: 15px;
             letter-spacing: 32px;
         }
diff --git a/stylesheets/_component.toolbar.scss b/stylesheets/_component.toolbar.scss
index 783d5189ac..ba7fd17957 100644
--- a/stylesheets/_component.toolbar.scss
+++ b/stylesheets/_component.toolbar.scss
@@ -34,11 +34,11 @@
     }
 
     [class*=icon-] {
-        font-size: 18px;
+        font-size: $font-size-large;
         vertical-align: middle;
 
         @include respond-min($screen-desktop) {
-            font-size: 14px;
+            font-size: $font-size-medium;
             vertical-align: baseline;
         }
     }
diff --git a/stylesheets/_config.variables.scss b/stylesheets/_config.variables.scss
index d12a67bc31..ca8ac6bb5d 100644
--- a/stylesheets/_config.variables.scss
+++ b/stylesheets/_config.variables.scss
@@ -17,16 +17,65 @@ $signin-gradient:                     url('../images/branding/central-gradient-l
 //  Typographic grid
 // -----------------------------------------------------------------------------
 
-$font-size-base:                      16px !default;
-$font-size-xxlarge:                   ceil($font-size-base * 2) !default;
-$font-size-xlarge:                    ceil($font-size-base * 1.5) !default;
-$font-size-large:                     18.66px !default; // Meet WCAG 2.1 criteria for 'large text'
-$font-size-medium:                    ceil($font-size-base * .85) !default;
-$font-size-small:                     ceil($font-size-base * .75) !default;
+//  Base Type Size
+// ================
+$base-font-size:                16px;
+
+//  Oversized Type Range
+// ======================
+$giga-px:                       80px;
+$giga:                          $giga-px / $base-font-size * 1rem;
+
+$mega-px:                       48px;
+$mega:                          $mega-px / $base-font-size * 1rem;
+
+$kilo-px:                       40px;
+$kilo:                          $kilo-px / $base-font-size * 1rem;
+
+//  Standard Type Range
+// =====================
+$alpha-px:                      36px;
+$alpha:                         $alpha-px / $base-font-size * 1rem;
+
+$beta-px:                       32px;
+$beta:                          $beta-px / $base-font-size * 1rem;
+
+$gamma-px:                      28px;
+$gamma:                         $gamma-px / $base-font-size * 1rem;
+
+$delta-px:                      24px;
+$delta:                         $delta-px / $base-font-size * 1rem;
+
+$epsilon-px:                    20px;
+$epsilon:                       $epsilon-px / $base-font-size * 1rem;
+
+$zeta-large-px:                 19px;
+$zeta-large:                    $zeta-large-px / $base-font-size * 1rem;
+
+$zeta-px:                       18px;
+$zeta:                          $zeta-px / $base-font-size * 1rem;
+
+$normalis-px:                   $base-font-size;
+$normalis:                      $normalis-px / $base-font-size * 1rem;
+
+//  Small Type Range
+// ==================
+$milli-px:                      14px;
+$milli:                         $milli-px / $base-font-size * 1rem;
+
+$micro-px:                      12px;
+$micro:                         $micro-px / $base-font-size * 1rem;
+
+$font-size-base:                      $normalis !default; // 16px
+$font-size-xxlarge:                   $beta !default; // 32px
+$font-size-xlarge:                    $delta !default; // 24px
+$font-size-large:                     $zeta-large !default; // Meet WCAG 2.1 criteria for 'large text'
+$font-size-medium:                    $milli !default; // 14px
+$font-size-small:                     $micro !default; // 12px
 
 $line-height-base:                    24px !default;
-$line-height-medium:                  ceil($line-height-base * 1.25) !default;
-$line-height-large:                   ceil($line-height-base * 2) !default;
+$line-height-medium:                  ceil($line-height-base * 1.25) !default; // 30px
+$line-height-large:                   ceil($line-height-base * 2) !default; // 48px
 $line-height-small:                   1.5 !default;
 $line-height-computed:                $line-height-base !default;
 
@@ -154,8 +203,8 @@ $input-height-base:                   $line-height-base * 2 !default;
   $input-height-base:                 $line-height-base * 1.2 !default;
 }
 
-$input-height-large:                  (floor($font-size-large * 2) + ($padding-large-vertical * 2) + 2) !default;
-$input-height-small:                  (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+$input-height-large:                  (floor($zeta-large-px * 2) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small:                  (floor($micro-px * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 
 $input-widths: (
     mini:    50px,
diff --git a/stylesheets/libraries/_library.colorpicker.scss b/stylesheets/libraries/_library.colorpicker.scss
index 2027d6732d..dcd205c181 100644
--- a/stylesheets/libraries/_library.colorpicker.scss
+++ b/stylesheets/libraries/_library.colorpicker.scss
@@ -312,7 +312,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     width: 100%;
 }
 .sp-input {
-   font-size: 12px !important;
+   font-size: $font-size-small !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 0;
@@ -470,7 +470,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   border-bottom: 1px solid #bbb;
   border-radius: 3px;
   color: #333;
-  font-size: 14px;
+  font-size: $font-size-medium;
   line-height: 1;
   padding: 5px 4px;
   text-align: center;
@@ -502,7 +502,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .sp-cancel {
-    font-size: 11px;
+    font-size: $font-size-small;
     color: #d93f3f !important;
     margin: 0;
     padding: 2px;
diff --git a/stylesheets/objects/_object.media.scss b/stylesheets/objects/_object.media.scss
index 966d752e75..6daa987012 100644
--- a/stylesheets/objects/_object.media.scss
+++ b/stylesheets/objects/_object.media.scss
@@ -25,7 +25,7 @@ a.media {
     width: 24px;
 
     &[class^=icon] {
-        font-size: 24px;
+        font-size: $font-size-xlarge;
     }
 }
 
diff --git a/views/pulsar/layouts/base.html.twig b/views/pulsar/layouts/base.html.twig
index d408fcfe6d..7591722af8 100644
--- a/views/pulsar/layouts/base.html.twig
+++ b/views/pulsar/layouts/base.html.twig
@@ -66,7 +66,7 @@
 
             <header class="toolbar">
 
-                <button class="mobile-menu-button t-mobile-menu-button" aria-expanded="false" aria-controls="aria-main-nav" aria-label="Toggle main menu">Menu</button>
+                <button class="mobile-menu-button t-mobile-menu-button" aria-expanded="false" aria-controls="aria-main-nav">Menu</button>
 
                 {% block search %}
                 <form action="/search" class="main-search" data-ui="search-box" role="search">