Change root font size to use fluid typography

nice-digital · May 24, 2017 · 46c95af · 46c95af
1 parent 2641948
commit 46c95af
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 36 deletions.
diff --git a/src/stylesheets/settings/_settings-variables.scss b/src/stylesheets/settings/_settings-variables.scss
@@ -70,24 +70,23 @@ $nice-breakpoint-lg: 1200px !default;
 /// @since 0.2.0
 $nice-breakpoint-xl: 1600px !default;
 
-/// The default root font size in pixels
-/// @since 0.2.0
-$nice-mobile-root-size: 16 !default;
-
-/// @since 0.2.0
-$nice-breakpoint-xs-root-size: 16 !default;
-
-/// @since 0.2.0
-$nice-breakpoint-sm-root-size: 16 !default;
-
-/// @since 0.2.0
-$nice-breakpoint-md-root-size: 18 !default;
-
-/// @since 0.2.0
-$nice-breakpoint-lg-root-size: 18 !default;
-
-/// @since 0.2.0
-$nice-breakpoint-xl-root-size: 18 !default;
+/// The minimum root font size, in pixels
+/// @since 0.2.13
+$nice-root-font-size-min: 15;
+
+/// The maximum root font size, used from breakpoint `$nice-root-font-size-max-breakpoint`
+/// @since 0.2.13
+$nice-root-font-size-max: 19;
+
+/// The breakpoint at which the root font size starts changing from minimum
+/// towards maximum.
+/// @since 0.2.13
+$nice-root-font-size-min-breakpoint: $nice-breakpoint-md;
+
+/// The breakpoint at which the root font size stops changing and is at its maximum
+/// towards maximum.
+/// @since 0.2.13
+$nice-root-font-size-max-breakpoint: $nice-breakpoint-lg;
 
 /// Whether to output a default set of generic print styles for things
 /// like avoiding page breaks after headings etc. If you disabled this,

diff --git a/src/stylesheets/typography/_typography-global.scss b/src/stylesheets/typography/_typography-global.scss
@@ -12,26 +12,22 @@
 }
 
 html {
-  font-size: percentage($nice-mobile-root-size / $nice-base-font-size);
-
-  @include mq($from: xs) {
-    font-size: percentage($nice-breakpoint-xs-root-size / $nice-base-font-size);
-  }
-
-  @include mq($from: sm) {
-    font-size: percentage($nice-breakpoint-sm-root-size / $nice-base-font-size);
-  }
-
-  @include mq($from: md) {
-    font-size: percentage($nice-breakpoint-md-root-size / $nice-base-font-size);
-  }
-
-  @include mq($from: lg) {
-    font-size: percentage($nice-breakpoint-lg-root-size / $nice-base-font-size);
+  font-size: rem($nice-root-font-size-min);
+
+  @include mq($from: $nice-root-font-size-min-breakpoint) {
+    // sass-lint:disable-block no-duplicate-properties
+
+    // Fallback halfway between max and min for older browsers that don't support calc
+    font-size: rem($nice-root-font-size-min + ($nice-root-font-size-max - $nice-root-font-size-min) / 2);
+    // Follows "fluid typography" rules: https://www.google.co.uk/search?q=fluid%20typography%20vw
+    // ie scales font-size linearly between 2 breakpoints.
+    // Also uses rems so that they're relative to browser font size.
+    // In form: MIN_FONT_SIZE + (MAX_FONT_SIZE - MIN_FONT_SIZE) * (100vw - MIN_SCREEN_SIZE) / (MAX_SCREEN_SIZE - MIN_SCREEN_SIZE)
+    font-size: calc(#{rem($nice-root-font-size-min)} + #{strip-unit(rem($nice-root-font-size-max) - rem($nice-root-font-size-min))} * ((100vw - #{rem($nice-root-font-size-min-breakpoint)}) / #{strip-unit(rem($nice-root-font-size-max-breakpoint) - rem($nice-root-font-size-min-breakpoint))}));
   }
 
-  @include mq($from: xl) {
-    font-size: percentage($nice-breakpoint-xl-root-size / $nice-base-font-size);
+  @include mq($from: $nice-root-font-size-max-breakpoint) {
+    font-size: rem($nice-root-font-size-max);
   }
 }