Responsive font size implementation (#23816)

35 files changed, 324 insertions, 124 deletions

diff --git a/scss/_badge.scss b/scss/_badge.scss
index c727ba5a2..2082f058e 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -6,7 +6,7 @@
 .badge {
   display: inline-block;
   padding: $badge-padding-y $badge-padding-x;
-  font-size: $badge-font-size;
+  @include font-size($badge-font-size);
   font-weight: $badge-font-weight;
   line-height: 1;
   text-align: center;
diff --git a/scss/_close.scss b/scss/_close.scss
index ec6593a88..5cc96f573 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,6 +1,6 @@
 .close {
   float: right;
-  font-size: $close-font-size;
+  @include font-size($close-font-size);
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
diff --git a/scss/_code.scss b/scss/_code.scss
index 9b2e027f4..74b6e1c89 100644
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -1,6 +1,6 @@
 // Inline code
 code {
-  font-size: $code-font-size;
+  @include font-size($code-font-size);
   color: $code-color;
   word-break: break-word;
 
@@ -13,7 +13,7 @@ code {
 // User input typically entered via keyboard
 kbd {
   padding: $kbd-padding-y $kbd-padding-x;
-  font-size: $kbd-font-size;
+  @include font-size($kbd-font-size);
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
@@ -21,7 +21,7 @@ kbd {
 
   kbd {
     padding: 0;
-    font-size: 100%;
+    @include font-size(100%);
     font-weight: $nested-kbd-font-weight;
     @include box-shadow(none);
   }
@@ -30,12 +30,12 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  font-size: $code-font-size;
+  @include font-size($code-font-size);
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
   code {
-    font-size: inherit;
+    @include font-size(inherit);
     color: inherit;
     word-break: normal;
   }
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8af59fd27..03f3fc5be 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -215,7 +215,7 @@
   height: $custom-select-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   font-family: $custom-select-font-family;
-  font-size: $custom-select-font-size;
+  @include font-size($custom-select-font-size);
   font-weight: $custom-select-font-weight;
   line-height: $custom-select-line-height;
   color: $custom-select-color;
@@ -270,7 +270,7 @@
   padding-top: $custom-select-padding-y-sm;
   padding-bottom: $custom-select-padding-y-sm;
   padding-left: $custom-select-padding-x-sm;
-  font-size: $custom-select-font-size-sm;
+  @include font-size($custom-select-font-size-sm);
 }
 
 .custom-select-lg {
@@ -278,7 +278,7 @@
   padding-top: $custom-select-padding-y-lg;
   padding-bottom: $custom-select-padding-y-lg;
   padding-left: $custom-select-padding-x-lg;
-  font-size: $custom-select-font-size-lg;
+  @include font-size($custom-select-font-size-lg);
 }
 
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 5e975c242..ac3c8c8a2 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -24,7 +24,7 @@
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y 0;
   margin: $dropdown-spacer 0 0; // override default ul
-  font-size: $dropdown-font-size;
+  @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
@@ -178,7 +178,7 @@
   display: block;
   padding: $dropdown-padding-y $dropdown-item-padding-x;
   margin-bottom: 0; // for use with heading elements
-  font-size: $font-size-sm;
+  @include font-size($font-size-sm);
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 5f6269ff6..ec9c33559 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -10,7 +10,7 @@
   height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-family: $input-font-family;
-  font-size: $input-font-size;
+  @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: $input-color;
@@ -83,21 +83,21 @@ select.form-control {
   padding-top: calc(#{$input-padding-y} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
   margin-bottom: 0; // Override the `<label>/<legend>` default
-  font-size: inherit; // Override the `<legend>` default
+  @include font-size(inherit); // Override the `<legend>` default
   line-height: $input-line-height;
 }
 
 .col-form-label-lg {
   padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
-  font-size: $input-font-size-lg;
+  @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
   padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
-  font-size: $input-font-size-sm;
+  @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
 }
 
@@ -137,7 +137,7 @@ select.form-control {
 .form-control-sm {
   height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
-  font-size: $input-font-size-sm;
+  @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
@@ -145,7 +145,7 @@ select.form-control {
 .form-control-lg {
   height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
-  font-size: $input-font-size-lg;
+  @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
diff --git a/scss/_images.scss b/scss/_images.scss
index 8e69b772f..cb9795e27 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -37,6 +37,6 @@
 }
 
 .figure-caption {
-  font-size: $figure-caption-font-size;
+  @include font-size($figure-caption-font-size);
   color: $figure-caption-color;
 }
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index cf4d4436f..ac49f696c 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -104,7 +104,7 @@
   align-items: center;
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
-  font-size: $input-font-size; // Match inputs
+  @include font-size($input-font-size); // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-group-addon-color;
@@ -139,7 +139,7 @@
 .input-group-lg > .input-group-prepend > .btn,
 .input-group-lg > .input-group-append > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
-  font-size: $input-font-size-lg;
+  @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
@@ -156,7 +156,7 @@
 .input-group-sm > .input-group-prepend > .btn,
 .input-group-sm > .input-group-append > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
-  font-size: $input-font-size-sm;
+  @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 254986cde..cc957843f 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,6 +2,9 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
+// Vendor
+@import "vendor/rfs";
+
 // Deprecate
 @import "mixins/deprecate";
 
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index fb26847ee..5c6e96399 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -44,7 +44,7 @@
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-padding-x;
-  font-size: $navbar-brand-font-size;
+  @include font-size($navbar-brand-font-size);
   line-height: inherit;
   white-space: nowrap;
 
@@ -107,7 +107,7 @@
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
-  font-size: $navbar-toggler-font-size;
+  @include font-size($navbar-toggler-font-size);
   line-height: 1;
   background-color: transparent; // remove default button style
   border: $border-width solid transparent; // remove default button style
diff --git a/scss/_popover.scss b/scss/_popover.scss
index ae8510eb5..f205e6681 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -8,7 +8,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $popover-font-size;
+  @include font-size($popover-font-size);
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: $popover-bg;
@@ -153,7 +153,7 @@
 .popover-header {
   padding: $popover-header-padding-y $popover-header-padding-x;
   margin-bottom: 0; // Reset the default from Reboot
-  font-size: $font-size-base;
+  @include font-size($font-size-base);
   color: $popover-header-color;
   background-color: $popover-header-bg;
   border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 6247abe3f..ab9ea0ffb 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -10,7 +10,7 @@
   display: flex;
   height: $progress-height;
   overflow: hidden; // force rounded corners by cropping it
-  font-size: $progress-font-size;
+  @include font-size($progress-font-size);
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index de7a14371..c55d42e44 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -46,7 +46,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
 body {
   margin: 0; // 1
   font-family: $font-family-base;
-  font-size: $font-size-base;
+  @include font-size($font-size-base);
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   color: $body-color;
@@ -155,7 +155,7 @@ strong {
 }
 
 small {
-  font-size: 80%; // Add the correct font size in all browsers
+  @include font-size(80%); // Add the correct font size in all browsers
 }
 
 //
@@ -166,7 +166,7 @@ small {
 sub,
 sup {
   position: relative;
-  font-size: 75%;
+  @include font-size(75%);
   line-height: 0;
   vertical-align: baseline;
 }
@@ -220,7 +220,7 @@ code,
 kbd,
 samp {
   font-family: $font-family-monospace;
-  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
 }
 
 pre {
@@ -317,7 +317,7 @@ optgroup,
 textarea {
   margin: 0; // Remove the margin in Firefox and Safari
   font-family: inherit;
-  font-size: inherit;
+  @include font-size(inherit);
   line-height: inherit;
 }
 
@@ -416,7 +416,7 @@ legend {
   max-width: 100%; // 1
   padding: 0;
   margin-bottom: .5rem;
-  font-size: 1.5rem;
+  @include font-size(1.5rem);
   line-height: inherit;
   color: inherit; // 2
   white-space: normal; // 1
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index b781892ee..6aa5352a3 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,7 +1,7 @@
 .toast {
   max-width: $toast-max-width;
   overflow: hidden; // cheap rounded corners on nested items
-  font-size: $toast-font-size; // knock it down to 14px
+  @include font-size($toast-font-size);
   color: $toast-color;
   background-color: $toast-background-color;
   background-clip: padding-box;
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 1286ebfcf..6b3aa62dd 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -7,7 +7,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $tooltip-font-size;
+  @include font-size($tooltip-font-size);
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
diff --git a/scss/_type.scss b/scss/_type.scss
index 37dd96732..f8ed09065 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6,
   color: $headings-color;
 }
 
-h1, .h1 { font-size: $h1-font-size; }
-h2, .h2 { font-size: $h2-font-size; }
-h3, .h3 { font-size: $h3-font-size; }
-h4, .h4 { font-size: $h4-font-size; }
-h5, .h5 { font-size: $h5-font-size; }
-h6, .h6 { font-size: $h6-font-size; }
+h1, .h1 { @include font-size($h1-font-size); }
+h2, .h2 { @include font-size($h2-font-size); }
+h3, .h3 { @include font-size($h3-font-size); }
+h4, .h4 { @include font-size($h4-font-size); }
+h5, .h5 { @include font-size($h5-font-size); }
+h6, .h6 { @include font-size($h6-font-size); }
 
 .lead {
-  font-size: $lead-font-size;
+  @include font-size($lead-font-size);
   font-weight: $lead-font-weight;
 }
 
 // Type display classes
 .display-1 {
-  font-size: $display1-size;
+  @include font-size($display1-size);
   font-weight: $display1-weight;
   line-height: $display-line-height;
 }
 .display-2 {
-  font-size: $display2-size;
+  @include font-size($display2-size);
   font-weight: $display2-weight;
   line-height: $display-line-height;
 }
 .display-3 {
-  font-size: $display3-size;
+  @include font-size($display3-size);
   font-weight: $display3-weight;
   line-height: $display-line-height;
 }
 .display-4 {
-  font-size: $display4-size;
+  @include font-size($display4-size);
   font-weight: $display4-weight;
   line-height: $display-line-height;
 }
@@ -66,7 +66,7 @@ hr {
 
 small,
 .small {
-  font-size: $small-font-size;
+  @include font-size($small-font-size);
   font-weight: $font-weight-normal;
 }
 
@@ -104,19 +104,19 @@ mark,
 
 // Builds on `abbr`
 .initialism {
-  font-size: 90%;
+  @include font-size(90%);
   text-transform: uppercase;
 }
 
 // Blockquotes
 .blockquote {
   margin-bottom: $spacer;
-  font-size: $blockquote-font-size;
+  @include font-size($blockquote-font-size);
 }
 
 .blockquote-footer {
   display: block;
-  font-size: $blockquote-small-font-size;
+  @include font-size($blockquote-small-font-size);
   color: $blockquote-small-color;
 
   &::before {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6805df2b7..d9e88df9a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -116,6 +116,7 @@ $enable-hover-media-query:                    false !default; // Deprecated, no
 $enable-grid-classes:                         true !default;
 $enable-pointer-cursor-for-buttons:           true !default;
 $enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
 $enable-validation-icons:                     true !default;
 $enable-deprecation-messages:                 true !default;
 
@@ -487,14 +488,13 @@ $input-plaintext-color:                 $body-color !default;
 
 $input-height-border:                   $input-border-width * 2 !default;
 
-$input-height-inner:                    ($input-font-size * $input-line-height) + ($input-padding-y * 2) !default;
-$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
 
-$input-height-inner-sm:                 ($input-font-size-sm * $input-line-height-sm) + ($input-padding-y-sm * 2) !default;
-$input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
-
-$input-height-inner-lg:                 ($input-font-size-lg * $input-line-height-lg) + ($input-padding-y-lg * 2) !default;
-$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
+$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
+$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -577,9 +577,9 @@ $custom-select-indicator-color:     $gray-800 !default;
 $custom-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 $custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
-$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
 $custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size:          ($input-height-inner / 2) ($input-height-inner / 2) !default;
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
 
 $custom-select-border-width:        $input-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c6bc523cd..eee903f83 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -100,7 +100,7 @@
 // Button sizes
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   padding: $padding-y $padding-x;
-  font-size: $font-size;
+  @include font-size($font-size);
   line-height: $line-height;
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 8e0607ffe..ea8a91a02 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -31,7 +31,7 @@
     display: none;
     width: 100%;
     margin-top: $form-feedback-margin-top;
-    font-size: $form-feedback-font-size;
+    @include font-size($form-feedback-font-size);
     color: $color;
   }
 
@@ -43,7 +43,7 @@
     max-width: 100%; // Contain to parent when possible
     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    font-size: $form-feedback-tooltip-font-size;
+    @include font-size($form-feedback-tooltip-font-size);
     line-height: $form-feedback-tooltip-line-height;
     color: color-yiq($color);
     background-color: rgba($color, $form-feedback-tooltip-opacity);
@@ -59,8 +59,8 @@
         padding-right: $input-height-inner;
         background-image: $icon;
         background-repeat: no-repeat;
-        background-position: center right calc(#{$input-height-inner} / 4);
-        background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
+        background-position: center right $input-height-inner-quarter;
+        background-size: $input-height-inner-half $input-height-inner-half;
       }
 
       &:focus {
@@ -81,7 +81,7 @@
     &.is-#{$state} {
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
-        background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index ff36eb6b4..af8e16d6a 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -3,7 +3,7 @@
 @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
-    font-size: $font-size;
+    @include font-size($font-size);
     line-height: $line-height;
   }
 
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss
new file mode 100644
index 000000000..c541a8582
--- /dev/null
+++ b/scss/vendor/_rfs.scss
@@ -0,0 +1,212 @@
+// stylelint-disable property-blacklist, scss/dollar-variable-default
+
+// SCSS RFS mixin
+//
+// Automated font-resizing
+//
+// See https://github.com/twbs/rfs
+
+// Configuration
+
+// Base font size
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+// Resize font-size based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
+}
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: unit($rfs-base-font-size);
+
+// Remove px-unit from $rfs-base-font-size for calculations
+@if $rfs-base-font-size-unit == "px" {
+  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+}
+@else if $rfs-base-font-size-unit == "rem" {
+  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == "px" {
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+}
+@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+}
+
+// Responsive font-size mixin
+@mixin rfs($fs, $important: false) {
+  // Cache $fs unit
+  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+
+  // Add !important suffix if needed
+  $rfs-suffix: if($important, " !important", "");
+
+  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+  @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
+    font-size: #{$fs}#{$rfs-suffix};
+  }
+  @else {
+    // Variables for storing static and fluid rescaling
+    $rfs-static: null;
+    $rfs-fluid: null;
+
+    // Remove px-unit from $fs for calculations
+    @if $fs-unit == "px" {
+      $fs: $fs / ($fs * 0 + 1);
+    }
+    @else if $fs-unit == "rem" {
+      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+    }
+
+    // Set default font-size
+    @if $rfs-font-size-unit == rem {
+      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+    }
+    @else if $rfs-font-size-unit == px {
+      $rfs-static: #{$fs}px#{$rfs-suffix};
+    }
+    @else {
+      @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+    }
+
+    // Only add media query if font-size is bigger as the minimum font-size
+    // If $rfs-factor == 1, no rescaling will take place
+    @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
+      $min-width: null;
+      $variable-unit: null;
+
+      // Calculate minimum font-size for given font-size
+      $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
+
+      // Calculate difference between given font-size and minimum font-size for given font-size
+      $fs-diff: $fs - $fs-min;
+
+      // Base font-size formatting
+      // No need to check if the unit is valid, because we did that before
+      $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+
+      // If two-dimensional, use smallest of screen width and height
+      $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+      // Calculate the variable width between 0 and $rfs-breakpoint
+      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+
+      // Set the calculated font-size.
+      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+    }
+
+    // Rendering
+    @if $rfs-fluid == null {
+      // Only render static font-size if no fluid font-size is available
+      font-size: $rfs-static;
+    }
+    @else {
+      $mq-value: null;
+
+      // RFS breakpoint formatting
+      @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
+        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
+      }
+      @else if $rfs-breakpoint-unit == px {
+        $mq-value: #{$rfs-breakpoint}px;
+      }
+      @else {
+        @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+      }
+
+      @if $rfs-class == "disable" {
+        // Adding an extra class increases specificity,
+        // which prevents the media query to override the font size
+        &,
+        .disable-responsive-font-size &,
+        &.disable-responsive-font-size {
+          font-size: $rfs-static;
+        }
+      }
+      @else {
+        font-size: $rfs-static;
+      }
+
+      @if $rfs-two-dimensional {
+        @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+          @if $rfs-class == "enable" {
+            .enable-responsive-font-size &,
+            &.enable-responsive-font-size {
+              font-size: $rfs-fluid;
+            }
+          }
+          @else {
+            font-size: $rfs-fluid;
+          }
+
+          @if $rfs-safari-iframe-resize-bug-fix {
+            // stylelint-disable-next-line length-zero-no-unit
+            min-width: 0vw;
+          }
+        }
+      }
+      @else {
+        @media (max-width: #{$mq-value}) {
+          @if $rfs-class == "enable" {
+            .enable-responsive-font-size &,
+            &.enable-responsive-font-size {
+              font-size: $rfs-fluid;
+            }
+          }
+          @else {
+            font-size: $rfs-fluid;
+          }
+
+          @if $rfs-safari-iframe-resize-bug-fix {
+            // stylelint-disable-next-line length-zero-no-unit
+            min-width: 0vw;
+          }
+        }
+      }
+    }
+  }
+}
+
+// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
+@mixin font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
+$rfs-is-included: false !default;
+
+@if $rfs-is-included {
+  @warn "Watch out, RFS is included more than once!";
+}
+
+$rfs-is-included: true;
diff --git a/site/docs/4.2/assets/scss/_ads.scss b/site/docs/4.2/assets/scss/_ads.scss
index c207f1682..0c08025c2 100644
--- a/site/docs/4.2/assets/scss/_ads.scss
+++ b/site/docs/4.2/assets/scss/_ads.scss
@@ -11,7 +11,7 @@
   padding: 15px 15px 15px 160px;
   margin: 2rem 0;
   overflow: hidden;
-  font-size: 13px;
+  @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
   background-color: rgba(0, 0, 0, .05);
diff --git a/site/docs/4.2/assets/scss/_algolia.scss b/site/docs/4.2/assets/scss/_algolia.scss
index e523dec8e..23781da12 100644
--- a/site/docs/4.2/assets/scss/_algolia.scss
+++ b/site/docs/4.2/assets/scss/_algolia.scss
@@ -47,7 +47,7 @@
   .algolia-docsearch-suggestion--category-header {
     padding: .125rem 1rem !important;
     margin-top: 0 !important;
-    font-size: .875rem !important;
+    @include font-size(.875rem, true);
     font-weight: 600 !important;
     color: $bd-purple-bright !important;
     border-bottom: 0 !important;
@@ -68,7 +68,7 @@
 
   .algolia-docsearch-suggestion--subcategory-inline {
     display: block !important;
-    font-size: .875rem;
+    @include font-size(.875rem);
     color: $gray-700;
 
     &::after {
@@ -107,7 +107,7 @@
   .algolia-docsearch-suggestion--title {
     display: block;
     margin-bottom: 0 !important;
-    font-size: .875rem !important;
+    @include font-size(.875rem, true);
     font-weight: 400 !important;
   }
 
@@ -115,7 +115,7 @@
     flex: 0 0 100%;
     max-width: 100%;
     padding: .2rem 0;
-    font-size: .8125rem !important;
+    @include font-size(.8125rem, true);
     font-weight: 400;
     line-height: 1.25 !important;
     color: $gray-600;
@@ -126,7 +126,7 @@
     width: auto !important;
     height: auto !important;
     padding: .75rem 1rem 0;
-    font-size: .75rem !important;
+    @include font-size(.75rem, true);
     line-height: 1 !important;
     color: #767676 !important;
     border-top: 1px solid rgba(0, 0, 0, .1);
diff --git a/site/docs/4.2/assets/scss/_brand.scss b/site/docs/4.2/assets/scss/_brand.scss
index d7d9f1f09..226d7db17 100644
--- a/site/docs/4.2/assets/scss/_brand.scss
+++ b/site/docs/4.2/assets/scss/_brand.scss
@@ -44,7 +44,7 @@
     }
 
     h1 {
-      font-size: 4rem;
+      @include font-size(4rem);
     }
   }
 }
diff --git a/site/docs/4.2/assets/scss/_clipboard-js.scss b/site/docs/4.2/assets/scss/_clipboard-js.scss
index e2dd56e25..6d4bfeea4 100644
--- a/site/docs/4.2/assets/scss/_clipboard-js.scss
+++ b/site/docs/4.2/assets/scss/_clipboard-js.scss
@@ -23,7 +23,7 @@
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  font-size: 75%;
+  @include font-size(75%);
   color: #818a91;
   background-color: transparent;
   border: 0;
diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss
index 4422a7295..62ebf6953 100644
--- a/site/docs/4.2/assets/scss/_component-examples.scss
+++ b/site/docs/4.2/assets/scss/_component-examples.scss
@@ -406,7 +406,7 @@
     border: 0;
   }
   pre code {
-    font-size: inherit;
+    @include font-size(inherit);
     color: $gray-900; // Effectively the base text color
   }
 }
diff --git a/site/docs/4.2/assets/scss/_content.scss b/site/docs/4.2/assets/scss/_content.scss
index ecd952bd8..723e4587d 100644
--- a/site/docs/4.2/assets/scss/_content.scss
+++ b/site/docs/4.2/assets/scss/_content.scss
@@ -71,6 +71,18 @@
 //
 
 .bd-content {
+  > h2 {
+    @include font-size($h2-font-size);
+  }
+
+  > h3 {
+    @include font-size($h3-font-size);
+  }
+
+  > h4 {
+    @include font-size($h4-font-size);
+  }
+
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
@@ -97,20 +109,15 @@
   margin-top: 1rem;
   margin-bottom: .5rem;
   font-weight: 300;
-
-  @include media-breakpoint-up(sm) {
-    font-size: 3rem;
-  }
+  @include font-size(3rem);
 }
 
 .bd-lead {
-  font-size: 1.125rem;
+  @include font-size(1.125rem);
   font-weight: 300;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(lg) {
     max-width: 80%;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
   }
 }
 
diff --git a/site/docs/4.2/assets/scss/_footer.scss b/site/docs/4.2/assets/scss/_footer.scss
index c9a8e70e4..29d31df3a 100644
--- a/site/docs/4.2/assets/scss/_footer.scss
+++ b/site/docs/4.2/assets/scss/_footer.scss
@@ -3,7 +3,7 @@
 //
 
 .bd-footer {
-  font-size: 85%;
+  @include font-size(.875rem);
   text-align: center;
   background-color: #f7f7f7;
 
diff --git a/site/docs/4.2/assets/scss/_masthead.scss b/site/docs/4.2/assets/scss/_masthead.scss
index e8007fc3c..f4e70a2cf 100644
--- a/site/docs/4.2/assets/scss/_masthead.scss
+++ b/site/docs/4.2/assets/scss/_masthead.scss
@@ -6,12 +6,14 @@
   // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
+    @include font-size(4rem);
     line-height: 1;
   }
 
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
+    @include font-size(1.25rem);
   }
 
   .carbonad {
@@ -29,10 +31,6 @@
   }
 
   @include media-breakpoint-up(md) {
-    h1 {
-      font-size: 4rem;
-    }
-
     .carbonad {
       margin-top: 3rem !important;
     }
diff --git a/site/docs/4.2/assets/scss/_nav.scss b/site/docs/4.2/assets/scss/_nav.scss
index 5ca226f7b..c3fdc8e5f 100644
--- a/site/docs/4.2/assets/scss/_nav.scss
+++ b/site/docs/4.2/assets/scss/_nav.scss
@@ -16,7 +16,6 @@
       height: 2.5rem;
       margin-top: .25rem;
       overflow: hidden;
-      font-size: .875rem;
 
       .navbar-nav {
         padding-bottom: 2rem;
@@ -61,7 +60,7 @@
   }
 
   .dropdown-menu {
-    font-size: .875rem;
+    @include font-size(.875rem);
   }
 
   .dropdown-item.active {
diff --git a/site/docs/4.2/assets/scss/_placeholder-img.scss b/site/docs/4.2/assets/scss/_placeholder-img.scss
index a9f8a41cb..3fe6a8bba 100644
--- a/site/docs/4.2/assets/scss/_placeholder-img.scss
+++ b/site/docs/4.2/assets/scss/_placeholder-img.scss
@@ -5,12 +5,10 @@
 // Remember to update `site/_layouts/examples.html` too if this changes!
 
 .bd-placeholder-img {
-  font-size: 1.125rem;
+  @include font-size(1.125rem);
   text-anchor: middle;
 }
 
 .bd-placeholder-img-lg {
-  @include media-breakpoint-up(md) {
-    font-size: 3.5rem;
-  }
+  @include font-size(3.5rem);
 }
diff --git a/site/docs/4.2/assets/scss/_sidebar.scss b/site/docs/4.2/assets/scss/_sidebar.scss
index 5af636f7e..b302b22fe 100644
--- a/site/docs/4.2/assets/scss/_sidebar.scss
+++ b/site/docs/4.2/assets/scss/_sidebar.scss
@@ -14,7 +14,7 @@
   order: 2;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
-  font-size: .875rem;
+  @include font-size(.875rem);
 }
 
 .section-nav {
@@ -144,7 +144,7 @@
 .bd-sidebar .nav > li > a {
   display: block;
   padding: .25rem 1.5rem;
-  font-size: 90%;
+  @include font-size(90%);
   color: rgba(0, 0, 0, .65);
 }
 
diff --git a/site/docs/4.2/assets/scss/_variables.scss b/site/docs/4.2/assets/scss/_variables.scss
index b60a21368..e8bf3728d 100644
--- a/site/docs/4.2/assets/scss/_variables.scss
+++ b/site/docs/4.2/assets/scss/_variables.scss
@@ -7,3 +7,9 @@ $bd-download:      #ffe484 !default;
 $bd-info:          #5bc0de !default;
 $bd-warning:       #f0ad4e !default;
 $bd-danger:        #d9534f !default;
+
+// Enable responsive font sizes for font sizes defined in the docs
+// The weird if test is made as a workaround to prevent a false fusv error.
+//
+// stylelint-disable-next-line scss/dollar-variable-default
+$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
diff --git a/site/docs/4.2/content/typography.md b/site/docs/4.2/content/typography.md
index 2451367e0..19a783d8e 100644
--- a/site/docs/4.2/content/typography.md
+++ b/site/docs/4.2/content/typography.md
@@ -104,7 +104,7 @@ Use the included utility classes to recreate the small secondary heading text fr
 
 ## Display headings
 
-Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
 
 <div class="bd-example bd-example-type">
   <table class="table">
@@ -294,32 +294,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
 {% endcapture %}
 {% include example.html content=example %}
 
-## Responsive typography
+## Responsive font sizes
 
-*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap.
 
-Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
-
-{% highlight scss %}
-html {
-  font-size: 1rem;
-}
-
-@include media-breakpoint-up(sm) {
-  html {
-    font-size: 1.2rem;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  html {
-    font-size: 1.4rem;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  html {
-    font-size: 1.6rem;
-  }
-}
-{% endhighlight %}
+To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs).
diff --git a/site/docs/4.2/getting-started/theming.md b/site/docs/4.2/getting-started/theming.md
index a40b6395a..8e3339c15 100644
--- a/site/docs/4.2/getting-started/theming.md
+++ b/site/docs/4.2/getting-started/theming.md
@@ -242,6 +242,7 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-caret`                              | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-pointer-cursor-for-buttons`         | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
 | `$enable-print-styles`                       | `true` (default) or `false`        | Enables styles for optimizing printing. |
+| `$enable-responsive-font-sizes`              | `true` or `false` (default)        | Enables [responsive font sizes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#responsive-font-sizes). |
 | `$enable-validation-icons`                   | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
 | `$enable-deprecation-messages`               | `true` or `false` (default)        | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |