Calculate font-sizes in rem

Automatically calculate font-sizes in rem by adding a new setting $govuk-root-font-size, which should match the font-size on the html (root) element.
alphagov · Jul 2, 2018 · b332fd1 · b332fd1
1 parent 7a977b1
commit b332fd1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/package/settings/_typography-responsive.scss b/package/settings/_typography-responsive.scss
@@ -2,6 +2,17 @@
 /// @group settings/typography
 ////
 
+/// Root font size
+///
+/// This should match the font-size of your html element. If you are integrating
+/// into a project that uses alphagov/govuk_template then you should set this to
+/// 10px.
+///
+/// @type Number
+/// @access public
+
+$govuk-root-font-size: 16px !default;
+
 /// Responsive typography font map
 ///
 /// This is used to generate responsive typography that adapts according to the

diff --git a/src/core/_template.scss b/src/core/_template.scss
@@ -1,14 +1,21 @@
 @import "../settings/all";
 
 @include govuk-exports("govuk/core/template") {
-  // Set the overall page background color to the same colour
-  // as used by the footer to give the illusion of a long footer.
+
+  // Applied to the <html> element
   .govuk-template {
+    // Set the root font-size so that we can define our font-sizes in rem
+    // throughout
+    font-size: $govuk-root-font-size;
+    // Set the overall page background color to the same colour as used by the
+    // footer to give the illusion of a long footer.
     background-color: $govuk-canvas-background-colour;
   }
 
+  // Applied to the <body> element
   .govuk-template__body {
-    // The default margins set by user-agents are not required since we have our own containers.
+    // The default margins set by user-agents are not required since we have our
+    // own containers.
     margin: 0;
     // Set the overall body of the page back to the typical background colour.
     background-color: $govuk-body-background-colour;

diff --git a/src/helpers/_typography.scss b/src/helpers/_typography.scss
@@ -2,6 +2,8 @@
 /// @group helpers
 ////
 
+@import "../tools/px-to-rem";
+
 /// 'Common typography' helper
 ///
 /// Sets the font family and associated properties, such as font smoothing. Also
@@ -116,6 +118,8 @@
 
   @each $breakpoint, $breakpoint-map in $font-map {
     $font-size: map-get($breakpoint-map, "font-size");
+    $font-size-rem: govuk-px-to-rem($font-size);
+
     $line-height: _govuk-line-height(
       $line-height: if($override-line-height,
         $override-line-height,
@@ -128,10 +132,12 @@
     // these variables becoming strings, so this needs to happen *after* they
     // are used in calculations
     $font-size: $font-size iff($important, !important);
+    $font-size-rem: $font-size-rem iff($important, !important);
     $line-height: $line-height iff($important, !important);
 
     @if $breakpoint == null {
-      font-size: $font-size;
+      font-size: $font-size; // sass-lint:disable no-duplicate-properties
+      font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
       line-height: $line-height;
     } @elseif $breakpoint == "print" {
       @include govuk-media-query($media-type: print) {
@@ -140,7 +146,8 @@
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
-        font-size: $font-size;
+        font-size: $font-size; // sass-lint:disable no-duplicate-properties
+        font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
         line-height: $line-height;
       }
     }

diff --git a/src/tools/_px-to-rem.scss b/src/tools/_px-to-rem.scss
@@ -0,0 +1,20 @@
+////
+/// @group tools
+////
+
+/// Convert pixels to rem
+///
+/// The $govuk-root-font-size must match the font-size on your root (html)
+/// element
+///
+/// @param {Number} $value - Length in pixels
+/// @return {Number} Length in rems
+/// @access public
+
+@function govuk-px-to-rem($value) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return $value / $govuk-root-font-size * 1rem;
+}