Merge pull request #1470 from GSA/1452-scale-based-fonts

PXBF-1452-scale-based-fonts: update fixed size fonts to rem based fonts
GSA · Jun 25, 2024 · 47f6edd · 47f6edd
2 parents 96003ac + 9eac522
commit 47f6edd
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/benefit-finder/src/shared/styles/mixins/_index.scss b/benefit-finder/src/shared/styles/mixins/_index.scss
@@ -1,83 +1,96 @@
+// USAGov font ratio is based on 16px
+// for example h1 @ 2.44rem = 39.04px
+
+// Our conversions
+// 36px = 2.25rem
+// 32px = 2rem
+// 24px = 1.5rem
+// 22px = 1.375rem
+// 20px = 1.25rem
+// 17px = 1.063rem
+// 16px = 1rem
+// 15px = 0.938rem
+
 @mixin h0 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 36px;
+  font-size: 2.25rem;
   font-weight: 800;
   line-height: 100%;
 }
 
 @mixin h1 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 36px;
+  font-size: 2rem;
   font-weight: 800;
   line-height: 100%;
 }
 
 @mixin h2 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 32px;
+  font-size: 1.5rem;
   font-weight: 800;
   line-height: 100%;
 }
 
 @mixin h3 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 32px;
+  font-size: 1.375rem;
   font-weight: 700;
   line-height: 134.09%;
 }
 
 @mixin h4 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 24px;
+  font-size: 1.25rem;
   font-weight: 800;
   line-height: 114.59%;
 }
 
 @mixin h5 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 22px;
+  font-size: 1.375rem;
   font-weight: 700;
   line-height: 134.09%;
 }
 
 @mixin h6 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: 700;
   line-height: 134.09%;
 }
 
 @mixin important-x-bold {
   font-family: 'Public Sans', sans-serif;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 800;
   line-height: 134.09%;
 }
 
 @mixin important-bold {
   font-family: 'Public Sans', sans-serif;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 134.09%;
 }
 
 @mixin p {
   font-family: 'Public Sans', sans-serif;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 18.8px;
 }
 
 @mixin p1 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 18.8px;
 }
 
 @mixin p2 {
   font-family: 'Public Sans', sans-serif;
-  font-size: 15px;
+  font-size: 0.938rem;
   font-weight: 400;
   line-height: 18.8px;
 }
@@ -90,7 +103,7 @@
 }
 
 @mixin list-items {
-  font-size: 17px;
+  font-size: 1.063rem;
   font-weight: 400;
   line-height: 26px;
 }