Merge pull request #1019 from nhsuk/typo-scale-test

Update type scale
nhsuk · Sep 17, 2024 · fb48afc · fb48afc
2 parents 4a3f3cb + a925151
commit fb48afc
Show file tree

Hide file tree

Showing 190 changed files with 131 additions and 148 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+:recycle: **Changes**
+
+- Large headings, legends and labels updated to use 36px rather than 32px. ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989))
+- Medium headings, legends and labels updated to use 26px rather than 24px. ([Issue 445](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/445))
+- Add sizing classes for table caption
+- Reduce heading caption sizes
+- Adjust print styles, making headings and body type smaller
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
 - Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
 - Hide header's navigation links on print ([PR 1001](https://github.com/nhsuk/nhsuk-frontend/pull/1001))

diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -131,11 +131,7 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
-
-  <h2>Styles</h2>
-  <ul class="nhsuk-list">
-    <li><a href="../styles/lists.html">Lists</a></li>
-  </ul>
+
 {% endblock %}
 
 {% block footer %}

diff --git a/app/styles/lists.njk b/app/styles/lists.njk
diff --git a/packages/components/action-link/_action-link.scss b/packages/components/action-link/_action-link.scss
@@ -62,14 +62,14 @@
     height: 36px;
     left: -3px;
     position: absolute;
-    top: -2px;
+    top: -3px;
     width: 36px;
 
     @include mq($until: tablet) {
       height: 24px;
       left: -2px;
       margin-bottom: 0;
-      top: 2px;
+      top: 1px;
       width: 24px;
     }
   }

diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss
@@ -181,7 +181,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 }
 
 .nhsuk-card--care__heading {
-  @include nhsuk-font(24, $weight: bold);
+  @include nhsuk-font(26, $weight: bold);
   @include print-color($nhsuk-print-text-color);
 
   margin: 0;

diff --git a/packages/components/error-summary/_error-summary.scss b/packages/components/error-summary/_error-summary.scss
@@ -31,7 +31,7 @@
 }
 
 .nhsuk-error-summary__title {
-  @include nhsuk-font(24, $weight: bold);
+  @include nhsuk-font(26, $weight: bold);
 
   margin-top: 0;
   @include nhsuk-responsive-margin(4, "bottom");

diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss
@@ -40,12 +40,12 @@
 }
 
 .nhsuk-fieldset__legend--l {
-  @include nhsuk-font($size: 32, $weight: bold);
+  @include nhsuk-font($size: 36, $weight: bold);
   margin-bottom: nhsuk-spacing(3);
 }
 
 .nhsuk-fieldset__legend--m {
-  @include nhsuk-font($size: 24, $weight: bold);
+  @include nhsuk-font($size: 26, $weight: bold);
   margin-bottom: nhsuk-spacing(3);
 }
 

diff --git a/packages/components/label/_label.scss b/packages/components/label/_label.scss
@@ -23,11 +23,11 @@
 }
 
 .nhsuk-label--l {
-  @include nhsuk-typography-responsive(32);
+  @include nhsuk-typography-responsive(36);
 }
 
 .nhsuk-label--m {
-  @include nhsuk-typography-responsive(24);
+  @include nhsuk-typography-responsive(26);
 }
 
 .nhsuk-label--s {

diff --git a/packages/components/tables/README.md b/packages/components/tables/README.md
@@ -321,7 +321,7 @@ The table Nunjucks macro takes the following arguments:
 | **tableClasses**                   | string  | No       | Optional additional classes to add to the table. Separate each class with a space.                                                            |
 | **attributes**                     | object  | No       | Any extra HTML attributes (for example data attributes) to add to the table.                                                                  |
 | **caption**                        | string  | No       | Optional caption for the table.                                                                                                               |
-| **captionClasses**                 | string  | No       | Optional additional classes to add to the table caption. Separate each class with a space.                                                    |
+| **captionClasses**                 | string  | No       | Optional additional classes to add to the table caption, for example `nhsuk-table__caption--l`. Separate each class with a space.             |
 | **head**                           | array   | No       | Optional array of table head cells.                                                                                                           |
 | **head.[].text or head.[].html**   | array   | No       | Optional array of table head cells. If `html` is specified, the `text` argument will be ignored.                                              |
 | **head.[].colspan**                | number  | No       | Specify how many columns a cell extends.                                                                                                      |

diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss
@@ -6,6 +6,7 @@
  * Table container is used to ensure the table does not break the container.
  *
  * 1. Margin is removed so there isn't double spacing.
+ * 2. XS size not added because it matches the table header, so it'd be bad for hierarchy
  */
 
 .nhsuk-table-container {
@@ -22,6 +23,24 @@
   }
 }
 
+.nhsuk-table__caption--xl {
+  @include nhsuk-typography-responsive(48);
+}
+
+.nhsuk-table__caption--l {
+  @include nhsuk-typography-responsive(36);
+}
+
+.nhsuk-table__caption--m {
+  @include nhsuk-typography-responsive(26);
+}
+
+.nhsuk-table__caption--s {
+  @include nhsuk-typography-responsive(22);
+}
+
+/* [2] */
+
 /* Table row hover
 ========================================================================== */
 

diff --git a/packages/core/elements/_links.scss b/packages/core/elements/_links.scss
@@ -19,7 +19,7 @@ a {
     &:after {
       color: $color_nhsuk-black;
       content: " (Link: " attr(href) ")"; /* [1] */
-      font-size: 14pt; /* [2] */
+      font-size: inherit; /* [2] */
     }
   }
 }

diff --git a/packages/core/settings/_typography.scss b/packages/core/settings/_typography.scss
@@ -32,43 +32,57 @@ $nhsuk-typography-scale: (
   64: (
     null: (
       font-size: 48px,
-      line-height: 56px
+      line-height: 54px
     ),
     tablet: (
       font-size: 64px,
-      line-height: 72px
+      line-height: 70px
     ),
     print: (
-      font-size: 53pt,
+      font-size: 34pt,
       line-height: 1.1
     )
   ),
   48: (
     null: (
       font-size: 32px,
-      line-height: 40px
+      line-height: 38px
     ),
     tablet: (
       font-size: 48px,
-      line-height: 56px
+      line-height: 54px
     ),
     print: (
-      font-size: 32pt,
+      font-size: 26pt,
       line-height: 1.15
     )
   ),
-  32: (
+  36: (
     null: (
-      font-size: 24px,
-      line-height: 32px
+      font-size: 27px,
+      line-height: 33px
     ),
     tablet: (
-      font-size: 32px,
-      line-height: 40px
+      font-size: 36px,
+      line-height: 42px
     ),
     print: (
-      font-size: 24pt,
-      line-height: 1.05
+      font-size: 20pt,
+      line-height: 1.2
+    )
+  ),
+  26: (
+    null: (
+      font-size: 22px,
+      line-height: 29px
+    ),
+    tablet: (
+      font-size: 26px,
+      line-height: 32px
+    ),
+    print: (
+      font-size: 17pt,
+      line-height: 1.25
     )
   ),
   24: (
@@ -78,25 +92,25 @@ $nhsuk-typography-scale: (
     ),
     tablet: (
       font-size: 24px,
-      line-height: 32px
+      line-height: 31px
     ),
     print: (
-      font-size: 18pt,
-      line-height: 1.15
+      font-size: 16pt,
+      line-height: 1.25
     )
   ),
   22: (
     null: (
-      font-size: 18px,
-      line-height: 28px
+      font-size: 19px,
+      line-height: 27px
     ),
     tablet: (
       font-size: 22px,
-      line-height: 32px
+      line-height: 30px
     ),
     print: (
-      font-size: 18pt,
-      line-height: 1.15
+      font-size: 15pt,
+      line-height: 1.25
     )
   ),
   19: (
@@ -109,8 +123,8 @@ $nhsuk-typography-scale: (
       line-height: 28px
     ),
     print: (
-      font-size: 14pt,
-      line-height: 1.15
+      font-size: 13pt,
+      line-height: 1.25
     )
   ),
   16: (
@@ -123,8 +137,8 @@ $nhsuk-typography-scale: (
       line-height: 24px
     ),
     print: (
-      font-size: 14pt,
-      line-height: 1.2
+      font-size: 12pt,
+      line-height: 1.3
     )
   ),
   14: (
@@ -138,7 +152,7 @@ $nhsuk-typography-scale: (
     ),
     print: (
       font-size: 12pt,
-      line-height: 1.2
+      line-height: 1.3
     )
   )
 ) !default;