diff --git a/assets/config/typography.scss b/assets/config/typography.scss
index f1864638..31375c25 100644
--- a/assets/config/typography.scss
+++ b/assets/config/typography.scss
@@ -1,14 +1,11 @@
 @charset 'utf-8';
 
 body {
-  font-size: $font-size-base * 1.125;
+  font-size: 1rem;
+  font-size: clamp( 1rem, calc(0.9375rem + 0.25vw), 1.125rem );
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-
-  @include media-breakpoint-down(sm) { font-size: $font-size-base; }
-
-  @include media-breakpoint-down(xs) { font-size: $font-size-base * 0.875; }
 }
 
 .h1,
@@ -67,11 +64,8 @@ h6,
 }
 
 .lead {
-  font-size: 1.375rem;
-  
-  @include media-breakpoint-down(md) { font-size: 1.25rem; }
-
-  @include media-breakpoint-down(xs) { font-size: 1rem; }
+  font-size: 1.125rem;
+  font-size: clamp( 1rem, calc(0.8125rem + 0.75vw) , 1.375rem );
 }
 
 small {
diff --git a/assets/config/variables.scss b/assets/config/variables.scss
index 15d064aa..172db279 100644
--- a/assets/config/variables.scss
+++ b/assets/config/variables.scss
@@ -34,6 +34,15 @@ $opacities: map.merge((
   "100": 1,
 ), $opacities);
 
+// Font-size
+
+$small-font-size: 0.875rem;
+
+$btn-font-size-sm: 0.875rem;
+$btn-padding-y-sm: 0.375rem;
+$btn-padding-x-sm: 0.75rem;
+$btn-line-height-sm: 1.5;
+
 // Legacy font-size
 $legacy-font-size-xl:   1.25rem;
 $legacy-font-size-lg:   1.125rem;