diff --git a/assets/styles/base/_page.scss b/assets/styles/base/_page.scss
index f6c27a9..d6c5a4d 100644
--- a/assets/styles/base/_page.scss
+++ b/assets/styles/base/_page.scss
@@ -17,9 +17,36 @@ html {
     overflow-y: scroll; /* [2] */
     min-height: 100%; /* [3] */
     color: $color;
-    font-size: em($font-size, 16px); /* [1] */
     font-family: $font-family;
     line-height: $line-height; /* [1] */
+
+    @media (max-width: $to-small) {
+        font-size: em(12px);
+    }
+
+    @media (min-width: $from-small) and (max-width: $to-medium) {
+        font-size: em(13px);
+    }
+
+    @media (min-width: $from-medium) and (max-width: $to-large) {
+        font-size: em(14px);
+    }
+
+    @media (min-width: $from-large) and (max-width: $to-huge) {
+        font-size: em($font-size); /* [1] */
+    }
+
+    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
+        font-size: em(18px);
+    }
+
+    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
+        font-size: em(21px);
+    }
+
+    @media (min-width: $from-colossal) {
+        font-size: em(24px);
+    }
 }
 
 ::selection {
diff --git a/assets/styles/settings/_config.scss b/assets/styles/settings/_config.scss
index a3183af..154437a 100644
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -52,15 +52,21 @@ $padding:         $unit;
 
 // Breakpoints
 // =============================================================================
-$from-tiny:   500px             !default;
-$to-tiny:     $from-tiny - 1    !default;
-$from-small:  700px             !default;
-$to-small:    $from-small - 1   !default;
-$from-medium: 1000px            !default;
-$to-medium:   $from-medium - 1  !default;
-$from-large:  1200px            !default;
-$to-large:    $from-large - 1   !default;
-$from-big:    1400px            !default;
-$to-big:      $from-big - 1     !default;
-$from-huge:   1600px            !default;
-$to-huge:     $from-huge - 1    !default;
+$from-tiny:     500px              !default;
+$to-tiny:       $from-tiny - 1     !default;
+$from-small:    700px              !default;
+$to-small:      $from-small - 1    !default;
+$from-medium:   1000px             !default;
+$to-medium:     $from-medium - 1   !default;
+$from-large:    1200px             !default;
+$to-large:      $from-large - 1    !default;
+$from-big:      1400px             !default;
+$to-big:        $from-big - 1      !default;
+$from-huge:     1600px             !default;
+$to-huge:       $from-huge - 1     !default;
+$from-enormous: 1800px             !default;
+$to-enormous:   $from-enormous - 1 !default;
+$from-gigantic: 2000px             !default;
+$to-gigantic:   $from-gigantic - 1 !default;
+$from-colossal: 2400px             !default;
+$to-colossal:   $from-colossal - 1 !default;