fix: improved visual heading hierarchy

Improvements to the visual representation of headings on MDN Web Docs fix #625
mdn · May 13, 2021 · a38d3cb · a38d3cb
1 parent 76384e9
commit a38d3cb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/sass/atoms/_typography.scss b/sass/atoms/_typography.scss
@@ -25,6 +25,12 @@ h5 {
   line-height: $heading-line-height;
 }
 
+h3,
+h4,
+h5 {
+  font-weight: normal;
+}
+
 h4,
 h5 {
   line-height: $heading-line-height;

diff --git a/styleguide/assets/minimalist/main.css b/styleguide/assets/minimalist/main.css
@@ -211,6 +211,12 @@ h5 {
   line-height: 1.2;
 }
 
+h3,
+h4,
+h5 {
+  font-weight: normal;
+}
+
 h4,
 h5 {
   line-height: 1.2;

diff --git a/styleguide/content/typography/_index.md b/styleguide/content/typography/_index.md
@@ -20,7 +20,7 @@ Below is the default styling for headings level 1-5 with their default margins.
 
 ## The Typescale
 
-Desktop and tablet typescale is based on [major third typescale](https://type-scale.com/?size=16&scale=1.250&text=MDN%20Web%20Docs&font=Poppins&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false) with a base of 100% of base font size set by the user which is typically 16-18px. On mobile phones the typescale based is based on a [major second typescale](https://bit.ly/2VUrOJm) with a base of 100% as set by the user.
+Desktop and tablet typescale is based on [major third typescale](https://type-scale.com/?size=16&scale=1.250&text=MDN%20Web%20Docs&font=Poppins&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000&preview=false) with a base of 100% of base font size set by the user which is typically 16-18px. On mobile phones the typescale is based on a [major second typescale](https://bit.ly/2VUrOJm) with a base of 100% as set by the user.
 
 ## ZillaSlab highlight
 

diff --git a/...de/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.content b/...de/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.content
diff --git a/...guide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json b/...guide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json
@@ -1 +1 @@
-{"Target":"minimalist/main.min.4c888e8bc6dd52ffcd00da6e28efb6a6d0951376c792d9e5fe5b3e976108a94e.css","MediaType":"text/css","Data":{"Integrity":"sha256-TIiOi8bdUv/NANpuKO+2ptCVE3bHktnl/ls+l2EIqU4="}}
+{"Target":"minimalist/main.min.d31c7f77dbcf022bb4dbbfe00485fa90130b5e655cf5db50c3656d78faafa471.css","MediaType":"text/css","Data":{"Integrity":"sha256-0xx/d9vPAiu027/gBIX6kBMLXmVc9dtQw2VtePqvpHE="}}