diff --git a/source/00-config/mixins/display-text.css b/source/00-config/mixins/display-text.css
index 00b69a05..2280974c 100644
--- a/source/00-config/mixins/display-text.css
+++ b/source/00-config/mixins/display-text.css
@@ -1,7 +1,7 @@
 @mixin display-text-display {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-10);
+  font-size: var(--responsive-font-size-15);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
@@ -9,7 +9,7 @@
 @mixin display-h1 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-8);
+  font-size: var(--responsive-font-size-12);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
@@ -17,7 +17,7 @@
 @mixin display-h2 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-7);
+  font-size: var(--responsive-font-size-10);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
@@ -25,7 +25,7 @@
 @mixin display-h3 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-6);
+  font-size: var(--responsive-font-size-8);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
@@ -33,7 +33,7 @@
 @mixin display-h4 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-5);
+  font-size: var(--responsive-font-size-7);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-base);
 }
@@ -59,7 +59,7 @@
 @mixin display-blockquote {
   color: var(--text-link);
   font-family: var(--font-family-primary);
-  font-size: var(--font-size-5);
+  font-size: var(--font-size-7);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
 }
@@ -75,7 +75,7 @@
 @mixin display-body-large {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--font-size-4);
+  font-size: var(--font-size-5);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
 }
diff --git a/source/00-config/vars/typography.css b/source/00-config/vars/typography.css
index cc26913e..b6224e06 100644
--- a/source/00-config/vars/typography.css
+++ b/source/00-config/vars/typography.css
@@ -10,24 +10,36 @@
   --font-size-1: rem(12px);
   --font-size-2: rem(14px);
   --font-size-3: rem(16px);
-  --font-size-4: rem(20px);
-  --font-size-5: rem(25px);
-  --font-size-6: rem(31.25px);
-  --font-size-7: rem(39.06625px);
-  --font-size-8: rem(48.8281px);
-  --font-size-9: rem(61.0352px);
-  --font-size-10: rem(76.2939px);
+  --font-size-4: rem(18px);
+  --font-size-5: rem(21px);
+  --font-size-6: rem(23px);
+  --font-size-7: rem(26px);
+  --font-size-8: rem(30px);
+  --font-size-9: rem(34px);
+  --font-size-10: rem(39px);
+  --font-size-11: rem(44px);
+  --font-size-12: rem(50px);
+  --font-size-13: rem(56px);
+  --font-size-14: rem(64px);
+  --font-size-15: rem(72px);
 
+  /* The max value should never be more than 2.5 times the min value.
+    https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/ */
   --responsive-font-size-1: responsive-font-size(12px 12px);
   --responsive-font-size-2: responsive-font-size(14px 14px);
   --responsive-font-size-3: responsive-font-size(16px 16px);
-  --responsive-font-size-4: responsive-font-size(18px 20px);
-  --responsive-font-size-5: responsive-font-size(20.25px 25px);
-  --responsive-font-size-6: responsive-font-size(22.7813px 31.25px);
-  --responsive-font-size-7: responsive-font-size(25.6289px 39.0625px);
-  --responsive-font-size-8: responsive-font-size(28.8325px 48.8281px);
-  --responsive-font-size-9: responsive-font-size(32.4366px 61.0352px);
-  --responsive-font-size-10: responsive-font-size(36.4912px 76.2939px);
+  --responsive-font-size-4: responsive-font-size(17px 18px);
+  --responsive-font-size-5: responsive-font-size(19px 21px);
+  --responsive-font-size-6: responsive-font-size(21px 23px);
+  --responsive-font-size-7: responsive-font-size(23px 26px);
+  --responsive-font-size-8: responsive-font-size(26px 30px);
+  --responsive-font-size-9: responsive-font-size(28px 34px);
+  --responsive-font-size-10: responsive-font-size(31px 39px);
+  --responsive-font-size-11: responsive-font-size(34px 44px);
+  --responsive-font-size-12: responsive-font-size(38px 50px);
+  --responsive-font-size-13: responsive-font-size(41px 56px);
+  --responsive-font-size-14: responsive-font-size(46px 64px);
+  --responsive-font-size-15: responsive-font-size(50px 72px);
 
   --font-weight-light: 300;
   --font-weight-regular: 400;
diff --git a/source/03-components/Button/button.module.css b/source/03-components/Button/button.module.css
index 6e9ea944..4f4c8ec4 100644
--- a/source/03-components/Button/button.module.css
+++ b/source/03-components/Button/button.module.css
@@ -28,7 +28,7 @@
   }
 
   .button--large {
-    --button-font-size: var(--font-size-4);
+    --button-font-size: var(--font-size-5);
 
     padding: var(--spacing-2) var(--spacing-5);
   }
diff --git a/source/03-components/Card/card.module.css b/source/03-components/Card/card.module.css
index 165880d3..657ef43e 100644
--- a/source/03-components/Card/card.module.css
+++ b/source/03-components/Card/card.module.css
@@ -17,7 +17,7 @@
   .title {
     @include set-link-vars(var(--text-on-light), var(--ui-text-dark));
 
-    font-size: var(--font-size-5);
+    font-size: var(--font-size-7);
     margin: 0;
   }
 
@@ -77,7 +77,7 @@
       flex-direction: row;
 
       & .title {
-        font-size: var(--font-size-6);
+        font-size: var(--font-size-8);
       }
 
       & .body {
diff --git a/source/03-components/HeroBgImage/hero-bg-image.module.css b/source/03-components/HeroBgImage/hero-bg-image.module.css
index 098553bf..475c4d08 100644
--- a/source/03-components/HeroBgImage/hero-bg-image.module.css
+++ b/source/03-components/HeroBgImage/hero-bg-image.module.css
@@ -41,7 +41,7 @@
     margin-block-end: var(--spacing-5);
 
     @media (--desktop-max) {
-      font-size: var(--font-size-8);
+      font-size: var(--font-size-12);
       margin-block-end: var(--spacing-3);
     }
   }
diff --git a/source/03-components/HeroInlineImage/hero-inline-image.module.css b/source/03-components/HeroInlineImage/hero-inline-image.module.css
index d11cc2bf..e14a2237 100644
--- a/source/03-components/HeroInlineImage/hero-inline-image.module.css
+++ b/source/03-components/HeroInlineImage/hero-inline-image.module.css
@@ -58,7 +58,7 @@
     }
 
     @media (--desktop-max) {
-      font-size: var(--font-size-8);
+      font-size: var(--font-size-12);
     }
   }
 
diff --git a/source/03-components/Menu/OverlayMenu/overlay-menu.module.css b/source/03-components/Menu/OverlayMenu/overlay-menu.module.css
index 01dbe50c..9a3ac23b 100644
--- a/source/03-components/Menu/OverlayMenu/overlay-menu.module.css
+++ b/source/03-components/Menu/OverlayMenu/overlay-menu.module.css
@@ -23,7 +23,7 @@
     block-size: calc(100% - 55px);
     display: flex;
     flex-flow: column nowrap;
-    font-size: var(--font-size-6);
+    font-size: var(--font-size-8);
     inline-size: 100%;
     justify-content: center;
   }