diff --git a/src/stylesheets/elements/_body.scss b/src/stylesheets/elements/_body.scss
index d2d0ab86..2da66077 100644
--- a/src/stylesheets/elements/_body.scss
+++ b/src/stylesheets/elements/_body.scss
@@ -6,7 +6,7 @@
 @import '../elements/semantic-elements';
 
 html {
-  font-size: 16px;
+  font-size: $base-font-size;
 }
 
 body {
diff --git a/src/stylesheets/settings/_fonts.scss b/src/stylesheets/settings/_fonts.scss
index d012571d..f323a068 100644
--- a/src/stylesheets/settings/_fonts.scss
+++ b/src/stylesheets/settings/_fonts.scss
@@ -35,3 +35,4 @@
 }
 
 $base-font-stack: 'National', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$base-font-size: 16px;
diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss
index 3e150728..58e9584a 100644
--- a/src/stylesheets/settings/_mixins.scss
+++ b/src/stylesheets/settings/_mixins.scss
@@ -9,9 +9,11 @@
 
 /*--- Font Size [size] Pass Pixel value to get REM/Pixel fallback ---*/
 
-@mixin fontsize($size){
-  font-size:   $size + 0px;
-  font-size:   ($size / 16) + 0rem;
+@mixin fontsize($size) {
+  /* If you divide a united value ($base-font-size) by 1px, it becomes unitless.
+     Since you cannot merge two units (px and rem, in this case), you have to make one unitless.
+  */
+  font-size: ($size / ($base-font-size / 1px)) + 0rem;
 }
 
 /*--- Border Radius [top left, top right, bottom right, bottom left] ---*/