Pixels to ems.

resources/assets/styles/common/_functions.scss

@@ -0,0 +1,3 @@
+@function em($pixels, $context: $base-font-size) {
+  @return #{$pixels / $context}em;
+}

resources/assets/styles/common/_global.scss

@@ -5,7 +5,8 @@
 body {
   margin: 0;
   color: $dark-grey;
-  font-family: Spectral, serif;
+  font-family: $font-family-serif;
+  font-size: #{$base-font-size}px;
 }
 
 h1,
@@ -14,22 +15,22 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Karla, sans-serif;
+  font-family: $font-family-sans-serif;
 }
 
 h1 {
-  font-size: 30px;
+  font-size: em(30);
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 2px;
+  letter-spacing: em(2);
-  line-height: 36px;
+  line-height: (36/30);
   margin: 0;
 }
 
 h2 {
-  font-size: 16px;
+  font-size: em(16);
   font-weight: normal;
-  line-height: 30px;
+  line-height: (30/16);
   margin: 0;
 }
 

resources/assets/styles/common/_variables.scss

@@ -5,7 +5,7 @@ $dark-grey:             #444;
 $black:                 #000;
 $white:                 #fff;
 
-/** Box Model  */
+/** Box Model */
 $spacer:                2rem;
 
 /** Breakpoints */
@@ -13,3 +13,8 @@ $small: 768px;
 $medium: 960px;
 $large: 1200px;
 $extra-large: 1650px;
+
+/** Fonts */
+$font-family-sans-serif: 'Karla', sans-serif;
+$font-family-serif: 'Spectral', serif;
+$base-font-size: 18;

resources/assets/styles/components/_buttons.scss

@@ -8,7 +8,7 @@
   border-radius: 3px;
   background: $brand-primary;
   font-family: Karla, sans-serif;
-  font-size: 16px;
+  font-size: em(16);
   font-weight: 600;
   color: $white;
   letter-spacing: 2px;

resources/assets/styles/layouts/_footer.scss

@@ -4,7 +4,7 @@
     margin-bottom: 0;
     padding: 60px 42.5px 40px;
     font-family: Karla, sans-serif;
-    font-size: 16px;
+    font-size: em(16);
     color: $white;
 
     ul {
@@ -13,7 +13,7 @@
       list-style: none;
       text-align: center;
       font-weight: 600;
-      line-height: 36px;
+      line-height: (36/16);
     }
 
     a {
@@ -59,7 +59,7 @@
     margin-top: 1em;
 
     a {
-      font-size: 32px;
+      font-size: em(32);
       margin: 0 0.25em;
       transition: all 0.4s;
     }
@@ -74,7 +74,7 @@
     width: 100%;
     height: 125px;
     background-color: $dark-grey;
-    font-size: 14px;
+    font-size: em(14);
 
     h1,
     li,
@@ -87,7 +87,7 @@
     }
 
     h1 {
-      font-size: 16px;
+      font-size: em(16);
       font-weight: normal;
       margin-bottom: 0;
 

resources/assets/styles/layouts/_header.scss

@@ -90,10 +90,10 @@
 
     a {
       font-family: Karla, sans-serif;
-      font-size: 24px;
+      font-size: em(24);
       color: $white;
       letter-spacing: 0;
-      line-height: 80px;
+      line-height: (80/24);
       text-decoration: none;
       display: none;
     }
@@ -181,7 +181,7 @@
       align-items: center;
 
       a {
-        font-size: 18px;
+        font-size: em(18);
         display: inline-block;
         line-height: normal;
         color: $black;
@@ -211,16 +211,16 @@
     }
 
     h1 {
-      font-size: 72px;
+      font-size: em(72);
       letter-spacing: 1.8px;
-      line-height: 40px;
+      line-height: (40/72);
       margin-bottom: 0.5em;
     }
 
     h2 {
-      font-size: 30px;
+      font-size: em(30);
       letter-spacing: 0.75px;
-      line-height: 40px;
+      line-height: (40/30);
     }
   }
 }

resources/assets/styles/layouts/_pages.scss

@@ -10,12 +10,12 @@
     background-color: $white;
 
     h3 {
-      font-size: 30px;
+      font-size: em(30);
       font-weight: 600;
       text-align: center;
       text-transform: uppercase;
       letter-spacing: 2px;
-      line-height: 36px;
+      line-height: (36/30);
       color: $brand-primary;
       margin: 0;
 
@@ -30,8 +30,8 @@
     }
 
     p {
-      font-size: 16px;
+      font-size: em(16);
-      line-height: 32px;
+      line-height: (32/16);
       text-align: center;
     }
 
@@ -74,14 +74,14 @@
           display: block;
           height: 91px;
           margin-top: 22px;
-          font-size: 24px;
+          font-size: em(24);
           text-align: center;
         }
 
         .title {
           display: block;
           height: 329px - 115px;
-          font-size: 30px;
+          font-size: em(30);
           font-weight: 500;
           text-align: center;
         }
@@ -89,7 +89,7 @@
         .read-more {
           display: block;
           height: auto;
-          font-size: 18px;
+          font-size: em(18);
           text-align: left;
         }
       }
@@ -151,8 +151,8 @@
       box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
 
       h3 {
-        font-size: 48px;
+        font-size: em(48);
-        line-height: 56px;
+        line-height: (56/48);
 
         &::before {
           width: 74px;
@@ -160,8 +160,8 @@
       }
 
       p {
-        font-size: 18px;
+        font-size: em(18);
-        line-height: 32px;
+        line-height: (32/18);
       }
 
       .inside {

resources/assets/styles/main.scss

@@ -12,6 +12,7 @@
 // @import "~some-node-module";
 
 /** Import theme styles */
+@import "common/functions";
 @import "common/global";
 @import "components/buttons";
 @import "components/comments";