diff --git a/frontend/next.config.js b/frontend/next.config.js
index e35c796529..b131931502 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -120,7 +120,6 @@ module.exports = {
     silenceDeprecations: [
       // Issues we can fix in our code
       "import", // https://sass-lang.com/documentation/breaking-changes/import/
-      "mixed-decls", // https://sass-lang.com/d/mixed-decls
 
       // Upstream issues
       "legacy-js-api", // vercel/next.js issue #71638
diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss
index 086bc1e8cd..f34a5b6813 100644
--- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss
+++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .underlay {
   position: fixed;
@@ -64,13 +65,14 @@
 }
 
 .headline {
-  @include text-title-xs;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $spacing-sm 0;
-  gap: $spacing-sm;
-  font-weight: 100;
+  @include text-title-xs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-sm 0;
+    gap: $spacing-sm;
+    font-weight: 100;
+  }
 }
 
 .modal-title {
diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss
index 234d2ec4aa..f18bca1786 100644
--- a/frontend/src/components/dashboard/FreeOnboarding.module.scss
+++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .onboarding {
   display: flex;
@@ -176,14 +177,15 @@
 
     .domain-example {
       @include font-firefox;
-      @include text-title-2xs;
-      color: $color-light-gray-90;
-      display: inline-block;
-      padding: $spacing-md 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow-x: hidden;
-      max-width: $content-xs;
+      @include text-title-2xs {
+        color: $color-light-gray-90;
+        display: inline-block;
+        padding: $spacing-md 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-x: hidden;
+        max-width: $content-xs;
+      }
 
       @media screen and #{$mq-md} {
         max-width: 100%;
@@ -273,10 +275,11 @@
     gap: $spacing-xs;
 
     h1 {
-      @include text-title-sm;
-      font-weight: 700;
-      font-family: $font-stack-firefox;
-      color: $color-purple-50;
+      @include text-title-sm {
+        font-weight: 700;
+        font-family: $font-stack-firefox;
+        color: $color-purple-50;
+      }
     }
 
     p {
diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss
index 4061c54ab8..f9c694408c 100644
--- a/frontend/src/components/dashboard/Onboarding.module.scss
+++ b/frontend/src/components/dashboard/Onboarding.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .wrapper {
   padding: $spacing-lg;
@@ -7,9 +8,10 @@
   border: 1px solid $color-light-gray-40;
 
   h2 {
-    @include text-title-2xs;
-    @include font-firefox;
-    padding: $spacing-sm 0;
+    @include text-title-2xs {
+      @include font-firefox;
+      padding: $spacing-sm 0;
+    }
   }
 
   .steps {
diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss
index 84a0bf99e6..18621953d9 100644
--- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss
+++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .onboarding {
   display: flex;
@@ -44,10 +45,11 @@
   }
 
   h2 {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    color: $color-purple-50;
-    text-align: center;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      color: $color-purple-50;
+      text-align: center;
+    }
   }
 
   .lead {
@@ -133,14 +135,15 @@
 
     .domain-example {
       @include font-firefox;
-      @include text-title-2xs;
-      color: $color-light-gray-90;
-      display: inline-block;
-      padding: $spacing-md 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow-x: hidden;
-      max-width: $content-xs;
+      @include text-title-2xs {
+        color: $color-light-gray-90;
+        display: inline-block;
+        padding: $spacing-md 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-x: hidden;
+        max-width: $content-xs;
+      }
 
       @media screen and #{$mq-md} {
         max-width: 100%;
diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss
index d3bd1346a5..2315181346 100644
--- a/frontend/src/components/dashboard/SubdomainPicker.module.scss
+++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .card {
   border-radius: $border-radius-md;
@@ -62,8 +63,9 @@
     }
 
     h2 {
-      @include text-title-2xs;
-      padding: $spacing-sm 0;
+      @include text-title-2xs {
+        padding: $spacing-sm 0;
+      }
     }
 
     .lead {
diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss
index 09c909618f..bdfd214e58 100644
--- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss
+++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss
@@ -9,10 +9,6 @@ $trackLineHeight: 4px;
   // A CSS variable to enable different values depending on the screen size:
   --thumbDiameter: 32px;
 
-  @media screen and #{$mq-md} {
-    --thumbDiameter: 24px;
-  }
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -20,6 +16,10 @@ $trackLineHeight: 4px;
   padding: 0 $spacing-md;
   width: 100%;
 
+  @media screen and #{$mq-md} {
+    --thumbDiameter: 24px;
+  }
+
   @media screen and #{$mq-md} {
     flex-direction: row;
     gap: $spacing-xl;
diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss
index d87a4a51cd..e68e58aec2 100644
--- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss
+++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss
@@ -1,5 +1,6 @@
 @import "../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../styles/typography";
 
 .underlay {
   position: fixed;
@@ -51,11 +52,12 @@
         font-weight: 400;
 
         .subdomain {
-          @include text-title-xs;
-          display: block;
-          font-weight: 700;
-          margin-bottom: $spacing-sm;
-          padding: $spacing-sm 0;
+          @include text-title-xs {
+            display: block;
+            font-weight: 700;
+            margin-bottom: $spacing-sm;
+            padding: $spacing-sm 0;
+          }
 
           &::before {
             content: "@";
diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss
index 6e33464597..d621b0942e 100644
--- a/frontend/src/components/landing/BundleBanner.module.scss
+++ b/frontend/src/components/landing/BundleBanner.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .bundle-banner-wrapper {
   display: grid;
@@ -194,9 +195,10 @@
       }
 
       h2 {
-        @include text-title-sm;
-        @include font-firefox;
-        font-weight: 700;
+        @include text-title-sm {
+          @include font-firefox;
+          font-weight: 700;
+        }
 
         @media #{$mq-lg} {
           @include text-title-xs;
@@ -204,9 +206,10 @@
       }
 
       h3 {
-        @include text-title-xs;
-        @include font-firefox;
-        font-weight: 500;
+        @include text-title-xs {
+          @include font-firefox;
+          font-weight: 500;
+        }
 
         @media #{$mq-lg} {
           @include text-title-2xs;
diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss
index 13f700a7d4..339cb6edaa 100644
--- a/frontend/src/components/landing/HighlightedFeatures.module.scss
+++ b/frontend/src/components/landing/HighlightedFeatures.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .highlighted-feature-wrapper {
   display: flex;
@@ -64,9 +65,10 @@
 
   h2 {
     @include font-firefox;
-    @include text-title-sm;
-    justify-content: center;
-    width: 100%;
+    @include text-title-sm {
+      justify-content: center;
+      width: 100%;
+    }
   }
 
   .cta {
diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss
index 17572a11a4..288c6d0c1b 100644
--- a/frontend/src/components/landing/PlanMatrix.module.scss
+++ b/frontend/src/components/landing/PlanMatrix.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .wrapper {
   width: 100%;
@@ -9,17 +10,18 @@
   gap: $spacing-md;
 
   .bundle-offer-heading {
-    @include text-title-xs;
-    background-image: linear-gradient(
-      to right,
-      $color-violet-30,
-      $color-violet-80 20%,
-      $color-violet-30 80%
-    );
-    background-clip: text;
-    color: transparent;
-    text-align: center;
-    font-weight: 700;
+    @include text-title-xs {
+      background-image: linear-gradient(
+        to right,
+        $color-violet-30,
+        $color-violet-80 20%,
+        $color-violet-30 80%
+      );
+      background-clip: text;
+      color: transparent;
+      text-align: center;
+      font-weight: 700;
+    }
   }
   .bundle-offer-content {
     max-width: $content-md;
@@ -256,9 +258,10 @@ table.desktop {
       padding: $spacing-md;
 
       h3 {
-        @include text-title-2xs;
-        font-weight: 600;
-        text-align: center;
+        @include text-title-2xs {
+          font-weight: 600;
+          text-align: center;
+        }
       }
 
       &.recommended h3 {
diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss
index 02679fa87a..07b62cc539 100644
--- a/frontend/src/components/landing/Reviews.module.scss
+++ b/frontend/src/components/landing/Reviews.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .reviews {
   display: flex;
@@ -52,9 +53,10 @@
   }
 
   .logo-text {
-    @include text-title-xs;
-    font-weight: 600;
-    text-transform: uppercase;
+    @include text-title-xs {
+      font-weight: 600;
+      text-transform: uppercase;
+    }
   }
 }
 
@@ -75,9 +77,10 @@
 
   .rating {
     .title {
-      @include text-title-2xl;
-      font-family: $font-stack-firefox;
-      font-weight: 600;
+      @include text-title-2xl {
+        font-family: $font-stack-firefox;
+        font-weight: 600;
+      }
     }
 
     .text {
diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss
index b3c0ec5c13..aed9b5c719 100644
--- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss
+++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss
@@ -1,5 +1,6 @@
 @import "../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../styles/typography";
 
 .mobile-menu {
   width: 100%;
@@ -81,9 +82,10 @@
 .menu-item {
   display: flex;
 
-  @include text-display-xxs;
-  font-family: $font-stack-firefox;
-  border-bottom: 2px solid $color-light-gray-20;
+  @include text-display-xxs {
+    font-family: $font-stack-firefox;
+    border-bottom: 2px solid $color-light-gray-20;
+  }
 
   &.sign-up-menu-item {
     padding: $spacing-md;
diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss
index 6a40c6806c..abdc09b4b1 100644
--- a/frontend/src/components/layout/navigation/UserMenu.module.scss
+++ b/frontend/src/components/layout/navigation/UserMenu.module.scss
@@ -1,5 +1,6 @@
 @import "../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../styles/typography";
 
 .wrapper {
   align-items: center;
@@ -14,9 +15,10 @@
   color: white;
   overflow: hidden;
 
-  @include text-title-2xs;
-  padding: 0;
-  border-style: none;
+  @include text-title-2xs {
+    padding: 0;
+    border-style: none;
+  }
 }
 
 .popup {
diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss
index cb9c03fc77..cffc847d83 100644
--- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss
+++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss
@@ -1,5 +1,6 @@
 @import "../../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../../styles/typography";
 
 .wrapper {
   display: flex;
@@ -15,9 +16,10 @@
     padding: $spacing-lg 0;
 
     h2 {
-      @include text-title-2xs;
-      font-family: $font-stack-firefox;
-      padding-bottom: $spacing-sm;
+      @include text-title-2xs {
+        font-family: $font-stack-firefox;
+        padding-bottom: $spacing-sm;
+      }
     }
 
     .cta {
diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss
index 9591174877..9eefb3ad13 100644
--- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss
+++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss
@@ -1,5 +1,6 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "../../../styles/tokens";
+@import "../../../styles/typography";
 
 .main-wrapper {
   display: flex;
@@ -19,9 +20,10 @@
     text-align: center;
 
     h1 {
-      @include text-title-xs;
-      @include font-firefox;
-      font-weight: 600;
+      @include text-title-xs {
+        @include font-firefox;
+        font-weight: 600;
+      }
     }
   }
 
diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss
index a8de81b40e..33158ddba3 100644
--- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss
+++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss
@@ -1,5 +1,6 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "../../../styles/tokens";
+@import "../../../styles/typography";
 
 .wrapper {
   display: flex;
@@ -13,9 +14,10 @@
   overflow-x: hidden;
 
   h2 {
-    @include text-title-xs;
-    font-family: $font-stack-firefox;
-    text-align: center;
+    @include text-title-xs {
+      font-family: $font-stack-firefox;
+      text-align: center;
+    }
   }
 
   .lead {
@@ -117,10 +119,11 @@
         gap: $spacing-md;
 
         .price {
-          @include text-title-2xs;
-          padding-top: $spacing-sm;
-          display: block;
-          font-weight: 700;
+          @include text-title-2xs {
+            padding-top: $spacing-sm;
+            display: block;
+            font-weight: 700;
+          }
 
           > span {
             @include text-body-sm;
diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss
index a191d02efc..222fd75637 100644
--- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss
+++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss
@@ -1,6 +1,7 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
 @import "../../../styles/tokens";
+@import "../../../styles/typography";
 
 .step {
   flex: 1 0 auto;
@@ -20,9 +21,10 @@
   }
 
   h2 {
-    @include text-title-xs;
-    font-family: $font-stack-firefox;
-    text-align: center;
+    @include text-title-xs {
+      font-family: $font-stack-firefox;
+      text-align: center;
+    }
   }
 
   .lead {
@@ -86,10 +88,11 @@
     }
 
     span {
-      @include text-title-2xs;
-      padding-top: $spacing-sm;
-      display: block;
-      font-weight: 700;
+      @include text-title-2xs {
+        padding-top: $spacing-sm;
+        display: block;
+        font-weight: 700;
+      }
     }
   }
 }
diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss
index ca5951668c..374700509e 100644
--- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss
+++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss
@@ -1,6 +1,7 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
 @import "../../../styles/tokens";
+@import "../../../styles/typography";
 
 .step,
 .controls {
@@ -34,9 +35,10 @@
   }
 
   h2 {
-    @include text-title-xs;
-    font-family: $font-stack-firefox;
-    text-align: center;
+    @include text-title-xs {
+      font-family: $font-stack-firefox;
+      text-align: center;
+    }
   }
 
   .lead {
@@ -100,10 +102,11 @@
     }
 
     span {
-      @include text-title-2xs;
-      padding-top: $spacing-sm;
-      display: block;
-      font-weight: 700;
+      @include text-title-2xs {
+        padding-top: $spacing-sm;
+        display: block;
+        font-weight: 700;
+      }
     }
   }
 
diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss
index abb1796bc1..2d4cd7ec52 100644
--- a/frontend/src/components/waitlist/WaitlistPage.module.scss
+++ b/frontend/src/components/waitlist/WaitlistPage.module.scss
@@ -1,6 +1,7 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .wrapper {
   display: flex;
@@ -78,10 +79,11 @@
   }
 
   .heading {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    align-self: center;
-    text-align: center;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      align-self: center;
+      text-align: center;
+    }
   }
 
   .lead {
diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss
index eea9419873..3b4c2a2d85 100644
--- a/frontend/src/pages/accounts/profile.module.scss
+++ b/frontend/src/pages/accounts/profile.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography";
+@import "../../styles/typography";
 
 .header {
   background-color: $color-light-gray-05;
@@ -157,13 +158,14 @@
         }
 
         .value {
-          @include text-title-xs;
-          font-family: $font-stack-firefox;
-          font-weight: 700;
-          padding: $spacing-xs 0;
-          flex: 1 0 auto;
-          display: flex;
-          flex-direction: column;
+          @include text-title-xs {
+            font-family: $font-stack-firefox;
+            font-weight: 700;
+            padding: $spacing-xs 0;
+            flex: 1 0 auto;
+            display: flex;
+            flex-direction: column;
+          }
 
           .learn-more-wrapper {
             @include text-body-sm;
@@ -259,8 +261,9 @@
   }
 
   .upsell-banner-header {
-    @include text-title-md;
-    font-weight: 700;
+    @include text-title-md {
+      font-weight: 700;
+    }
   }
 
   .upsell-banner-description {
@@ -368,8 +371,9 @@
 
     h3 {
       @include font-mozilla;
-      @include text-title-xs;
-      font-weight: 500;
+      @include text-title-xs {
+        font-weight: 500;
+      }
 
       strong {
         font-weight: 700;
diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss
index 6346a9670a..636ff725e6 100644
--- a/frontend/src/pages/contains-tracker-warning.module.scss
+++ b/frontend/src/pages/contains-tracker-warning.module.scss
@@ -1,5 +1,6 @@
 @import "../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../styles/typography";
 
 .contains-tracker-container {
   margin: $layout-sm;
@@ -105,11 +106,12 @@
       }
 
       .headline {
-        @include text-title-xs;
-        font-family: $font-stack-firefox;
-        font-weight: 700;
-        padding: $spacing-md 0;
-        color: $color-violet-90;
+        @include text-title-xs {
+          font-family: $font-stack-firefox;
+          font-weight: 700;
+          padding: $spacing-md 0;
+          color: $color-violet-90;
+        }
 
         @media screen and #{$mq-md} {
           @include text-title-2xs;
diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss
index 76a76461d6..b0fd1c80f6 100644
--- a/frontend/src/pages/faq.module.scss
+++ b/frontend/src/pages/faq.module.scss
@@ -1,5 +1,6 @@
 @import "../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../styles/typography";
 
 .faq-page {
   background-color: $color-blue-90;
@@ -27,10 +28,10 @@
 }
 
 .headline {
-  @include text-title-sm;
-  @include font-firefox;
-
-  padding-bottom: $spacing-xl;
+  @include text-title-sm {
+    @include font-firefox;
+    padding-bottom: $spacing-xl;
+  }
 }
 
 .faqs {
@@ -49,10 +50,10 @@
   }
 
   .question {
-    @include text-title-2xs;
-    @include font-firefox;
-
-    padding-bottom: $spacing-sm;
+    @include text-title-2xs {
+      @include font-firefox;
+      padding-bottom: $spacing-sm;
+    }
   }
 
   .answer {
diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss
index cd80426535..e8c13a7dcc 100644
--- a/frontend/src/pages/index.module.scss
+++ b/frontend/src/pages/index.module.scss
@@ -1,5 +1,6 @@
 @import "../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../styles/typography";
 
 .hero {
   display: flex;
@@ -28,8 +29,9 @@
   }
 
   h2 {
-    @include text-title-md;
-    font-family: $font-stack-firefox;
+    @include text-title-md {
+      font-family: $font-stack-firefox;
+    }
   }
 
   p {
@@ -74,10 +76,11 @@
   padding: $spacing-lg;
 
   h2 {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    text-align: center;
-    margin-bottom: $layout-sm;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      text-align: center;
+      margin-bottom: $layout-sm;
+    }
   }
 
   h2,
@@ -196,9 +199,10 @@
     margin-top: $layout-xl;
 
     h2 {
-      @include text-title-sm;
-      font-family: $font-stack-firefox;
-      font-weight: 500;
+      @include text-title-sm {
+        font-family: $font-stack-firefox;
+        font-weight: 500;
+      }
     }
 
     .end-of-intro-pricing-countdown-and-warning {
@@ -245,10 +249,11 @@
     }
 
     .headline {
-      @include text-title-sm;
-      font-family: $font-stack-firefox;
-      font-weight: 500;
-      padding: $spacing-md 0;
+      @include text-title-sm {
+        font-family: $font-stack-firefox;
+        font-weight: 500;
+        padding: $spacing-md 0;
+      }
     }
 
     .read-more {
diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss
index f4b457ee36..da28f7a7f8 100644
--- a/frontend/src/pages/premium.module.scss
+++ b/frontend/src/pages/premium.module.scss
@@ -1,5 +1,6 @@
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "../styles/tokens";
+@import "../styles/typography";
 
 .hero {
   display: flex;
@@ -33,8 +34,9 @@
   }
 
   h2 {
-    @include text-title-md;
-    font-family: $font-stack-firefox;
+    @include text-title-md {
+      font-family: $font-stack-firefox;
+    }
   }
 
   .social-proof {
@@ -78,10 +80,11 @@
   padding: $spacing-2xl $spacing-xl;
 
   h2 {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    text-align: center;
-    padding: $spacing-md 0;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      text-align: center;
+      padding: $spacing-md 0;
+    }
   }
 
   .lead {
@@ -115,9 +118,10 @@
     }
 
     h3 {
-      @include text-title-xs;
-      font-family: $font-stack-firefox;
-      padding: $spacing-sm 0;
+      @include text-title-xs {
+        font-family: $font-stack-firefox;
+        padding: $spacing-sm 0;
+      }
     }
 
     p {
@@ -149,10 +153,11 @@
   padding: $spacing-xl;
 
   .headline {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    text-align: center;
-    padding: $spacing-lg;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      text-align: center;
+      padding: $spacing-lg;
+    }
   }
 }
 
@@ -188,9 +193,10 @@
     gap: $spacing-lg;
 
     h2 {
-      @include text-title-md;
-      font-family: $font-stack-firefox;
-      font-weight: 500;
+      @include text-title-md {
+        font-family: $font-stack-firefox;
+        font-weight: 500;
+      }
     }
 
     .end-of-intro-pricing-countdown-and-warning {
diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss
index 6a4ba6723e..788c9fad1c 100644
--- a/frontend/src/pages/tracker-report.module.scss
+++ b/frontend/src/pages/tracker-report.module.scss
@@ -1,5 +1,6 @@
 @import "../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../styles/typography";
 
 .wrapper {
   height: 100%;
@@ -70,10 +71,11 @@
   }
 
   h1 {
-    @include text-title-2xs;
-    font-family: $font-stack-firefox;
-    padding: $spacing-md 0;
-    border-bottom: 1px solid $color-grey-20;
+    @include text-title-2xs {
+      font-family: $font-stack-firefox;
+      padding: $spacing-md 0;
+      border-bottom: 1px solid $color-grey-20;
+    }
   }
 
   .meta {
@@ -127,9 +129,10 @@
     }
 
     h2 {
-      @include text-title-xs;
-      font-family: $font-stack-firefox;
-      font-weight: 500;
+      @include text-title-xs {
+        font-family: $font-stack-firefox;
+        font-weight: 500;
+      }
     }
 
     table {
@@ -257,10 +260,11 @@
     }
 
     .headline {
-      @include text-title-sm;
-      font-family: $font-stack-firefox;
-      font-weight: 500;
-      padding: $spacing-md 0;
+      @include text-title-sm {
+        font-family: $font-stack-firefox;
+        font-weight: 500;
+        padding: $spacing-md 0;
+      }
     }
 
     .read-more {
diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/typography.scss
new file mode 100644
index 0000000000..c70346f163
--- /dev/null
+++ b/frontend/src/styles/typography.scss
@@ -0,0 +1,240 @@
+/*
+Re-declare mozilla-protocol typography:
+ * text-title-* mixins to take a content block
+ * replace type-scale to return a numberremove
+
+TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides
+
+The v17.0.1 typography mixins are at:
+https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/mixins/_typography.scss
+
+A typical mixin text-title-xs looks like:
+
+@mixin text-title-xs {
+    @include font-size(type-scale('title-2xs-size'));
+    line-height: type-scale('title-2xs-line-height');
+
+    @media #{$mq-md} {
+        @include font-size(type-scale('title-xs-size'));
+        line-height: type-scale('title-xs-line-height');
+    }
+}
+
+Here's a typical usage, such as in
+components/dashboard/EmailForwardingModal.module.scss:
+
+.headline {
+  @include text-title-xs;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm 0;
+  gap: $spacing-sm;
+  font-weight: 100;
+}
+
+This compiles to the CSS:
+
+.EmailForwardingModal_headline__VgCSC {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 1.08;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  gap: 8px;
+  font-weight: 100
+}
+@media(min-width:768px)
+{
+  .EmailForwardingModal_headline__VgCSC {
+    font-size: 28px;
+    font-size: 1.75rem;
+    line-height: 1.07
+  }
+}
+
+However, it also triggers the Sass deprecation warning about mixed declarations:
+https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+
+There are three ways to eliminate the warning. The first two result in the same CSS that is different from the original.
+
+The first is to move the `@import` down in the original ruleset:
+
+.headline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm 0;
+  gap: $spacing-sm;
+  font-weight: 100;
+  @include text-title-xs;
+}
+
+The second is opt-in to the new CSS ordering behaviour with the `&` operator:
+
+.headline {
+  @{@include text-title-xs;}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm 0;
+  gap: $spacing-sm;
+  font-weight: 100;
+}
+
+Both result in this slightly different CSS:
+
+.EmailForwardingModal_headline__VgCSC {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  gap: 8px;
+  font-weight: 100
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 1.08;
+}
+@media(min-width:768px)
+{
+  .EmailForwardingModal_headline__VgCSC {
+    font-size: 28px;
+    font-size: 1.75rem;
+    line-height: 1.07
+  }
+}
+
+The change is that the font-size and line-height elements have moved
+from the top to the bottom of the ruleset. This can change the style
+due to browser difference and later properties overriding previous
+properties. See this Stack Overflow question for some of the subtleties:
+
+https://stackoverflow.com/questions/13080220/how-important-is-css-property-order
+
+This file implements a third method, overriding the mozilla-protocol mixins to
+accept a content;. Documentation at:
+https://sass-lang.com/documentation/at-rules/mixin/#content-blocks
+
+@mixin text-title-xs {
+    @include font-size(type-scale('title-2xs-size'));
+    line-height: type-scale('title-2xs-line-height');
+    @content;
+
+    @media #{$mq-md} {
+        @include font-size(type-scale('title-xs-size'));
+        line-height: type-scale('title-xs-line-height');
+    }
+}
+
+The .headline declaration changes to:
+
+.headline {
+  @include text-title-xs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-sm 0;
+    gap: $spacing-sm;
+    font-weight: 100;
+  }
+}
+
+This results in identical output CSS but without the warning.
+
+These mixins an also be used to inject the protocol properties in the middle of
+the ruleset, such as .menu-item in:
+components/layout/navigation/MobileNavigation.module.scss
+
+.menu-item {
+  display: flex;
+
+  @include text-display-xxs {
+    font-family: $font-stack-firefox;
+    border-bottom: 2px solid $color-light-gray-20;
+  }
+
+  &.sign-up-menu-item {
+    padding: $spacing-md;
+  }
+  // ...
+}
+
+An experienced CSS author may prefer this form, to only include the properties
+that they are using to override the base text-* mixin.
+*/
+
+@forward "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" show
+  $font-stack-mozilla;
+
+@mixin text-title-2xl {
+  @include font-size(type-scale("title-xl-size"));
+  line-height: type-scale("title-xl-line-height");
+  @content;
+
+  @media #{$mq-md} {
+    @include font-size(type-scale("title-2xl-size"));
+    line-height: type-scale("title-2xl-line-height");
+  }
+}
+
+// @mixin text-title-xl is not used by Relay
+// @mixin text-title-lg is not used by Relay
+
+@mixin text-title-md {
+  @include font-size(type-scale("title-sm-size"));
+  line-height: type-scale("title-sm-line-height");
+  @content;
+
+  @media #{$mq-md} {
+    @include font-size(type-scale("title-md-size"));
+    line-height: type-scale("title-md-line-height");
+  }
+}
+
+@mixin text-title-sm {
+  @include font-size(type-scale("title-xs-size"));
+  line-height: type-scale("title-xs-line-height");
+  @content;
+
+  @media #{$mq-md} {
+    @include font-size(type-scale("title-sm-size"));
+    line-height: type-scale("title-sm-line-height");
+  }
+}
+
+@mixin text-title-xs {
+  @include font-size(type-scale("title-2xs-size"));
+  line-height: type-scale("title-2xs-line-height");
+  @content;
+
+  @media #{$mq-md} {
+    @include font-size(type-scale("title-xs-size"));
+    line-height: type-scale("title-xs-line-height");
+  }
+}
+
+@mixin text-title-2xs {
+  @include font-size(type-scale("title-3xs-size"));
+  line-height: type-scale("title-3xs-line-height");
+  @content;
+
+  @media #{$mq-md} {
+    @include font-size(type-scale("title-2xs-size"));
+    line-height: type-scale("title-2xs-line-height");
+  }
+}
+
+// @mixin text-display-xxl is not used by Relay
+// @mixin text-display-xl is not used by Relay
+// @mixin text-display-lg is not used by Relay
+// @mixin text-display-md is not used by Relay
+// @mixin text-display-sm is not used by Relay
+// @mixin text-display-xs is not used by Relay
+
+@mixin text-display-xxs {
+  @include text-title-2xs {
+    @content;
+  }
+}