CW-179 Revise Typography Guide (#98)

* Display every combination of the grid system * Change vertical gap * Upload the font files * add new typography hierarchy * adjust the line height of the paragraph * fix incomplete comments * Upload svg file for fonts * Recover the import of fonts and update the button * Remove Quicksand font from development. * Import CoreSansC through font-family. * Moved fonts into assets. * Move fonts to styles folder. * Upload new fonts weights * Remove font family from variables. * Add full font folder. * Import fonts from assets folder. * Install css-loader due to creation of css. * Rename font families to import all in one go. * Remove fonts from styles folder. * Correct font weights to align with the styleguide Co-authored-by: Tommy Truong <[email protected]>
csesoc · Aug 25, 2020 · 517a14c · 517a14c
1 parent a853550
commit 517a14c
Show file tree

Hide file tree

Showing 82 changed files with 950 additions and 25 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "@vue/eslint-config-airbnb": "^5.1.0",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.0.1",
+    "css-loader": "^4.2.2",
     "cypress": "^4.12.1",
     "eslint": "^7.6.0",
     "eslint-plugin-cypress": "^2.11.1",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -10,12 +10,8 @@
 
   <link rel="preload" as="style"
     href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-  <link rel="preload" as="style"
-    href="https://fonts.googleapis.com/css?family=Quicksand:400,500&display=swap">
-
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:400,500&display=swap">
 </head>
 
 <body>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -43,12 +43,13 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+@import 'assets/font/stylesheet.css';
 /** Must keep html and body seperate to allow scrolling */
 * {
   margin: 0;
   padding: 0;
-  font-family: "Quicksand", sans-serif;
+  font-family: 'Core Sans C', Arial, sans-serif;
 }
 
 html {

diff --git a/frontend/src/assets/font/CoreSansC-15Thin.eot b/frontend/src/assets/font/CoreSansC-15Thin.eot
diff --git a/frontend/src/assets/font/CoreSansC-15Thin.ttf b/frontend/src/assets/font/CoreSansC-15Thin.ttf
diff --git a/frontend/src/assets/font/CoreSansC-15Thin.woff b/frontend/src/assets/font/CoreSansC-15Thin.woff
diff --git a/frontend/src/assets/font/CoreSansC-15Thin.woff2 b/frontend/src/assets/font/CoreSansC-15Thin.woff2
diff --git a/frontend/src/assets/font/CoreSansC-15ThinIt.eot b/frontend/src/assets/font/CoreSansC-15ThinIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-15ThinIt.ttf b/frontend/src/assets/font/CoreSansC-15ThinIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-15ThinIt.woff b/frontend/src/assets/font/CoreSansC-15ThinIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-15ThinIt.woff2 b/frontend/src/assets/font/CoreSansC-15ThinIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLight.eot b/frontend/src/assets/font/CoreSansC-25ExtraLight.eot
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLight.ttf b/frontend/src/assets/font/CoreSansC-25ExtraLight.ttf
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLight.woff b/frontend/src/assets/font/CoreSansC-25ExtraLight.woff
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLight.woff2 b/frontend/src/assets/font/CoreSansC-25ExtraLight.woff2
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLightIt.eot b/frontend/src/assets/font/CoreSansC-25ExtraLightIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLightIt.ttf b/frontend/src/assets/font/CoreSansC-25ExtraLightIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLightIt.woff b/frontend/src/assets/font/CoreSansC-25ExtraLightIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-25ExtraLightIt.woff2 b/frontend/src/assets/font/CoreSansC-25ExtraLightIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-35Light.eot b/frontend/src/assets/font/CoreSansC-35Light.eot
diff --git a/frontend/src/assets/font/CoreSansC-35Light.ttf b/frontend/src/assets/font/CoreSansC-35Light.ttf
diff --git a/frontend/src/assets/font/CoreSansC-35Light.woff b/frontend/src/assets/font/CoreSansC-35Light.woff
diff --git a/frontend/src/assets/font/CoreSansC-35Light.woff2 b/frontend/src/assets/font/CoreSansC-35Light.woff2
diff --git a/frontend/src/assets/font/CoreSansC-35LightIt.eot b/frontend/src/assets/font/CoreSansC-35LightIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-35LightIt.ttf b/frontend/src/assets/font/CoreSansC-35LightIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-35LightIt.woff b/frontend/src/assets/font/CoreSansC-35LightIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-35LightIt.woff2 b/frontend/src/assets/font/CoreSansC-35LightIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-45Regular.eot b/frontend/src/assets/font/CoreSansC-45Regular.eot
diff --git a/frontend/src/assets/font/CoreSansC-45Regular.ttf b/frontend/src/assets/font/CoreSansC-45Regular.ttf
diff --git a/frontend/src/assets/font/CoreSansC-45Regular.woff b/frontend/src/assets/font/CoreSansC-45Regular.woff
diff --git a/frontend/src/assets/font/CoreSansC-45Regular.woff2 b/frontend/src/assets/font/CoreSansC-45Regular.woff2
diff --git a/frontend/src/assets/font/CoreSansC-45RegularIt.eot b/frontend/src/assets/font/CoreSansC-45RegularIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-45RegularIt.ttf b/frontend/src/assets/font/CoreSansC-45RegularIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-45RegularIt.woff b/frontend/src/assets/font/CoreSansC-45RegularIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-45RegularIt.woff2 b/frontend/src/assets/font/CoreSansC-45RegularIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-55Medium.eot b/frontend/src/assets/font/CoreSansC-55Medium.eot
diff --git a/frontend/src/assets/font/CoreSansC-55Medium.ttf b/frontend/src/assets/font/CoreSansC-55Medium.ttf
diff --git a/frontend/src/assets/font/CoreSansC-55Medium.woff b/frontend/src/assets/font/CoreSansC-55Medium.woff
diff --git a/frontend/src/assets/font/CoreSansC-55Medium.woff2 b/frontend/src/assets/font/CoreSansC-55Medium.woff2
diff --git a/frontend/src/assets/font/CoreSansC-55MediumIt.eot b/frontend/src/assets/font/CoreSansC-55MediumIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-55MediumIt.ttf b/frontend/src/assets/font/CoreSansC-55MediumIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-55MediumIt.woff b/frontend/src/assets/font/CoreSansC-55MediumIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-55MediumIt.woff2 b/frontend/src/assets/font/CoreSansC-55MediumIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-65Bold.eot b/frontend/src/assets/font/CoreSansC-65Bold.eot
diff --git a/frontend/src/assets/font/CoreSansC-65Bold.ttf b/frontend/src/assets/font/CoreSansC-65Bold.ttf
diff --git a/frontend/src/assets/font/CoreSansC-65Bold.woff b/frontend/src/assets/font/CoreSansC-65Bold.woff
diff --git a/frontend/src/assets/font/CoreSansC-65Bold.woff2 b/frontend/src/assets/font/CoreSansC-65Bold.woff2
diff --git a/frontend/src/assets/font/CoreSansC-65BoldIt.eot b/frontend/src/assets/font/CoreSansC-65BoldIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-65BoldIt.ttf b/frontend/src/assets/font/CoreSansC-65BoldIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-65BoldIt.woff b/frontend/src/assets/font/CoreSansC-65BoldIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-65BoldIt.woff2 b/frontend/src/assets/font/CoreSansC-65BoldIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBold.eot b/frontend/src/assets/font/CoreSansC-75ExtraBold.eot
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBold.ttf b/frontend/src/assets/font/CoreSansC-75ExtraBold.ttf
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBold.woff b/frontend/src/assets/font/CoreSansC-75ExtraBold.woff
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBold.woff2 b/frontend/src/assets/font/CoreSansC-75ExtraBold.woff2
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.eot b/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.ttf b/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.woff b/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.woff2 b/frontend/src/assets/font/CoreSansC-75ExtraBoldIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-85Heavy.eot b/frontend/src/assets/font/CoreSansC-85Heavy.eot
diff --git a/frontend/src/assets/font/CoreSansC-85Heavy.ttf b/frontend/src/assets/font/CoreSansC-85Heavy.ttf
diff --git a/frontend/src/assets/font/CoreSansC-85Heavy.woff b/frontend/src/assets/font/CoreSansC-85Heavy.woff
diff --git a/frontend/src/assets/font/CoreSansC-85Heavy.woff2 b/frontend/src/assets/font/CoreSansC-85Heavy.woff2
diff --git a/frontend/src/assets/font/CoreSansC-85HeavyIt.eot b/frontend/src/assets/font/CoreSansC-85HeavyIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-85HeavyIt.ttf b/frontend/src/assets/font/CoreSansC-85HeavyIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-85HeavyIt.woff b/frontend/src/assets/font/CoreSansC-85HeavyIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-85HeavyIt.woff2 b/frontend/src/assets/font/CoreSansC-85HeavyIt.woff2
diff --git a/frontend/src/assets/font/CoreSansC-95Black.eot b/frontend/src/assets/font/CoreSansC-95Black.eot
diff --git a/frontend/src/assets/font/CoreSansC-95Black.ttf b/frontend/src/assets/font/CoreSansC-95Black.ttf
diff --git a/frontend/src/assets/font/CoreSansC-95Black.woff b/frontend/src/assets/font/CoreSansC-95Black.woff
diff --git a/frontend/src/assets/font/CoreSansC-95Black.woff2 b/frontend/src/assets/font/CoreSansC-95Black.woff2
diff --git a/frontend/src/assets/font/CoreSansC-95BlackIt.eot b/frontend/src/assets/font/CoreSansC-95BlackIt.eot
diff --git a/frontend/src/assets/font/CoreSansC-95BlackIt.ttf b/frontend/src/assets/font/CoreSansC-95BlackIt.ttf
diff --git a/frontend/src/assets/font/CoreSansC-95BlackIt.woff b/frontend/src/assets/font/CoreSansC-95BlackIt.woff
diff --git a/frontend/src/assets/font/CoreSansC-95BlackIt.woff2 b/frontend/src/assets/font/CoreSansC-95BlackIt.woff2
diff --git a/frontend/src/assets/font/demo.html b/frontend/src/assets/font/demo.html
diff --git a/frontend/src/assets/font/stylesheet.css b/frontend/src/assets/font/stylesheet.css
@@ -0,0 +1,216 @@
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-15Thin.eot');
+    src: local('Core Sans C 15 Thin'), local('CoreSansC-15Thin'),
+        url('CoreSansC-15Thin.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-15Thin.woff2') format('woff2'),
+        url('CoreSansC-15Thin.woff') format('woff'),
+        url('CoreSansC-15Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-65BoldIt.eot');
+    src: local('Core Sans C 65 Bold Italic'), local('CoreSansC-65BoldIt'),
+        url('CoreSansC-65BoldIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-65BoldIt.woff2') format('woff2'),
+        url('CoreSansC-65BoldIt.woff') format('woff'),
+        url('CoreSansC-65BoldIt.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-25ExtraLightIt.eot');
+    src: local('Core Sans C 25 ExtraLight Italic'), local('CoreSansC-25ExtraLightIt'),
+        url('CoreSansC-25ExtraLightIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-25ExtraLightIt.woff2') format('woff2'),
+        url('CoreSansC-25ExtraLightIt.woff') format('woff'),
+        url('CoreSansC-25ExtraLightIt.ttf') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-65Bold.eot');
+    src: local('Core Sans C 65 Bold'), local('CoreSansC-65Bold'),
+        url('CoreSansC-65Bold.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-65Bold.woff2') format('woff2'),
+        url('CoreSansC-65Bold.woff') format('woff'),
+        url('CoreSansC-65Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-35LightIt.eot');
+    src: local('Core Sans C 35 Light Italic'), local('CoreSansC-35LightIt'),
+        url('CoreSansC-35LightIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-35LightIt.woff2') format('woff2'),
+        url('CoreSansC-35LightIt.woff') format('woff'),
+        url('CoreSansC-35LightIt.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-55Medium.eot');
+    src: local('Core Sans C 55 Medium'), local('CoreSansC-55Medium'),
+        url('CoreSansC-55Medium.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-55Medium.woff2') format('woff2'),
+        url('CoreSansC-55Medium.woff') format('woff'),
+        url('CoreSansC-55Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-85HeavyIt.eot');
+    src: local('Core Sans C 85 Heavy Italic'), local('CoreSansC-85HeavyIt'),
+        url('CoreSansC-85HeavyIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-85HeavyIt.woff2') format('woff2'),
+        url('CoreSansC-85HeavyIt.woff') format('woff'),
+        url('CoreSansC-85HeavyIt.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-15ThinIt.eot');
+    src: local('Core Sans C 15 Thin Italic'), local('CoreSansC-15ThinIt'),
+        url('CoreSansC-15ThinIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-15ThinIt.woff2') format('woff2'),
+        url('CoreSansC-15ThinIt.woff') format('woff'),
+        url('CoreSansC-15ThinIt.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-45RegularIt.eot');
+    src: local('Core Sans C 45 Regular Italic'), local('CoreSansC-45RegularIt'),
+        url('CoreSansC-45RegularIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-45RegularIt.woff2') format('woff2'),
+        url('CoreSansC-45RegularIt.woff') format('woff'),
+        url('CoreSansC-45RegularIt.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-25ExtraLight.eot');
+    src: local('Core Sans C 25 ExtraLight'), local('CoreSansC-25ExtraLight'),
+        url('CoreSansC-25ExtraLight.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-25ExtraLight.woff2') format('woff2'),
+        url('CoreSansC-25ExtraLight.woff') format('woff'),
+        url('CoreSansC-25ExtraLight.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-75ExtraBoldIt.eot');
+    src: local('Core Sans C 75 ExtraBold Italic'), local('CoreSansC-75ExtraBoldIt'),
+        url('CoreSansC-75ExtraBoldIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-75ExtraBoldIt.woff2') format('woff2'),
+        url('CoreSansC-75ExtraBoldIt.woff') format('woff'),
+        url('CoreSansC-75ExtraBoldIt.ttf') format('truetype');
+    font-weight: 800;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-55MediumIt.eot');
+    src: local('Core Sans C 55 Medium Italic'), local('CoreSansC-55MediumIt'),
+        url('CoreSansC-55MediumIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-55MediumIt.woff2') format('woff2'),
+        url('CoreSansC-55MediumIt.woff') format('woff'),
+        url('CoreSansC-55MediumIt.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-95Black.eot');
+    src: local('Core Sans C 95 Black'), local('CoreSansC-95Black'),
+        url('CoreSansC-95Black.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-95Black.woff2') format('woff2'),
+        url('CoreSansC-95Black.woff') format('woff'),
+        url('CoreSansC-95Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-75ExtraBold.eot');
+    src: local('Core Sans C 75 ExtraBold'), local('CoreSansC-75ExtraBold'),
+        url('CoreSansC-75ExtraBold.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-75ExtraBold.woff2') format('woff2'),
+        url('CoreSansC-75ExtraBold.woff') format('woff'),
+        url('CoreSansC-75ExtraBold.ttf') format('truetype');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-95BlackIt.eot');
+    src: local('Core Sans C 95 Black Italic'), local('CoreSansC-95BlackIt'),
+        url('CoreSansC-95BlackIt.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-95BlackIt.woff2') format('woff2'),
+        url('CoreSansC-95BlackIt.woff') format('woff'),
+        url('CoreSansC-95BlackIt.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-35Light.eot');
+    src: local('Core Sans C 35 Light'), local('CoreSansC-35Light'),
+        url('CoreSansC-35Light.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-35Light.woff2') format('woff2'),
+        url('CoreSansC-35Light.woff') format('woff'),
+        url('CoreSansC-35Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-85Heavy.eot');
+    src: local('Core Sans C 85 Heavy'), local('CoreSansC-85Heavy'),
+        url('CoreSansC-85Heavy.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-85Heavy.woff2') format('woff2'),
+        url('CoreSansC-85Heavy.woff') format('woff'),
+        url('CoreSansC-85Heavy.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Core Sans C';
+    src: url('CoreSansC-45Regular.eot');
+    src: local('Core Sans C Regular'), local('CoreSansC-45Regular'),
+        url('CoreSansC-45Regular.eot?#iefix') format('embedded-opentype'),
+        url('CoreSansC-45Regular.woff2') format('woff2'),
+        url('CoreSansC-45Regular.woff') format('woff'),
+        url('CoreSansC-45Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
diff --git a/frontend/src/styles/abstracts/_variables.scss b/frontend/src/styles/abstracts/_variables.scss
@@ -36,3 +36,4 @@ $grid-columns: 12;
 $grid-gap: 40px;
 $gap-horizontal: $grid-gap;
 $gap-vertical: $grid-gap * 3;
+
diff --git a/frontend/src/styles/base/_typography.scss b/frontend/src/styles/base/_typography.scss
@@ -7,19 +7,19 @@
 // ----------------------------------------------------------------------
 	// #Type Scale
 // ----------------------------------------------------------------------
-$text-xs: 1em / math.pow($text-scale-ratio, 1);   //caption
-$text-sm: 1em / math.pow($text-scale-ratio, 0.5); //button
-$text-md: 1em * math.pow($text-scale-ratio, 4);   // h4
-$text-lg: 1em * math.pow($text-scale-ratio, 5);   // h3
-$text-xl: 1em * math.pow($text-scale-ratio, 6);   // h2
-$text-xxl: 1em * math.pow($text-scale-ratio, 8);  //h1
+$text-xs: 1em ;   //caption
+$text-sm: 1em * math.pow($text-scale-ratio, 1);   // h4
+$text-md: 1em * math.pow($text-scale-ratio, 2);   
+$text-lg: 1em * math.pow($text-scale-ratio, 3);   // h2 h3
+$text-xl: 1em * math.pow($text-scale-ratio, 6);   // h1
+$text-xxl: 1em * math.pow($text-scale-ratio, 8);  
 $text-xxxl: 1em * math.pow($text-scale-ratio, 9);
 
 // ----------------------------------------------------------------------
 	// #Line Height
 // ----------------------------------------------------------------------
 $heading-line-height: 1.5;
-$body-line-height:1.2;
+$body-line-height: 2.5;
 
 body {
   font-size: $text-base-size;
@@ -37,43 +37,70 @@ h1, h2, h3, h4, form legend {
   font-size: $text-xxxl;
 }
 
-h1, .text--xxl {
-  font-size: $text-xxl;
+.text--xxl {
+  font-size: $text-xxl; 
 }
 
-h2, .text--xl {
+.text--xl {
   font-size: $text-xl;
 }
 
-h3, .text--lg {
+.text--lg {
   font-size: $text-lg;
 }
 
-h4, .text--md {
+.text--md {
   font-size: $text-md;
 }
 
-.text--sm, small {
+.text--sm {
   font-size: $text-sm;
 }
 
 .text--xs {
   font-size: $text-xs;
 }
 
+h1 {
+  font-size: $text-xl;
+  font-weight: 800;
+}
+
+h2 {
+  font-size: $text-lg;
+  font-weight: 800;
+}
+
+h3 {
+  font-size: $text-lg;
+  font-weight: 200;
+}
+
+h4 {
+  font-size: $text-sm;
+  font-weight: 800;
+}
+
 p {
-    line-height: $body-line-height;
+  font-size: $text-xs;
+  font-weight: 200;
+  line-height: $body-line-height;
+  margin-bottom: $space-xxxs;
 }
 
+button {
+  font-size: $text-sm;
+  font-weight: 800;
+}
 // ----------------------------------------------------------------------
 	// #Text Component - class used to stylize blocks
 // ----------------------------------------------------------------------
 .text-container {
   h2, h3, h4 {
-    margin-top: $space-sm;
+    margin-top: $space-md;
   }
 
   ul, ol, p {
-    margin-bottom: $space-md;
+    margin-bottom: $space-sm; 
   }
 }
diff --git a/frontend/src/styles/components/_buttons.scss b/frontend/src/styles/components/_buttons.scss
@@ -26,7 +26,7 @@ $btn-lg: $btn-font-size+0.4em;
   text-decoration: none;
   line-height: 1;
 
-  padding: $space-xs $space-sm;
+  padding: $space-sm $space-md;
   border-radius: $btn-radius;
   font-size: $btn-font-size;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,4 @@ $grid-columns: 12;
		$grid-gap: 40px;
		$gap-horizontal: $grid-gap;
		$gap-vertical: $grid-gap * 3;