new

assets/scss/_typography.scss

@@ -0,0 +1,87 @@
+// Fonts
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Semibold';
+  src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+
+
+// Using Variables for Font Families
+$font-primary: 'Open Sans', sans-serif;
+$font-secondary: 'Open Sans Semibold', sans-serif;
+
+ 
+
+body {
+  line-height: 1.5;
+  font-family: $font-primary;
+  -webkit-font-smoothing: antialiased;
+
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-secondary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+}
+
+h1 {
+  font-size: $h1;
+
+  @include tablet {
+    font-size: $h1-md;
+  }
+
+  @include mobile {
+    font-size: $h2;
+  }
+
+  @include mobile-xs {
+    font-size: $h2-md;
+  }
+}
+
+h2 {
+  font-size: $h2;
+
+  @include mobile {
+    font-size: $h2-sm;
+  }
+}
+
+h3 {
+  font-size: $h3;
+}
+
+h4 {
+  font-size: $h4;
+}
+
+p {
+  color: darken( $light, 49.41);
+  font-size: $font-size;
+  font-family: $font-secondary;
+}