CDPT-636: Update heading styles in the rich text component (#789)

- Add new rems font sizes in the rich text component and for page headings - Clarify the 62.5% decision in reset.styl
ministryofjustice · Nov 21, 2024 · d30b8f9 · d30b8f9
1 parent 85022da
commit d30b8f9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 22 deletions.
diff --git a/public/app/themes/clarity/src/components/c-rich-text-block/style.styl b/public/app/themes/clarity/src/components/c-rich-text-block/style.styl
@@ -150,39 +150,24 @@ img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
     border: 1px solid $border;
   }
 
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    ff-title();
-    margin-bottom: $spacing;
-    font-weight: 700;
-  }
-
   h1 {
-      ff-title()
-      font-size: $crust;
+    h1();
   }
 
   h2 {
-    font-size: $mantle;
-    margin-top: 50px;
+    h2();
   }
 
   h3 {
-    font-size: 24px;
-    line-height: 30px;
+    h3();
   }
 
   h4 {
-    font-size: 19px;
-    line-height: 25px;
+    h4();
   }
 
   h5 {
-    font-size: 16px;
-    line-height: 20px;
+    h5();
   }
 
   h6 {

diff --git a/public/app/themes/clarity/src/globals/css/_mixins.styl b/public/app/themes/clarity/src/globals/css/_mixins.styl
@@ -17,6 +17,75 @@ ff-body() {
   margin-bottom: $bodyCopy;
 }
 
+// Heading styles for c-rich-text component and the o-page--title object, adapted from https://design-system.service.gov.uk/styles/type-scale/
+h1() {
+  ff-title();
+  font-size: 3.2rem;
+  line-height: 1.1875;
+  margin-bottom: 2.5rem;
+  @media screen and (min-width: 640px) {
+    font-size: 4.8rem;
+    line-height: 1.125;
+    margin-bottom: 3.125rem;
+  }
+}
+
+h2() {
+  ff-title();
+  font-size: 2.7rem;
+  line-height: 1.22222;
+  margin-top: 3rem;
+  margin-bottom: 1.25rem;
+  @media screen and (min-width: 640px) {
+    font-size: 3.6rem;
+    line-height: 1.16667;
+    margin-bottom: 1.875rem;
+  }
+}
+
+h3() {
+  ff-title();
+  font-size: 2.2rem;
+  line-height: 1.31818;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 2.6rem;
+    line-height: 1.25;
+    margin-bottom: 1.25rem;
+  }
+}
+
+h4() {
+  ff-title();
+  font-size: 1.9rem;
+  line-height: 1.42105;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 2.2rem;
+    line-height: 1.36364;
+    margin-bottom: 1.25rem;
+  }
+}
+
+h5() {
+  ff-title();
+  font-size: 1.6rem;
+  line-height: 1.5;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 1.9rem;
+    line-height: 1.47368;
+    margin-bottom: 1.25rem;
+  }
+}
+
+body() {
+  ff-body();
+}
+
 // For a real content list with bullet points
 real-list() {
   ff-body();

diff --git a/public/app/themes/clarity/src/globals/css/objects.styl b/public/app/themes/clarity/src/globals/css/objects.styl
@@ -8,7 +8,7 @@
   margin-bottom: $spacing*2;
   // Main page title
   &--page {
-  	font-size: $crust;
+  	h1();
   	margin-top: $spacing*2;
   }
   // Section title
@@ -22,7 +22,7 @@
   }
 
   &--headline {
-    font-size: $crust;
+    h1();
   }
 
   &--byline {

diff --git a/public/app/themes/clarity/src/globals/css/reset.styl b/public/app/themes/clarity/src/globals/css/reset.styl
@@ -89,6 +89,11 @@ select::-ms-expand {
   display: none;
   } // Remove default drop down style in IE
 html {
+  /* This is an old trick to make rems map to pixel values.
+   * The browser default is 16px, 62.5% sets it to 10px so 1.6 rem is equivalent to 16px.
+   * See this article for a better explanation: https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/
+   * TODO: remove this in future as it's confusing and doesn't integrate well
+   */
   // Reset font size to 10px
   font-size: 62.5%;
 }