Merge pull request #858 from alphagov/calculate-rem

Calculate font-sizes in rem
alphagov · Jul 10, 2018 · 590c56f · 590c56f
2 parents e8a743c + e6c470a
commit 590c56f
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,21 @@
 
   ([PR #857](https://github.com/alphagov/govuk-frontend/pull/857))
 
+- The typography scale can now be converted from pixels to rem automatically,
+  with pixels also being provided as a fallback for older browsers.
+
+  This feature is disabled by default - in order to use it you will need to set
+  `$govuk-typography-use-rem: true` and ensure that `$govuk-root-font-size` is
+  set to the effective size of your root (html) element. For new projects, this
+  should be the default of 16px so you don't have to do anything. For projects
+  that use alphagov/govuk_template this should be 10px.
+
+  The intention is to enable this by default in the next major version:
+  https://github.com/alphagov/govuk-frontend/issues/868
+
+  ([PR #858](https://github.com/alphagov/govuk-frontend/pull/858))
+
+
 🔧 Fixes:
 
 - Apply `display:block` to `.govuk-main-wrapper`

diff --git a/src/core/_template.scss b/src/core/_template.scss
@@ -1,14 +1,18 @@
 @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 overall page background colour 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,14 @@
     // 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
+      @if $govuk-typography-use-rem {
+        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 +148,10 @@
       }
     } @else {
       @include govuk-media-query($from: $breakpoint) {
-        font-size: $font-size;
+        font-size: $font-size; // sass-lint:disable no-duplicate-properties
+        @if $govuk-typography-use-rem {
+          font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+        }
         line-height: $line-height;
       }
     }

diff --git a/src/helpers/typography.test.js b/src/helpers/typography.test.js
@@ -17,6 +17,9 @@ const sassBootstrap = `
   @import "settings/media-queries";
   @import "settings/ie8";
 
+  $govuk-root-font-size: 16px;
+  $govuk-typography-use-rem: false;
+
   $govuk-breakpoints: (
     desktop: 30em
   );
@@ -214,4 +217,78 @@ describe('@mixin govuk-typography-responsive', () => {
               line-height: 1.5; } }`)
     })
   })
+
+  describe('when $govuk-typography-use-rem is enabled', () => {
+    it('outputs CSS with suitable media queries', async () => {
+      const sass = `
+        ${sassBootstrap}
+        $govuk-typography-use-rem: true;
+
+        .foo {
+          @include govuk-typography-responsive($size: 14)
+        }`
+
+      const results = await sassRender({ data: sass, ...sassConfig })
+
+      expect(results.css.toString().trim()).toBe(outdent`
+        .foo {
+          font-size: 12px;
+          font-size: 0.75rem;
+          line-height: 1.25; }
+          @media (min-width: 30em) {
+            .foo {
+              font-size: 14px;
+              font-size: 0.875rem;
+              line-height: 1.42857; } }`)
+    })
+
+    it('adjusts rem values based on root font size', async () => {
+      const sass = `
+        ${sassBootstrap}
+        $govuk-typography-use-rem: true;
+        $govuk-root-font-size: 10px;
+
+        .foo {
+          @include govuk-typography-responsive($size: 14)
+        }`
+
+      const results = await sassRender({ data: sass, ...sassConfig })
+
+      expect(results.css.toString().trim()).toBe(outdent`
+        .foo {
+          font-size: 12px;
+          font-size: 1.2rem;
+          line-height: 1.25; }
+          @media (min-width: 30em) {
+            .foo {
+              font-size: 14px;
+              font-size: 1.4rem;
+              line-height: 1.42857; } }`)
+    })
+
+    describe('and $important is set to true', () => {
+      it('marks font size and line height as important', async () => {
+        const sass = `
+          ${sassBootstrap}
+          $govuk-typography-use-rem: true;
+
+          .foo {
+            @include govuk-typography-responsive($size: 14, $important: true);
+          }`
+
+        const results = await sassRender({ data: sass, ...sassConfig })
+
+        expect(results.css.toString().trim()).toBe(outdent`
+          .foo {
+            font-size: 12px !important;
+            font-size: 0.75rem !important;
+            line-height: 1.25 !important; }
+            @media (min-width: 30em) {
+              .foo {
+                font-size: 14px !important;
+                font-size: 0.875rem !important;
+                line-height: 1.42857 !important; } }`)
+      })
+    })
+  })
 })
diff --git a/src/settings/_typography-responsive.scss b/src/settings/_typography-responsive.scss
@@ -2,6 +2,37 @@
 /// @group settings/typography
 ////
 
+/// Whether or not to define font sizes in rem, improving accessibility by
+/// allowing users to adjust the base font-size. This is currently off by
+/// default, but will be enabled by default for projects that do not use
+/// alphagov/govuk_template in the next major release.
+///
+/// If you enable this, you should make sure that `$govuk-root-font-size` is set
+/// correctly for your project.
+///
+/// @type Boolean
+/// @access public
+
+$govuk-typography-use-rem: false !default;
+
+/// Root font size
+///
+/// This is used to calculate rem sizes for the typography, and should match the
+/// _effective_ font-size of your root (or html) element.
+///
+/// Ideally you should not be setting the font-size on the html or root element
+/// in order to allow it to scale with user-preference, in which case this
+/// should be set to 16px.
+///
+/// If you are integrating Frontend into an existing project that also uses
+/// alphagov/govuk_template then you should set this to 10px to match the 62.5%
+/// (10px) base font size that govuk_template sets on the <html> element.
+///
+/// @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/tools/_all.scss b/src/tools/_all.scss
@@ -5,3 +5,4 @@
 @import "iff";
 @import "image-url";
 @import "px-to-em";
+@import "px-to-rem";
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 (defined in settings/_typography-responsive.scss)
+/// must be configured to match the font-size of 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;
+}