Add scalable font size to global and adjust font size of other files.

src/components/design_system/button/Button.module.css

@@ -8,7 +8,7 @@
   cursor: pointer;
   text-decoration: none;
   text-align: center;
-  font-size: 16px;
+  font-size: var(--base-size);
   text-transform: none;
   line-height: normal;
   letter-spacing: 0;
@@ -44,7 +44,7 @@
   cursor: pointer;
   text-decoration: none;
   text-align: center;
-  font-size: 16px;
+  font-size: var(--base-size);
   background-color: inherit;
   font-family: var(--quicksand);
   text-transform: none;

src/components/table/Table.module.css

@@ -1,5 +1,4 @@
 .tableTitle {
-  font-size: 30px;
   font-weight: 600;
 }
 
@@ -9,7 +8,7 @@
 }
 
 .headerLabel {
-  font-size: 17px;
+  font-size: var(--h5);
   color: var(--grey-20);
 }
 

src/components/table/table.tsx

@@ -102,7 +102,7 @@ function EnhancedTableHead<Column extends HeadCell>({
               active={orderBy === headCell.id}
               direction={orderBy === headCell.id ? order : "asc"}
               onClick={createSortHandler(headCell.id)}
-              className={$table.headerLabel}
+              className={`${$table.headerLabel}`}
             >
               {headCell.label}
               {orderBy === headCell.id ? (
@@ -152,8 +152,8 @@ function EnhancedTableToolbar({
               width: "100%",
             }}
           >
-            <h2 className={$table.tableTitle}>{type}</h2>
-            <button onClick={onOpenInput} className={$button.default}>
+            <h3 className={$table.tableTitle}>{type}</h3>
+            <button onClick={onOpenInput} className={`${$button.default}`}>
               Add {type}
             </button>
           </div>

src/styles/globals.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Quicksand:[email protected]&display=swap");
+
 :root {
   --primary: #20159e;
   --on-primary: #ffffff;
@@ -47,10 +49,35 @@
   --grey-80: #f4f6f7;
   --grey-90: #f6f8f9;
   --grey-100: #ffffff;
+
+  /* Easy Text Size Scaling */
+  --base-size: 0.875rem; /* 14px */
+  --scale: 1.2;
+  --h1: calc(var(--h2) * var(--scale));
+  --h2: calc(var(--h3) * var(--scale));
+  --h3: calc(var(--h4) * var(--scale));
+  --h4: calc(var(--h5) * var(--scale));
+  --h5: calc(var(--h6) * var(--scale));
+  --h6: var(--base-size);
+  --sm: calc(var(--h6) / var(--scale));
+  --xs: calc(var(--sm) / var(--scale));
+
+  /* Fonts */
+  --quicksand: Quicksand;
+  --inter: Inter;
+  --regular: 300;
+  --semibold: 600;
+  --bold: 700;
 }
 
-* {
+html {
   box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
   padding: 0;
   margin: 0;
 }
@@ -61,6 +88,7 @@ body,
   height: 100%;
   overflow-x: auto;
   padding-top: 0.5rem;
+  font-size: var(--base-size);
 }
 
 strong {
@@ -78,28 +106,120 @@ textarea {
   outline: none;
 }
 
-/* Breakpoints recommended by Bootstrap */
-/* Custom, iPhone Retina */
-@media only screen and (min-width: 320px) {
+/* Scalable H elements with h classes that can be a substitute for H elements */
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-weight: 600;
+  font-family: Quicksand;
+  line-height: 1.5;
+}
+
+h1,
+.h1 {
+  font-size: var(--h1);
+}
+
+h2,
+.h2 {
+  font-size: var(--h2);
+}
+
+h3,
+.h3 {
+  font-size: var(--h3);
+}
+
+h4,
+.h4 {
+  font-size: var(--h4);
+}
+
+h5,
+.h5 {
+  font-size: var(--h5);
+}
+
+h6,
+.h6 {
+  font-size: var(--h6);
+}
+
+.sm {
+  font-size: var(--sm);
 }
 
-/* Extra Small Devices, Phones */
+.xs {
+  font-size: var(--xs);
+}
+
+p,
+.body1,
+.body2,
+.caption,
+.overline,
+span {
+  line-height: 1.5;
+  font-family: Inter;
+  font-weight: var(--regular);
+}
+
+p {
+  font-size: var(--base-size);
+}
+
+/* Text or similar style */
+.body1 {
+  font-size: var(--base-size);
+}
+
+/* Usage - description for filling out forms */
+.body2 {
+  font-size: var(--sm);
+}
+
+/* For Images */
+.caption {
+  font-size: var(--xs);
+}
+
+.overline {
+  font-size: var(--xs);
+  font-weight: var(--semibold);
+  text-transform: uppercase;
+}
+
+/* Breakpoints recommended by Bootstrap */
+/* Screens smaller than [480px] uses css above */
+
+/* Phones [wide screen] - Tablet [long screen] */
 @media only screen and (min-width: 480px) {
+  :root {
+    --base-size: 0.9375rem; /* 15px */
+  }
 }
 
-/* Small Devices, Tablets */
+/* Tablets [wide screen]*/
 @media only screen and (min-width: 768px) {
+  :root {
+    --base-size: 1rem;
+  }
 }
 
-/* Medium Devices, Desktops */
+/* Desktops */
 @media only screen and (min-width: 992px) {
   html,
   body,
   #__next {
     padding-top: 0;
   }
 }
-
-/* Large Devices, Wide Screens */
-@media only screen and (min-width: 1200px) {
-}