diff --git a/packages/govuk-frontend/src/govuk/components/footer/_index.scss b/packages/govuk-frontend/src/govuk/components/footer/_index.scss
index 7d9330b248..fd9620c452 100644
--- a/packages/govuk-frontend/src/govuk/components/footer/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/footer/_index.scss
@@ -11,7 +11,7 @@
   $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
 
   .govuk-footer {
-    @include govuk-font($size: 19);
+    @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
diff --git a/packages/govuk-frontend/src/govuk/components/panel/_index.scss b/packages/govuk-frontend/src/govuk/components/panel/_index.scss
index 4fa486d5c0..7b3c9e7ea1 100644
--- a/packages/govuk-frontend/src/govuk/components/panel/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/panel/_index.scss
@@ -12,7 +12,7 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(4) - $govuk-border-width;
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
       // This is an if-all-else-fails attempt to stop long words from overflowing the container
       // on very narrow viewports by forcing them to break and wrap instead. This
diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
index 54cd703598..01eb779a31 100644
--- a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -18,10 +18,12 @@
 
   .govuk-phase-banner__content__tag {
     @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(3);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
 
-    @include govuk-media-query($from: tablet) {
-      margin-right: govuk-spacing(2);
+    @if $govuk-new-typography-scale {
+      @include govuk-media-query($from: tablet) {
+        margin-right: govuk-spacing(2);
+      }
     }
 
     // When forced colour mode is active, for example to provide high contrast,
diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss
index dc600ebafa..bad732dfb9 100644
--- a/packages/govuk-frontend/src/govuk/components/table/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/table/_index.scss
@@ -9,11 +9,13 @@
     border-collapse: collapse;
   }
 
-  // Modifier for tables with a lot of data. Tables with lots of data benefit
-  // from a smaller font size on small screens.
-  .govuk-table--small-text-until-tablet {
-    @include govuk-media-query($until: tablet) {
-      @include govuk-font-size($size: 16);
+  @if $govuk-new-typography-scale {
+    // Modifier for tables with a lot of data. Tables with lots of data benefit
+    // from a smaller font size on small screens.
+    .govuk-table--small-text-until-tablet {
+      @include govuk-media-query($until: tablet) {
+        @include govuk-font-size($size: 16);
+      }
     }
   }
 
diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss b/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
index a6a0867564..0f67b0de94 100644
--- a/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
+++ b/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss
@@ -16,20 +16,151 @@
 
 $govuk-root-font-size: 16px !default;
 
-/// Responsive typography font map
+/// Feature flag for new typography scale
 ///
-/// This is used to generate responsive typography that adapts according to the
-/// breakpoints.
+/// When set to true, $govuk-typography-scale will use the new font map instead
+/// of the current/old one as well as apply changes in components to account
+/// for the updated scale.
 ///
-/// Font size and font weight can be defined for each breakpoint. You can define
-/// different behaviour on tablet and desktop. The 'null' breakpoint is for
-/// mobile.
+/// Should be removed in 6.0.
 ///
-/// Line-heights will automatically be converted from pixel measurements into
-/// relative values. For example, with a font-size of 16px and a line-height of
-/// 24px, the line-height will be converted to 1.5 before output.
+/// @type Boolean
+/// @access public
+
+$govuk-new-typography-scale: false !default;
+
+/// The font map for the old typography scale
 ///
-/// You can also specify a separate font size and line height for print media.
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access private
+
+$_govuk-typography-scale-legacy: (
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 24px,
+      line-height: 25px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    null: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 19px,
+      line-height: 25px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    null: (
+      font-size: 14px,
+      line-height: 16px
+    ),
+    tablet: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    null: (
+      font-size: 12px,
+      line-height: 15px
+    ),
+    tablet: (
+      font-size: 14px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    ),
+    deprecation: (
+      key: "govuk-typography-scale-14",
+      message: "14 on the type scale is deprecated and will be removed as " +
+        "a possible option in the next major version."
+    )
+  )
+);
+
+/// The font map for the new typography scale
 ///
 /// @type Map
 ///
@@ -38,9 +169,9 @@ $govuk-root-font-size: 16px !default;
 /// @prop {Number} $point.print.font-size - Font size for `$point` when printing
 /// @prop {Number} $point.print.line-height - Line height for `$point` when printing
 ///
-/// @access public
+/// @access private
 
-$govuk-typography-scale: (
+$_govuk-typography-scale-modern: (
   80: (
     null: (
       font-size: 53px,
@@ -156,4 +287,34 @@ $govuk-typography-scale: (
         "a possible option in the next major version."
     )
   )
+);
+
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// Line-heights will automatically be converted from pixel measurements into
+/// relative values. For example, with a font-size of 16px and a line-height of
+/// 24px, the line-height will be converted to 1.5 before output.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
+
+$govuk-typography-scale: if(
+  $govuk-new-typography-scale,
+  $_govuk-typography-scale-modern,
+  $_govuk-typography-scale-legacy
 ) !default;