Add extra font size step between h1 and h4 (#408)

* Add extra font size step between h1 and h4 * Fix extended font sizes * Tweek font sizes
ONSdigital · Jun 13, 2019 · 5c215ff · 5c215ff
1 parent d0c22a0
commit 5c215ff
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -45,7 +45,7 @@
 
   &__title {
     @extend .u-fs-r--b;
-    @extend .u-fs-l\@m;
+    @extend .u-fs-xl\@m;
 
     margin: 0;
     color: $color-white;
@@ -70,7 +70,7 @@
     .header {
       &__title {
         @extend .u-fs-m;
-        @extend .u-fs-xl\@m;
+        @extend .u-fs-xxl\@m;
       }
     }
   }

diff --git a/src/scss/objects/_typescale.scss b/src/scss/objects/_typescale.scss
@@ -1,21 +1,27 @@
 $base: 18px;
 
 $type_matrix: (
-  u-fs-xxl: (
+  u-fs-xxxl: (
     small: 32px,
     large: 48px,
     weight: $font-weight-bold,
     line-height: 1.3
   ),
-  u-fs-xl: (
+  u-fs-xxl: (
     small: 28px,
     large: 36px,
     weight: $font-weight-bold,
     line-height: 1.4
   ),
+  u-fs-xl: (
+    small: 26px,
+    large: 30px,
+    weight: $font-weight-bold,
+    line-height: 1.4
+  ),
   u-fs-l: (
     small: 24px,
-    large: 28px,
+    large: 26px,
     weight: $font-weight-bold,
     line-height: 1.4
   ),

diff --git a/src/scss/utilities/_typography.scss b/src/scss/utilities/_typography.scss
@@ -30,19 +30,19 @@
 }
 
 h1 {
-  @extend .u-fs-l;
+  @extend .u-fs-xl;
 }
 
 h2 {
-  @extend .u-fs-m;
+  @extend .u-fs-l;
 }
 
 h3 {
-  @extend .u-fs-r--b;
+  @extend .u-fs-m;
 }
 
 h4 {
-  @extend .u-fs-r;
+  @extend .u-fs-r--b;
 }
 
 .u-fw-b {

diff --git a/src/styles/typography/headings/examples/index.html b/src/styles/typography/headings/examples/index.html
@@ -1,6 +1,6 @@
-<h1>Heading 1 (u-fs-l)</h1>
-<h2>Heading 2 (u-fs-m)</h2>
-<h3>Heading 3 (u-fs-r--b)</h3>
-<h4>Heading 4 (u-fs-r)</h4>
+<h1>Heading 1 (u-fs-xl)</h1>
+<h2>Heading 2 (u-fs-l)</h2>
+<h3>Heading 3 (u-fs-m)</h3>
+<h4>Heading 4 (u-fs-r--b)</h4>
 <p class="u-fs-s--b">Small (u-fs-s--b)</p>
 <p class="u-fs-s">Small (u-fs-s)</p>
diff --git a/src/styles/typography/index.njk b/src/styles/typography/index.njk
@@ -19,10 +19,12 @@ Font stack: <span style='font-family: OpenSans;'>"Open Sans"</span>, <span style
 Using the type scale classes on text elements, the type is sized appropriately for the following breakpoints:
 
 {% md %}
-| Viewport < 740                                            | Viewport >= 740                                           |
-|-----------------------------------------------------------|-----------------------------------------------------------|
-| <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 1.5rem/28px     | <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 2rem/36px       |
-| <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.3rem/24px       | <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.5rem/28px       |
+| Viewport < 740                                                 | Viewport >= 740                                                |
+|----------------------------------------------------------------|----------------------------------------------------------------|
+| <p class="u-fs-xxxl">u-fs-xxxl</p>Open Sans Bold - 1.7rem/32px | <p class="u-fs-xxxl">u-fs-xxxl</p>Open Sans Bold - 2.6rem/48px |
+| <p class="u-fs-xxl">u-fs-xxl</p>Open Sans Bold - 1.5rem/28px   | <p class="u-fs-xxl">u-fs-xxl</p>Open Sans Bold - 2rem/36px     |
+| <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 1.4rem/26px     | <p class="u-fs-xl">u-fs-xl</p>Open Sans Bold - 1.6rem/30px     |
+| <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.3rem/24px       | <p class="u-fs-l">u-fs-l</p>Open Sans Bold - 1.4rem/26px       |
 | <p class="u-fs-m">u-fs-m</p>Open Sans Bold - 1.1rem/20px       | <p class="u-fs-m">u-fs-m</p>Open Sans Bold - 1.2rem/22px       |
 | <p class="u-fs-r--b">u-fs-r--b</p>Open Sans Bold - 1rem/18px   | <p class="u-fs-r--b">u-fs-r--b</p>Open Sans Bold - 1rem/18px   |
 | <p class="u-fs-r">u-fs-r</p>Open Sans Regular - 1rem/18px      | <p class="u-fs-r">u-fs-r</p>Open Sans Regular - 1rem/18px      |