feat(line-height): add heading, h4 line-height vars and use for h1-h4

cal-itp · Aug 2, 2023 · d2a47b4 · d2a47b4
1 parent 862ff63
commit d2a47b4
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -14,7 +14,9 @@
   --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-line-height: 1.5;
+  --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
+  --heading-line-height: 1.3; /* Displayed as 130% on Figma */
+  --h4-line-height: 1.2; /* Displayed as 120% on Figma */
   --body-letter-spacing: 0.05em;
   --dark-color: #212121;
   --hover-color: #044869;
@@ -162,7 +164,6 @@ a[target="_blank"]::after {
 
 /* Headlines */
 /* All headlines */
-/* All headlines share font-weight, letter-spacing, line-height and margin */
 h1,
 h2,
 .h2,
@@ -171,7 +172,6 @@ h3,
 h4 {
   font-weight: var(--bold-font-weight);
   letter-spacing: var(--body-letter-spacing);
-  line-height: var(--bs-body-line-height);
   margin: 0;
 }
 
@@ -183,6 +183,7 @@ h1 {
   font-size: var(--h1-font-size);
   text-align: var(--h1-text-align);
   padding-top: calc(70rem / 16);
+  line-height: var(--heading-line-height);
 }
 
 /* H2 */
@@ -191,6 +192,7 @@ h1 {
 h2,
 .h2 {
   font-size: var(--h2-font-size);
+  line-height: var(--heading-line-height);
 }
 
 /* H3 */
@@ -199,6 +201,13 @@ h2,
 h3,
 .h3 {
   font-size: var(--h3-font-size);
+  line-height: var(--heading-line-height);
+}
+
+/* H4 */
+/* Desktop only: Used for Agency Selector card, agency name */
+h4 {
+  line-height: var(--h4-line-height);
 }
 
 /* Main */