diff --git a/scss/_variables.scss b/scss/_variables.scss
index 228ec1ce0..5de3e32a6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -105,7 +105,7 @@ $avatar-sizes: (
   "xl": 6rem
 ) !default;
 
-$font-size-base: 1rem !default;
+$font-size-base: .9375rem !default;
 $font-weight-base: 400 !default;
 $line-height-base: 1.5 !default;
 
@@ -116,12 +116,14 @@ Typography
  */
 $headings-font-weight: 600 !default;
 
-$h1-font-size: $font-size-base * 1.25 * 1.25 * 1.25 !default;
-$h2-font-size: $font-size-base * 1.25 * 1.25 !default;
-$h3-font-size: $font-size-base * 1.25 !default;
+$small-font-size: 83.33333% !default;
+
+$h1-font-size: $font-size-base * 1.2 * 1.2 * 1.2 !default;
+$h2-font-size: $font-size-base * 1.2 * 1.2 !default;
+$h3-font-size: $font-size-base * 1.2 !default;
 $h4-font-size: $font-size-base !default;
-$h5-font-size: $font-size-base * .8 !default;
-$h6-font-size: $font-size-base * .8 * .8 !default;
+$h5-font-size: $font-size-base * .833333 !default;
+$h6-font-size: $font-size-base * .833333 * .83333 !default;
 
 /**
 Ribbons
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index 1b81177c7..0f2baa267 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -1,6 +1,11 @@
 // stylelint-disable property-no-vendor-prefix
 html {
   height: 100%;
+  font-size: 16px;
+
+  @include media-breakpoint-down(md) {
+    font-size: 15px;
+  }
 }
 
 body {
diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss
index 56f46753d..bcaba6fd0 100644
--- a/scss/layout/_page.scss
+++ b/scss/layout/_page.scss
@@ -8,7 +8,7 @@
 
 .page-title {
   margin: 0;
-  font-size: $h4-font-size;
+  font-size: $h3-font-size;
   font-weight: 400;
   line-height: 2.5rem;
 }
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index b410b02ea..cc1c38229 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -89,7 +89,7 @@
 
 .card-title {
   display: block;
-  font-size: $h4-font-size;
+  font-size: $h3-font-size;
   font-weight: 500;
   margin: 0 0 1.5rem;
   line-height: 1;