Change heading sizes (#107)

nationalarchives · Mar 21, 2024 · a9d668b · a9d668b
1 parent df04e23
commit a9d668b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -4,7 +4,7 @@
 @use "../src/nationalarchives/tools/media";
 @use "../src/nationalarchives/tools/typography";
 
-@import "https://use.typekit.net/hkj3kuz.css";
+@import "https://use.typekit.net/kaq6qqh.css";
 
 .sb-show-main.sb-main-padded {
   padding: 0;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed the `aria-current` attribute of the current header menu item from `true` to `page`
 - Switched back from `<menu role="list">` to `<ul>` elements
 - Changed the line height of `tna-heading-xl`
+- Updated heading sizes for better consistency across devices
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -221,6 +221,10 @@ small {
       }
     }
   }
+
+  strong {
+    font-weight: inherit;
+  }
 }
 
 %heading-xl {
@@ -231,7 +235,7 @@ small {
   line-height: 1.1;
 
   @include media.on-medium {
-    @include typography.relative-font-size(42);
+    @include typography.relative-font-size(48);
   }
 
   @include media.on-mobile {
@@ -243,15 +247,19 @@ small {
   @extend %heading;
 
   @include typography.heading-font;
-  @include typography.relative-font-size(32);
+  @include typography.relative-font-size(36);
   line-height: 1.3;
 
   @include media.on-medium {
     @include typography.relative-font-size(30);
   }
 
-  @include media.on-mobile {
-    @include typography.relative-font-size(24);
+  @include media.on-small {
+    @include typography.relative-font-size(28);
+  }
+
+  @include media.on-tiny {
+    @include typography.relative-font-size(25);
   }
 }
 
@@ -262,9 +270,17 @@ small {
   @include typography.relative-font-size(22);
   line-height: 1.6;
 
-  @include media.on-mobile {
+  @include media.on-medium {
+    @include typography.relative-font-size(21);
+  }
+
+  @include media.on-small {
     @include typography.relative-font-size(20);
   }
+
+  @include media.on-tiny {
+    @include typography.relative-font-size(19);
+  }
 }
 
 %heading-s {