diff --git a/sass/base/_accessibility.scss b/sass/base/_accessibility.scss
index 56a8b74f..8b316631 100644
--- a/sass/base/_accessibility.scss
+++ b/sass/base/_accessibility.scss
@@ -33,7 +33,7 @@
     clip-path: none;
     display: block;
     font-size: 1.7rem;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-weight-bold);
     height: auto;
     left: .5rem;
     line-height: normal;
diff --git a/sass/components/_button-size-large.scss b/sass/components/_button-size-large.scss
index 5dae58a5..a9e9595d 100644
--- a/sass/components/_button-size-large.scss
+++ b/sass/components/_button-size-large.scss
@@ -1,6 +1,6 @@
 // stylelint-disable number-max-precision, rem-over-px/rem-over-px
 @mixin button-size-large() {
-  font-size: var(--font-size-18);
+  font-size: var(--typography-size-18);
   line-height: 1.66;
   padding-bottom: calc(17px - calc(var(--border-width-input-field) * 2));
   padding-left: calc(21px - calc(var(--border-width-input-field) * 2));
diff --git a/sass/components/_button-size-small.scss b/sass/components/_button-size-small.scss
index 98e3537d..895e43d4 100644
--- a/sass/components/_button-size-small.scss
+++ b/sass/components/_button-size-small.scss
@@ -1,6 +1,6 @@
 // stylelint-disable number-max-precision, rem-over-px/rem-over-px
 @mixin button-size-small() {
-  font-size: var(--font-size-16);
+  font-size: var(--typography-size-16);
   line-height: 20.9091px;
   padding-bottom: calc(10px - calc(var(--border-width-input-field) * 2));
   padding-left: calc(21px - calc(var(--border-width-input-field) * 2));
diff --git a/sass/components/_button.scss b/sass/components/_button.scss
index 03b5367c..7c8b27e0 100644
--- a/sass/components/_button.scss
+++ b/sass/components/_button.scss
@@ -8,8 +8,8 @@
   cursor: pointer;
   display: inline-block;
   font-family: var(--font-paragraph);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--typography-size-16);
+  font-weight: var(--typography-weight-semibold);
   line-height: 1.39;
   margin-bottom: 0;
   max-width: 23rem;
diff --git a/sass/features/_gravity-forms.scss b/sass/features/_gravity-forms.scss
index 8f927d19..8b3e660a 100644
--- a/sass/features/_gravity-forms.scss
+++ b/sass/features/_gravity-forms.scss
@@ -6,8 +6,8 @@
 div.validation_error {
   background-color: var(--color-error);
   color: var(--color-white);
-  font-size: var(--font-size-17);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--typography-size-17);
+  font-weight: var(--typography-weight-bold);
   margin-bottom: var(--form-row-gap);
   padding: 2rem;
 
@@ -22,8 +22,8 @@ body *[aria-invalid="true"] {
 
 .validation_message {
   color: var(--color-error);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-regular);
+  font-size: var(--typography-size-16);
+  font-weight: var(--typography-weight-regular);
 }
 
 .validation_list {
@@ -39,7 +39,7 @@ body *[aria-invalid="true"] {
 
   li {
     color: var(--color-error);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--typography-weight-bold);
   }
 }
 
@@ -51,7 +51,7 @@ body *[aria-invalid="true"] {
 
 // Default required label
 .gfield_required.gfield_required_asterisk {
-  font-size: var(--font-size-required-asterisk-label);
+  font-size: var(--typography-size-required-asterisk-label);
 }
 
 .gfield_required.gfield_required_asterisk,
@@ -60,7 +60,7 @@ body *[aria-invalid="true"] {
 }
 
 .gfield_required.gfield_required_text {
-  font-size: var(--font-size-required-text-label);
+  font-size: var(--typography-size-required-text-label);
 }
 
 // Gravity forms minimal default styles
@@ -188,7 +188,7 @@ body *[aria-invalid="true"] {
   background-color: transparent;
   border: 2px solid var(--color-success);
   color: var(--color-success);
-  font-size: var(--font-size-paragraph);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--typography-size-paragraph);
+  font-weight: var(--typography-weight-semibold);
   padding: 2rem;
 }
diff --git a/sass/features/_pagination.scss b/sass/features/_pagination.scss
index bf3c98ca..46b8b3e0 100644
--- a/sass/features/_pagination.scss
+++ b/sass/features/_pagination.scss
@@ -32,7 +32,7 @@
   border-top: 2px solid var(--color-blue-chalk);
   color: var(--color-pagination-text);
   display: flex;
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--typography-weight-medium);
   height: 3.5rem;
   justify-content: center;
   margin-left: 0;
diff --git a/sass/features/_top.scss b/sass/features/_top.scss
index 79d30a5c..7a1caee3 100644
--- a/sass/features/_top.scss
+++ b/sass/features/_top.scss
@@ -4,16 +4,16 @@
   --color-background-top-hover: #f0f0f0;
   background-color: var(--color-background-top);
   border-radius: 2px;
-  bottom: var(--padding-container-horizontal);
+  bottom: var(--spacing-container-padding-inline);
   color: var(--color-black);
   cursor: pointer;
-  font-size: var(--font-size-16);
+  font-size: var(--typography-size-16);
   height: 3rem;
   // stylelint-disable-next-line rem-over-px/rem-over-px
   line-height: 30px;
   opacity: 0;
   position: fixed;
-  right: var(--padding-container-horizontal);
+  right: var(--spacing-container-padding-inline);
   text-align: center;
   text-decoration: none;
   transition: 500ms opacity;
diff --git a/sass/global.scss b/sass/global.scss
index 95f427ad..0a36546f 100644
--- a/sass/global.scss
+++ b/sass/global.scss
@@ -17,7 +17,7 @@
 @import 'variables/breakpoints';
 @import 'variables/font-face';
 @import 'variables/font-family';
-@import 'variables/font-size';
+@import 'variables/typography-size';
 @import 'variables/forms';
 @import 'variables/spacings';
 
diff --git a/sass/gutenberg-editor-styles.scss b/sass/gutenberg-editor-styles.scss
index 9e250f61..346b7f7c 100644
--- a/sass/gutenberg-editor-styles.scss
+++ b/sass/gutenberg-editor-styles.scss
@@ -17,7 +17,7 @@
 @import 'variables/colors';
 @import 'variables/breakpoints';
 @import 'variables/font-family';
-@import 'variables/font-size';
+@import 'variables/typography-size';
 @import 'variables/forms';
 @import 'variables/spacings';
 
diff --git a/sass/gutenberg/_editor.scss b/sass/gutenberg/_editor.scss
index 1fac1ba7..0a2fd8d0 100644
--- a/sass/gutenberg/_editor.scss
+++ b/sass/gutenberg/_editor.scss
@@ -81,8 +81,8 @@
   .wp-block-gallery,
   .wp-block.editor-post-title {
     @media (max-width: $width-max-article + 40px) {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
       width: 100%;
 
       &.alignleft,
@@ -103,12 +103,12 @@
 
   // Full width gallery should be always be with paddings
   .wp-block[data-align="full"] > .wp-block-gallery {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
     }
   }
 
diff --git a/sass/gutenberg/blocks/_boxed.scss b/sass/gutenberg/blocks/_boxed.scss
index 53397ca8..ffcf9848 100644
--- a/sass/gutenberg/blocks/_boxed.scss
+++ b/sass/gutenberg/blocks/_boxed.scss
@@ -3,10 +3,10 @@
 .is-style-boxed {
   border: 2px solid var(--color-paragraph);
   color: var(--color-paragraph);
-  font-size: var(--font-size-17);
+  font-size: var(--typography-size-17);
   font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-paragraph);
+  font-weight: var(--typography-weight-medium);
+  line-height: var(--typography-paragraph-line-height);
   padding: 2rem;
   width: calc(100% - 4rem);
 }
diff --git a/sass/gutenberg/blocks/_core-blockquote.scss b/sass/gutenberg/blocks/_core-blockquote.scss
index 6339109d..3f97a525 100644
--- a/sass/gutenberg/blocks/_core-blockquote.scss
+++ b/sass/gutenberg/blocks/_core-blockquote.scss
@@ -14,7 +14,7 @@ blockquote {
   p {
     color: var(--color-paragraph);
     font-style: normal;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-weight-semibold);
     margin-bottom: 0;
     overflow: visible;
     position: relative;
@@ -28,7 +28,7 @@ blockquote {
 
 .wp-block-quote {
   border-left: 2px solid var(--color-paragraph);
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
   margin-bottom: 4rem;
   margin-left: auto;
   margin-right: auto;
@@ -38,12 +38,12 @@ blockquote {
 
   > p {
     color: var(--color-paragraph);
-    line-height: var(--line-height-paragraph);
+    line-height: var(--typography-paragraph-line-height);
   }
 
   @media (max-width: $width-max-article + 40px) {
     padding: 3.5rem 2rem;
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 
   @media (max-width: $container-mobile) {
@@ -53,9 +53,9 @@ blockquote {
 
 .wp-block-blockquote.alignwide,
 .wp-block-blockquote.alignfull {
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 .wp-block-blockquote blockquote {
diff --git a/sass/gutenberg/blocks/_core-columns.scss b/sass/gutenberg/blocks/_core-columns.scss
index cce3abdb..d3afbee1 100644
--- a/sass/gutenberg/blocks/_core-columns.scss
+++ b/sass/gutenberg/blocks/_core-columns.scss
@@ -14,8 +14,8 @@ h3 {
 
 @for $i from 1 through 9 {
   .wp-block-columns.has-#{$i}-columns.alignfull {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
   }
 
diff --git a/sass/gutenberg/blocks/_core-heading.scss b/sass/gutenberg/blocks/_core-heading.scss
index aef888ac..c06c54d8 100644
--- a/sass/gutenberg/blocks/_core-heading.scss
+++ b/sass/gutenberg/blocks/_core-heading.scss
@@ -6,7 +6,7 @@ h2,
 h3,
 h4,
 h5 {
-  line-height: var(--line-height-core-heading);
+  line-height: var(--typography-core-heading-line-height);
 }
 
 // Don't add extra margin on top of first title
diff --git a/sass/gutenberg/blocks/_core-image.scss b/sass/gutenberg/blocks/_core-image.scss
index eb4fedef..103ca574 100644
--- a/sass/gutenberg/blocks/_core-image.scss
+++ b/sass/gutenberg/blocks/_core-image.scss
@@ -1,8 +1,8 @@
 // Image block
 .wp-block-image {
   display: block;
-  margin-bottom: var(--margin-wp-block-image);
-  margin-top: var(--margin-wp-block-image);
+  margin-bottom: var(--spacing-wp-block-image-margin-block);
+  margin-top: var(--spacing-wp-block-image-margin-block);
 
   &.alignwide,
   &.alignfull {
@@ -48,7 +48,7 @@
 
   @media (max-width: $width-grid-base + 40px) {
     &.alignwide {
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 
diff --git a/sass/gutenberg/blocks/_core-list.scss b/sass/gutenberg/blocks/_core-list.scss
index 5c2cd6ec..9a4a5682 100644
--- a/sass/gutenberg/blocks/_core-list.scss
+++ b/sass/gutenberg/blocks/_core-list.scss
@@ -2,7 +2,7 @@
 ul,
 ol {
   list-style-position: outside;
-  width: calc((100% - calc(var(--padding-container-horizontal) * 2)));
+  width: calc((100% - calc(var(--spacing-container-padding-inline) * 2)));
 }
 
 ul {
diff --git a/sass/gutenberg/blocks/_core-paragraph.scss b/sass/gutenberg/blocks/_core-paragraph.scss
index 7e03e5a5..c3970ef9 100644
--- a/sass/gutenberg/blocks/_core-paragraph.scss
+++ b/sass/gutenberg/blocks/_core-paragraph.scss
@@ -1,23 +1,23 @@
 // Core/paragraph block
 .has-larger-font-size,
 .has-large-font-size {
-  line-height: var(--line-height-heading);
+  line-height: var(--typography-heading-line-height);
 }
 
 .has-large-font-size {
   @media (max-width: $container-mobile) {
-    font-size: var(--font-size-18);
+    font-size: var(--typography-size-18);
   }
 }
 
 .has-larger-font-size {
   @media (max-width: $container-mobile) {
-    font-size: var(--font-size-22);
+    font-size: var(--typography-size-22);
   }
 }
 
 @media (max-width: $width-grid-base + 40px) {
   .has-background {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-pullquote.scss b/sass/gutenberg/blocks/_core-pullquote.scss
index 9ee420a8..d123afbf 100644
--- a/sass/gutenberg/blocks/_core-pullquote.scss
+++ b/sass/gutenberg/blocks/_core-pullquote.scss
@@ -11,7 +11,7 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
@@ -25,13 +25,13 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
   }
 }
 
 .wp-block-pullquote.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
diff --git a/sass/gutenberg/blocks/_core-table.scss b/sass/gutenberg/blocks/_core-table.scss
index fc034b09..435c7e16 100644
--- a/sass/gutenberg/blocks/_core-table.scss
+++ b/sass/gutenberg/blocks/_core-table.scss
@@ -4,7 +4,7 @@ th {
   backface-visibility: hidden;
   background-color: var(--color-scorpion);
   color: var(--color-white);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--typography-weight-bold);
   overflow: hidden;
   text-align: left;
 }
@@ -19,7 +19,7 @@ th,
 .wp-block-table th {
   border: 0;
   font-family: var(--font-paragraph);
-  font-size: var(--font-size-14);
+  font-size: var(--typography-size-14);
   height: 2rem;
   padding: .6rem 1.5rem;
 }
@@ -55,20 +55,20 @@ table {
 
 .wp-block-table {
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
 .wp-block-table.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-table.alignwide {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-video.scss b/sass/gutenberg/blocks/_core-video.scss
index b583863f..3a8a17d0 100644
--- a/sass/gutenberg/blocks/_core-video.scss
+++ b/sass/gutenberg/blocks/_core-video.scss
@@ -6,7 +6,7 @@
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-video.alignwide {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
diff --git a/sass/gutenberg/blocks/_error.scss b/sass/gutenberg/blocks/_error.scss
index c8f43363..b6f88789 100644
--- a/sass/gutenberg/blocks/_error.scss
+++ b/sass/gutenberg/blocks/_error.scss
@@ -11,14 +11,14 @@
   }
 
   p {
-    font-size: var(--font-size-14);
+    font-size: var(--typography-size-14);
   }
 
   p.error-message {
-    font-size: var(--font-size-16);
+    font-size: var(--typography-size-16);
   }
 
   h2 {
-    font-size: var(--font-size-h4);
+    font-size: var(--typography-size-h4);
   }
 }
diff --git a/sass/gutenberg/formatting/_align.scss b/sass/gutenberg/formatting/_align.scss
index 58aa66d0..913b3445 100644
--- a/sass/gutenberg/formatting/_align.scss
+++ b/sass/gutenberg/formatting/_align.scss
@@ -11,7 +11,7 @@
 
   .alignleft > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-right: var(--padding-container-horizontal);
+    margin-right: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -21,7 +21,7 @@
 
   .alignright > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-left: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -31,8 +31,8 @@
 
   .alignwide {
     max-width: $width-wide;
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
 
     @media (min-width: $width-wide + 40px) {
@@ -52,8 +52,8 @@
     }
 
     @media (min-width: $width-max-article + 40px) {
-      margin-bottom: var(--padding-block);
-      margin-top: var(--padding-block);
+      margin-bottom: var(--spacing-content-padding-block);
+      margin-top: var(--spacing-content-padding-block);
       max-width: $width-full;
       width: $width-full;
     }
diff --git a/sass/gutenberg/formatting/_caption.scss b/sass/gutenberg/formatting/_caption.scss
index 4c2e2939..185daf7e 100644
--- a/sass/gutenberg/formatting/_caption.scss
+++ b/sass/gutenberg/formatting/_caption.scss
@@ -8,7 +8,7 @@
     --color-caption: #5c5c6a;
     border: 0;
     color: var(--color-caption);
-    font-size: var(--font-size-captions);
+    font-size: var(--typography-size-captions);
     font-style: normal;
     margin-bottom: 6rem;
     margin-left: auto;
diff --git a/sass/gutenberg/formatting/_paragraph.scss b/sass/gutenberg/formatting/_paragraph.scss
index 6dc64e89..55d8950f 100644
--- a/sass/gutenberg/formatting/_paragraph.scss
+++ b/sass/gutenberg/formatting/_paragraph.scss
@@ -1,5 +1,5 @@
 // General paragraphs
 p {
   color: var(--color-paragraph);
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
 }
diff --git a/sass/gutenberg/layout/_content.scss b/sass/gutenberg/layout/_content.scss
index 57fa90fd..7d3f4920 100644
--- a/sass/gutenberg/layout/_content.scss
+++ b/sass/gutenberg/layout/_content.scss
@@ -2,29 +2,29 @@
 .editor-styles-wrapper,
 .article-content {
   max-width: 100%;
-  padding-bottom: var(--padding-block);
+  padding-bottom: var(--spacing-content-padding-block);
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-block);
+  padding-top: var(--spacing-content-padding-block);
 }
 
 // Gutenberg core magic
 .article-content > [class^='wp-block-'],
 .is-root-container > *,
 .article-content > * {
-  line-height: var(--line-height-paragraph);
+  line-height: var(--typography-paragraph-line-height);
   margin-left: auto;
   margin-right: auto;
   max-width: $width-max-article;
 
   @media (max-width: $width-max-article + 40px) {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 }
diff --git a/sass/layout/_forms.scss b/sass/layout/_forms.scss
index 29087fd8..4c6df634 100644
--- a/sass/layout/_forms.scss
+++ b/sass/layout/_forms.scss
@@ -33,8 +33,8 @@
 legend,
 label {
   color: var(--color-form-label-text);
-  font-size: var(--font-size-input-fields);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--typography-size-input-fields);
+  font-weight: var(--typography-weight-semibold);
 }
 
 // Unset checkbox and radio button labels
@@ -61,7 +61,7 @@ input[type="search"] {
   border-width: var(--border-width-input-field);
   color: var(--color-form-text);
   font-family: var(--font-paragraph);
-  font-size: var(--font-size-input-fields);
+  font-size: var(--typography-size-input-fields);
   line-height: var(--form-line-height);
   margin-bottom: 0;
   padding-bottom: var(--form-padding-vertical);
@@ -103,7 +103,7 @@ select {
   border-width: var(--border-width-input-field);
   color: var(--color-form-text);
   font-family: var(--font-paragraph);
-  font-size: var(--font-size-input-fields);
+  font-size: var(--typography-size-input-fields);
   line-height: var(--form-line-height);
   max-width: 100%;
   min-width: 0;
diff --git a/sass/layout/_general.scss b/sass/layout/_general.scss
index ed361961..8a245a10 100644
--- a/sass/layout/_general.scss
+++ b/sass/layout/_general.scss
@@ -65,16 +65,16 @@ body {
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-container-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-container-vertical);
+  padding-bottom: var(--spacing-container-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-container-padding-block);
 
   // If base grid is larger than Macbook Air screen
   @if $width-grid-base > 1440 {
     @media (min-width: $container-ipad-landscape) and (max-width: 140rem + 6.4rem) {
-      padding-left: var(--padding-container-horizontal-large);
-      padding-right: var(--padding-container-horizontal-large);
+      padding-left: var(--spacing-container-padding-inline-large);
+      padding-right: var(--spacing-container-padding-inline-large);
     }
   }
 }
diff --git a/sass/layout/_site-footer.scss b/sass/layout/_site-footer.scss
index a36209c4..eb20f72a 100644
--- a/sass/layout/_site-footer.scss
+++ b/sass/layout/_site-footer.scss
@@ -33,7 +33,7 @@
 
   .powered-by-wordpress {
     display: inline-block;
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--typography-weight-semibold);
     margin-bottom: 1rem;
     text-align: center;
   }
diff --git a/sass/layout/_site-header.scss b/sass/layout/_site-header.scss
index 43a6a362..52c7872d 100644
--- a/sass/layout/_site-header.scss
+++ b/sass/layout/_site-header.scss
@@ -8,15 +8,15 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-site-header-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-site-header-vertical);
+  padding-bottom: var(--spacing-site-header-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-site-header-padding-block);
   position: relative;
   z-index: 15;
 
   @media (max-width: $width-max-mobile) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 }
 
@@ -50,12 +50,12 @@
   display: flex;
   // stylelint-disable-next-line
   font-size: clamp(.5rem, 3.4vw, 3rem);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   justify-content: center;
-  margin-bottom: var(--padding-container-vertical);
+  margin-bottom: var(--spacing-container-padding-block);
   margin-left: auto;
   margin-right: auto;
-  margin-top: calc(var(--padding-container-vertical) * 2);
+  margin-top: calc(var(--spacing-container-padding-block) * 2);
   // stylelint-disable-next-line
   max-width: $width-grid-base - 40px;
   opacity: .7;
diff --git a/sass/layout/_typography.scss b/sass/layout/_typography.scss
index 7be05f14..b9b8badb 100644
--- a/sass/layout/_typography.scss
+++ b/sass/layout/_typography.scss
@@ -1,3 +1,28 @@
+// stylelint-disable declaration-property-unit-allowed-list
+// Everything around fonts, font size definitions and typeset
+// presets. No modular scale, but a sophisticated viewport
+// based responsive mixin can be found in _helpers.scss
+
+// Set root size for rems
+:root {
+  font-size: 62.5%;
+}
+
+// Typography settings
+.is-root-container,
+.acf-block-preview .block,
+body {
+  color: var(--color-paragraph);
+  font-family: var(--font-paragraph);
+  font-size: var(--typography-size-paragraph);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: var(--typography-weight-paragraph);
+  line-height: var(--typography-paragraph-line-height);
+  // stylelint-disable-next-line value-keyword-case
+  text-rendering: geometricPrecision;
+}
+
 // Heading defaults
 h1,
 h2,
@@ -7,7 +32,7 @@ h5,
 h6 {
   color: var(--color-heading);
   font-family: var(--font-heading);
-  font-weight: var(--font-weight-heading);
+  font-weight: var(--typography-weight-heading);
   margin-bottom: var(--margin-between-paragraphs);
   margin-top: var(--margin-between-paragraphs);
 }
@@ -17,33 +42,33 @@ h3,
 h4,
 h5,
 h6 {
-  line-height: var(--line-height-heading);
+  line-height: var(--typography-heading-line-height);
 }
 
 // Define heading scales
 // Current: Perfect fourth: https://type-scale.com/
 h1 {
-  font-size: var(--font-size-h1);
+  font-size: var(--typography-size-h1);
 }
 
 h2 {
-  font-size: var(--font-size-h2);
+  font-size: var(--typography-size-h2);
 }
 
 h3 {
-  font-size: var(--font-size-h3);
+  font-size: var(--typography-size-h3);
 }
 
 h4 {
-  font-size: var(--font-size-h4);
+  font-size: var(--typography-size-h4);
 }
 
 h5 {
-  font-size: var(--font-size-h5);
+  font-size: var(--typography-size-h5);
 }
 
 h6 {
-  font-size: var(--font-size-h6);
+  font-size: var(--typography-size-h6);
 }
 
 h1:first-child,
@@ -58,7 +83,7 @@ h6:first-child {
 // Bold
 b,
 strong {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--typography-weight-bold);
 }
 
 // Italic
diff --git a/sass/navigation/_nav-click-desktop.scss b/sass/navigation/_nav-click-desktop.scss
index c8d2042a..a97ebbfa 100644
--- a/sass/navigation/_nav-click-desktop.scss
+++ b/sass/navigation/_nav-click-desktop.scss
@@ -37,8 +37,8 @@
     align-items: center;
     color: var(--color-main-level);
     display: inline-flex;
-    font-size: var(--font-size-main-level);
-    font-weight: var(--font-weight-main-level);
+    font-size: var(--typography-size-main-level);
+    font-weight: var(--typography-weight-main-level);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical);
@@ -53,8 +53,8 @@
     align-items: center;
     color: var(--color-sub-menu);
     display: inline-flex;
-    font-size: var(--font-size-sub-menu);
-    font-weight: var(--font-weight-sub-menu);
+    font-size: var(--typography-size-sub-menu);
+    font-weight: var(--typography-weight-sub-menu);
     line-height: 1.5;
     padding-bottom: var(--padding-sub-menu-link-vertical);
     padding-left: var(--padding-sub-menu-link-horizontal);
diff --git a/sass/navigation/_nav-desktop.scss b/sass/navigation/_nav-desktop.scss
index 1b3a2f34..04db09ab 100644
--- a/sass/navigation/_nav-desktop.scss
+++ b/sass/navigation/_nav-desktop.scss
@@ -9,8 +9,8 @@
   --dropdown-toggle-size: 1.2rem;
 
   // Main level items on desktop
-  --font-size-main-level: var(--font-size-16);
-  --font-weight-main-level: var(--font-weight-bold);
+  --typography-size-main-level: var(--typography-size-16);
+  --typography-weight-main-level: var(--typography-weight-bold);
   --padding-main-level-horizontal: 0;
   --padding-main-level-vertical: .6rem;
   --color-main-level: var(--color-black);
@@ -19,8 +19,8 @@
   --gap-main-level-horizontal: 2.5rem;
 
   // Sub menu items on desktop
-  --font-size-sub-menu: var(--font-size-16);
-  --font-weight-sub-menu: var(--font-weight-regular);
+  --typography-size-sub-menu: var(--typography-size-16);
+  --typography-weight-sub-menu: var(--typography-weight-regular);
   --padding-sub-menu-vertical: .6rem;
   --padding-sub-menu-link-vertical: .6rem;
   --padding-sub-menu-link-horizontal: 1.5rem;
@@ -75,8 +75,8 @@
     align-items: center;
     color: var(--color-main-level);
     display: inline-flex;
-    font-size: var(--font-size-main-level);
-    font-weight: var(--font-weight-main-level);
+    font-size: var(--typography-size-main-level);
+    font-weight: var(--typography-weight-main-level);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical);
@@ -90,8 +90,8 @@
     align-items: center;
     color: var(--color-sub-menu);
     display: inline-flex;
-    font-size: var(--font-size-sub-menu);
-    font-weight: var(--font-weight-sub-menu);
+    font-size: var(--typography-size-sub-menu);
+    font-weight: var(--typography-weight-sub-menu);
     line-height: 1.5;
     padding-bottom: var(--padding-sub-menu-link-vertical);
     padding-left: var(--padding-sub-menu-link-horizontal);
diff --git a/sass/navigation/_nav-mobile.scss b/sass/navigation/_nav-mobile.scss
index acb78999..56106287 100644
--- a/sass/navigation/_nav-mobile.scss
+++ b/sass/navigation/_nav-mobile.scss
@@ -17,15 +17,15 @@
   --color-dropdown-toggle-mobile: var(--color-white);
 
   // Main level items on mobile
-  --font-size-main-level-mobile: 1.5rem;
-  --font-weight-main-level-mobile: 600;
+  --typography-size-main-level-mobile: 1.5rem;
+  --typography-weight-main-level-mobile: 600;
   --padding-main-level-vertical-mobile: 1.2rem;
   --color-main-level-menu-item-hover-focus-mobile: var(--color-white);
   --color-main-level-menu-item-mobile: var(--color-white);
 
   // Sub-menu items on mobile
-  --font-size-sub-menu-mobile: 1.5rem;
-  --font-weight-sub-menu-mobile: 600;
+  --typography-size-sub-menu-mobile: 1.5rem;
+  --typography-weight-sub-menu-mobile: 600;
   --margin-left-sub-menu: 1rem;
   --padding-sub-menu-vertical-mobile: .8rem;
   --padding-sub-menu-horizontal-mobile: 2.5rem;
@@ -100,8 +100,8 @@
     border-top: 1px solid var(--color-separator-nav-mobile);
     color: var(--color-main-level-menu-item-mobile);
     display: block;
-    font-size: var(--font-size-main-level-mobile);
-    font-weight: var(--font-weight-main-level-mobile);
+    font-size: var(--typography-size-main-level-mobile);
+    font-weight: var(--typography-weight-main-level-mobile);
     margin-left: 0;
     margin-right: 0;
     padding-bottom: var(--padding-main-level-vertical-mobile);
@@ -116,8 +116,8 @@
   // Sub menu items
   .sub-menu a {
     color: var(--color-sub-menu-mobile);
-    font-size: var(--font-size-sub-menu-mobile);
-    font-weight: var(--font-weight-sub-menu-mobile);
+    font-size: var(--typography-size-sub-menu-mobile);
+    font-weight: var(--typography-weight-sub-menu-mobile);
     padding-bottom: var(--padding-sub-menu-vertical-mobile);
     padding-left: calc(var(--padding-sub-menu-horizontal-mobile) + var(--margin-left-sub-menu));
     padding-top: var(--padding-sub-menu-vertical-mobile);
diff --git a/sass/navigation/_nav-toggle.scss b/sass/navigation/_nav-toggle.scss
index 64513696..64e81ef8 100644
--- a/sass/navigation/_nav-toggle.scss
+++ b/sass/navigation/_nav-toggle.scss
@@ -67,8 +67,8 @@ body:not(.js-nav-active) .nav-toggle:hover .hamburger::after {
 .nav-toggle::after {
   color: var(--color-white);
   content: attr(aria-label);
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--typography-size-14);
+  font-weight: var(--typography-weight-semibold);
   margin-left: 1.6rem;
   white-space: nowrap;
 }
@@ -82,7 +82,7 @@ body:not(.js-nav-active) .nav-toggle:hover .hamburger::after {
   border-radius: 3px;
   cursor: pointer;
   display: flex;
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--typography-weight-semibold);
   height: 2rem;
   justify-content: center;
   margin: 0;
diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss
index 0589fdad..5a1da10d 100644
--- a/sass/variables/_colors.scss
+++ b/sass/variables/_colors.scss
@@ -16,8 +16,8 @@
   --color-white: #fff;
 
   // Main element colors
-  --color-heading: var(--color-main);
   --color-main: var(--color-valhalla);
+  --color-heading: var(--color-main);
   --color-paragraph: var(--color-east-bay);
 
   // Modern link
diff --git a/sass/variables/_font-family copy.scss b/sass/variables/_font-family copy.scss
new file mode 100644
index 00000000..db70ccc7
--- /dev/null
+++ b/sass/variables/_font-family copy.scss	
@@ -0,0 +1,10 @@
+// stylelint-disable max-line-length
+// Font family settings
+// You can define your own font families here, like --typography-family-barlow
+// and then attach them to elements: --typography-family-paragraph: var(--typography-family-barlow)
+:root {
+  // Fonts in use for content
+  --typography-family-inter: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
+  --typography-family-paragraph: var(--typography-family-inter);
+  --typography-family-heading: var(--typography-family-inter);
+}
diff --git a/sass/variables/_forms.scss b/sass/variables/_forms.scss
index b7313181..51c6be57 100644
--- a/sass/variables/_forms.scss
+++ b/sass/variables/_forms.scss
@@ -27,10 +27,10 @@
   --border-radius-select: 3px;
   --border-width-checkbox: 1px;
   --border-width-input-field: 1px;
-  --font-size-input-fields: var(--font-size-17);
-  --font-size-input-labels: var(--font-size-input-fields);
-  --font-size-required-text-label: var(--font-size-input-fields);
-  --font-size-required-asterisk-label: 1.375rem;
+  --typography-size-input-fields: var(--typography-size-17);
+  --typography-size-input-labels: var(--typography-size-input-fields);
+  --typography-size-required-text-label: var(--typography-size-input-fields);
+  --typography-size-required-asterisk-label: 1.375rem;
   --form-column-gap: 2rem;
   --form-row-gap: 2rem;
   --form-required-gap: .5rem;
diff --git a/sass/variables/_spacings-new.scss b/sass/variables/_spacings-new.scss
new file mode 100644
index 00000000..0df4771d
--- /dev/null
+++ b/sass/variables/_spacings-new.scss
@@ -0,0 +1,52 @@
+// CSS Variables for responsive paddings and margins
+:root {
+  // Gaps
+  --spacing-grid-gap: 4.8rem;
+
+  // Paddings
+  --spacing-container-padding-inline: 2rem;
+  --spacing-container-padding-inline-large: 6.4rem;
+  --spacing-container-padding-block: 6.4rem;
+  --spacing-site-header-padding-block: 2rem;
+  --spacing-content-padding-block: 8rem;
+
+  // Margins
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
+  --spacing-paragraphs-margin-block: 2.7rem;
+
+  // Mid-sized screens
+  @media (max-width: $width-grid-base + 150px) {
+    --spacing-container-padding-inline: 6.4rem;
+  }
+
+  // When there's no longer room for container to fit with wider white space
+  @media (max-width: 700px) {
+    --spacing-container-padding-inline: 2rem;
+  }
+
+  // When navigation transforms to a responsive hamburger menu
+  @media (max-width: $width-max-mobile) {
+    --spacing-site-header-padding-block: 2rem;
+  }
+
+  // iPad
+  @media (max-width: $container-ipad-landscape) {
+    --spacing-grid-gap: 3.2rem;
+  }
+
+  @media (max-width: $container-ipad) {
+    --spacing-grid-gap: var(--spacing-container-padding-inline);
+    --spacing-container-padding-block: 5rem;
+  }
+
+  // Between iPad and a mobile phone
+  @media (max-width: 600px) {
+    --spacing-content-padding-block: 6rem;
+  }
+
+  // Vars in mobile
+  @media (max-width: $container-mobile) {
+    --spacing-container-padding-block: 4rem;
+  }
+}
diff --git a/sass/variables/_spacings.scss b/sass/variables/_spacings.scss
index 14ecb1a7..0df4771d 100644
--- a/sass/variables/_spacings.scss
+++ b/sass/variables/_spacings.scss
@@ -1,52 +1,52 @@
 // CSS Variables for responsive paddings and margins
 :root {
   // Gaps
-  --grid-gap: 4.8rem;
+  --spacing-grid-gap: 4.8rem;
 
   // Paddings
-  --padding-container-horizontal: 2rem;
-  --padding-container-horizontal-large: 6.4rem;
-  --padding-container-vertical: 6.4rem;
-  --padding-site-header-vertical: 2rem;
-  --padding-block: 8rem;
+  --spacing-container-padding-inline: 2rem;
+  --spacing-container-padding-inline-large: 6.4rem;
+  --spacing-container-padding-block: 6.4rem;
+  --spacing-site-header-padding-block: 2rem;
+  --spacing-content-padding-block: 8rem;
 
   // Margins
-  --margin-between-text-elements: 4rem;
-  --margin-wp-block-image: 4rem;
-  --margin-between-paragraphs: 2.7rem;
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
+  --spacing-paragraphs-margin-block: 2.7rem;
 
   // Mid-sized screens
   @media (max-width: $width-grid-base + 150px) {
-    --padding-container-horizontal: 6.4rem;
+    --spacing-container-padding-inline: 6.4rem;
   }
 
   // When there's no longer room for container to fit with wider white space
   @media (max-width: 700px) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 
   // When navigation transforms to a responsive hamburger menu
   @media (max-width: $width-max-mobile) {
-    --padding-site-header-vertical: 2rem;
+    --spacing-site-header-padding-block: 2rem;
   }
 
   // iPad
   @media (max-width: $container-ipad-landscape) {
-    --grid-gap: 3.2rem;
+    --spacing-grid-gap: 3.2rem;
   }
 
   @media (max-width: $container-ipad) {
-    --grid-gap: var(--padding-container-horizontal);
-    --padding-container-vertical: 5rem;
+    --spacing-grid-gap: var(--spacing-container-padding-inline);
+    --spacing-container-padding-block: 5rem;
   }
 
   // Between iPad and a mobile phone
   @media (max-width: 600px) {
-    --padding-block: 6rem;
+    --spacing-content-padding-block: 6rem;
   }
 
   // Vars in mobile
   @media (max-width: $container-mobile) {
-    --padding-container-vertical: 4rem;
+    --spacing-container-padding-block: 4rem;
   }
 }
diff --git a/sass/variables/_typography-size.scss b/sass/variables/_typography-size.scss
new file mode 100644
index 00000000..999de820
--- /dev/null
+++ b/sass/variables/_typography-size.scss
@@ -0,0 +1,59 @@
+// stylelint-disable rem-over-px/rem-over-px
+// CSS Variables for responsive fonts
+:root {
+  // Heading font sizes
+  --typography-size-hero: 52px;
+  --typography-size-h1: 40px;
+  --typography-size-h2: 30px;
+  --typography-size-h3: 24px;
+  --typography-size-h4: 20px;
+  --typography-size-h5: 16px;
+  --typography-size-h6: 14px;
+
+  // Paragraph font sizes
+  --typography-size-12: 12px;
+  --typography-size-13: 13px;
+  --typography-size-14: 14px;
+  --typography-size-15: 15px;
+  --typography-size-16: 16px;
+  --typography-size-17: 17px;
+  --typography-size-18: 18px;
+  --typography-size-20: 20px;
+  --typography-size-22: 22px;
+
+  // Element font sizes
+  --typography-paragraph-size: var(--typography-size-18);
+  --typography-nav-toggle-label-size: 15px;
+  --typography-captions-size: 15px;
+
+  // Line-heights
+  --typography-heading-line-height: 1.5;
+  --typography-core-heading-line-height: 1.23;
+  --typography-paragraph-line-height: 1.7;
+
+  // Font weights
+  --typography-weight-regular: 400;
+  --typography-weight-medium: 500;
+  --typography-weight-semibold: 600;
+  --typography-weight-bold: 700;
+  --typography-weight-paragraph: var(--typography-weight-regular);
+  --typography-weight-heading: var(--typography-weight-bold);
+
+  // Heading font sizes in mobile
+  @media (max-width: $container-mobile) {
+    --typography-size-hero: 38px;
+    --typography-size-h1: 32px;
+    --typography-size-h2: 24px;
+    --typography-size-h3: 21px;
+    --typography-size-h4: 18px;
+    --typography-size-h5: 14px;
+    --typography-size-h6: 12px;
+    --typography-size-paragraph: 16px;
+  }
+
+  // Element font sizes in tiny phones like iPhone 5S
+  @media (max-width: 420px) {
+    --typography-size-16: 14px;
+    --typography-nav-toggle-label-size: 13px;
+  }
+}
diff --git a/sass/views/_comments.scss b/sass/views/_comments.scss
index b334a48b..d04a73a1 100644
--- a/sass/views/_comments.scss
+++ b/sass/views/_comments.scss
@@ -21,7 +21,7 @@
   }
 
   li {
-    font-size: var(--font-size-14);
+    font-size: var(--typography-size-14);
     margin-bottom: 7rem;
     margin-top: 0;
     padding: 0;
@@ -29,7 +29,7 @@
 
   p {
     color: var(--color-comment-text);
-    font-size: var(--font-size-14);
+    font-size: var(--typography-size-14);
   }
 
   .avatar {
@@ -39,7 +39,7 @@
 
   .comment-author {
     color: var(--color-comment-author-text);
-    font-size: var(--font-size-h4);
+    font-size: var(--typography-size-h4);
     margin-bottom: 1rem;
     margin-top: 0;
     padding: 0;
@@ -56,7 +56,7 @@
   }
 
   .comment-time {
-    font-size: var(--font-size-14);
+    font-size: var(--typography-size-14);
     margin: 0;
     padding: 0;
 
@@ -81,7 +81,7 @@
 .comments-link {
   align-items: center;
   display: inline-flex;
-  font-size: var(--font-size-14);
+  font-size: var(--typography-size-14);
   text-align: right;
 
   a {
diff --git a/sass/views/_search.scss b/sass/views/_search.scss
index da240b29..621586c8 100644
--- a/sass/views/_search.scss
+++ b/sass/views/_search.scss
@@ -36,7 +36,7 @@
   }
 
   h3 {
-    font-size: var(--font-size-h4);
+    font-size: var(--typography-size-h4);
     margin-bottom: 1rem;
   }
 
diff --git a/sass/views/_single.scss b/sass/views/_single.scss
index 174dfb63..a4f74b80 100644
--- a/sass/views/_single.scss
+++ b/sass/views/_single.scss
@@ -19,7 +19,7 @@
   border-radius: 3rem;
   color: var(--color-white);
   display: inline-block;
-  font-size: var(--font-size-14);
+  font-size: var(--typography-size-14);
   margin: 0;
   padding: .5rem 1.5rem;
   transition: all $transition-duration;
@@ -36,7 +36,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
-  margin-bottom: var(--margin-between-text-elements);
+  margin-bottom: var(--spacing-text-margin-block);
   margin-top: 0;
 
   // stylelint-disable a11y/font-size-is-readable
@@ -47,7 +47,7 @@
     box-shadow: none;
     color: var(--color-black);
     display: inline-block;
-    font-size: var(--font-size-12);
+    font-size: var(--typography-size-12);
     margin-right: .4em;
     padding: .1em .8em;
     transition: all $transition-duration;