Responsive font size implementation (#23816)

1 files changed, 15 insertions, 15 deletions

diff --git a/scss/_type.scss b/scss/_type.scss
index 37dd967328..f8ed09065e 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 {