Align fonts to Service Canada Design System guidelines (#797)

* modify font theme to align with SCDS * apply theme to fonts at larger display sizes * update CHANGELOG.md
DTS-STN · Jul 12, 2023 · a8c8813 · a8c8813
1 parent 7d984d7
commit a8c8813
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Increased h3 line-height
 - Removed class overriding default border colour on Card.js
 - Updated headings sections to match new design with image under main H1
+- Modify font-sizes to align with SCDS responsive sizing
 
 ## Fixed
 

diff --git a/styles/globals.css b/styles/globals.css
@@ -55,6 +55,14 @@ html {
   h1:focus {
     @apply ring-1;
   }
+  @screen lg {
+    h1 {
+      @apply text-h1l
+    }
+    h2 {
+      @apply text-h2l
+    }
+  }
 }
 
 @layer utilities {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -43,11 +43,12 @@ module.exports = {
       base: ["18px", "28px"],
       lg: ["20px", "32px"],
       p: ["20px", "33px"],
-      h4: ["22px", "20px"],
-      h3: ["24px", "40px"],
-      h2: ["36px", "40px"],
-      h1: ["38px", "42px"],
-      h1l: ["40px", "42px"],
+      h4: ["22px", "24px"],
+      h3: ["24px", "26px"],
+      h2: ["32px", "36px"],
+      h2l: ["36px", "40px"],
+      h1: ["34px", "38px"],
+      h1l: ["38px", "42px"],
       h1xl: ["45px", "54px"],
       h1xxl: ["70px", "84px"],
     },