Use the correct type scale for heading levels in rich text. Fix #9027 (#9189)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -40,6 +40,7 @@ Changelog
  * Fix: Reinstate specific labels for chooser buttons (for example 'Choose another page', 'Edit this page' not 'Change', 'Edit') so that it is clearer for users and non-English translations (Matt Westcott)
  * Fix: Resolve issue where searches with a tag and a query param in the image listing would result in an `FilterFieldError` (Stefan Hammer)
  * Fix: Add missing vertical space between header and content in embed chooser modal (LB (Ben) Johnston)
+ * Fix: Use the correct type scale for heading levels in rich text (Steven Steinwand)
 
 
 4.0.1 (05.09.2022)

client/scss/elements/_typography.scss

@@ -20,10 +20,6 @@ h6 {
 h1 {
   font-size: 1.5em;
   font-weight: 700;
-
-  span {
-    font-weight: 300;
-  }
 }
 
 h2 {

client/src/components/Draftail/Draftail.scss

@@ -46,33 +46,32 @@ $draftail-editor-font-family: $font-sans;
   h6 {
     // Overrides for heading styles of Wagtail itself.
     color: inherit;
-    line-height: 1;
-  }
-
-  h1,
-  h2,
-  h3 {
-    line-height: 1.1;
+    line-height: theme('lineHeight.tight');
+    font-weight: theme('fontWeight.bold');
   }
 
   h1 {
-    font-size: 2em;
+    font-size: theme('fontSize.30');
   }
 
   h2 {
-    font-size: 1.8em;
+    font-size: theme('fontSize.24');
   }
 
   h3 {
-    font-size: 1.5em;
+    font-size: theme('fontSize.22');
   }
 
   h4 {
-    font-size: 1.2em;
+    font-size: theme('fontSize.18');
   }
 
   h5 {
-    font-size: 1.1em;
+    font-size: theme('fontSize.16');
+  }
+
+  h6 {
+    font-size: theme('fontSize.14');
   }
 }
 

docs/releases/4.0.2.md

@@ -24,3 +24,4 @@ depth: 1
  * Reinstate specific labels for chooser buttons (for example 'Choose another page', 'Edit this page' not 'Change', 'Edit') so that it is clearer for users and non-English translations (Matt Westcott)
  * Resolve issue where searches with a tag and a query param in the image listing would result in an `FilterFieldError` (Stefan Hammer)
  * Add missing vertical space between header and content in embed chooser modal (LB (Ben) Johnston)
+ * Use the correct type scale for heading levels in rich text (Steven Steinwand)