Adjust the responsive type scale

CHANGELOG.md

@@ -6,6 +6,29 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ### New features
 
+#### We've adjusted our responsive type scale
+
+We've made the following adjustments to our responsive type scale:
+
+- point 16 now returns 16px across all screen sizes
+- point 19 now returns 19px across all screen sizes
+- point 24 remains as 24px on large screens
+- point 24 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
+- point 27 remains as 27px on large screens
+- point 27 now returns 21px on small screens instead of 18px and has a line height 25px instead of 20px
+- point 36 remains as 27px on large screens
+- point 36 now returns 27px on small screens instead of 24px and has a line height 30px instead of 25px
+
+To enable these changes, set `$govuk-new-typography-scale` to `true` before you import GOV.UK Frontend in your Sass:
+
+```
+// application.scss
+$govuk-new-typography-scale: true;
+@import "govuk-frontend/all";
+```
+
+If your service uses custom elements made using GOV.UK Frontend, test your service against the new typography scale to assess if you need to make any adjustments. You can read more on upgrading your service to the new type scale in our [upgrade guide](https://design-system.service.gov.uk/get-started/new-type-scale/).
+
 #### Insert custom HTML into component form group wrappers
 
 You can now insert custom HTML into form group wrappers for all components with form fields.

packages/govuk-frontend-review/src/stylesheets/app.scss

@@ -1,4 +1,5 @@
 $govuk-show-breakpoints: true;
+$govuk-new-typography-scale: true;
 
 @import "govuk/all";
 @import "partials/app";

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: 16);
+    @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 

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(3) - $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

packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss

@@ -18,7 +18,13 @@
 
   .govuk-phase-banner__content__tag {
     @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(2);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 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,
     // the background colour of the tag is the same as the rest of the page. To ensure

packages/govuk-frontend/src/govuk/components/table/_index.scss

@@ -9,6 +9,16 @@
     border-collapse: collapse;
   }
 
+  @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);
+      }
+    }
+  }
+
   .govuk-table__header {
     @include govuk-typography-weight-bold;
   }

packages/govuk-frontend/src/govuk/components/table/table.yaml

@@ -156,7 +156,25 @@ examples:
             format: numeric
           - text: £125
             format: numeric
-
+  - name: with small text modifier for tables with a lot of data
+    options:
+      classes: govuk-table--small-text-until-tablet
+      rows:
+        - - text: January
+          - text: £85
+            format: numeric
+          - text: £95
+            format: numeric
+        - - text: February
+          - text: £75
+            format: numeric
+          - text: £55
+            format: numeric
+        - - text: March
+          - text: £165
+            format: numeric
+          - text: £125
+            format: numeric
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes
     hidden: true

packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss

@@ -16,20 +16,20 @@
 
 $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.
-///
-/// You can also specify a separate font size and line height for print media.
+/// @type Boolean
+/// @access public
+
+$govuk-new-typography-scale: false !default;
+
+/// The font map for the old typography scale
 ///
 /// @type Map
 ///
@@ -38,9 +38,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-legacy: (
   80: (
     null: (
       font-size: 53px,
@@ -158,4 +158,163 @@ $govuk-typography-scale: (
         "a possible option in the next major version."
     )
   )
+);
+
+/// The font map for the new typography scale
+///
+/// @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-modern: (
+  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: 27px,
+      line-height: 30px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    // Made same as 24 on mobile (consider deprecating this size)
+    null:
+      (
+        font-size: 21px,
+        line-height: 25px
+      ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    // Bump up mobile size from 18/20 to 21/25
+    null:
+      (
+        font-size: 21px,
+        line-height: 25px
+      ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    // Stay at 19/25 at all sizes
+    null:
+      (
+        font-size: 19px,
+        line-height: 25px
+      ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    // Stay at 16/20 at all sizes
+    null:
+      (
+        font-size: 16px,
+        line-height: 20px
+      ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    // Stay at 14/20 at all sizes (consider deprecating this size)
+    null:
+      (
+        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."
+    )
+  )
+);
+
+/// 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;