Use viewport unit to scale base font size

Use rems for font sizes and margin/padding

css/archive.css

@@ -12,12 +12,21 @@
   margin-left: var(--space-sm);
 }
 
-.archive__heading {
+.archive__heading,
+.archive__subheading {
   font-family: var(--heading-font-family);
   color: var(--color-dark-blue);
   margin-bottom: var(--space-xs);
 }
 
+.archive__heading {
+  font-size: var(--size-heading-2);
+}
+
+.archive__subheading {
+  font-size: var(--size-heading-3);
+}
+
 .archive__date {
   display: inline-block;
   font-style: italic;

css/base.css

@@ -1,5 +1,18 @@
 html {
   box-sizing: border-box;
+  line-height: 1.5;
+}
+
+@media screen and (min-width: 50rem) {
+  html {
+    font-size: 2vw;
+  }
+}
+
+@media screen and (min-width: 62.5rem) {
+  html {
+    font-size: 1.25rem;
+  }
 }
 
 body {
@@ -7,8 +20,6 @@ body {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e0e0e0' fill-opacity='0.55' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
   color: var(--color-near-black);
   font-family: var(--body-font-family);
-  font-size: 16px;
-  line-height: 1.5;
   margin: 0;
 }
 
@@ -25,6 +36,8 @@ h1,
 h2,
 h3,
 h4,
+h5,
+h6,
 figure,
 table,
 p,

css/comment-respond.css

@@ -9,7 +9,7 @@
 }
 
 .comment-respond__text {
-  font-size: 14px;
+  font-size: var(--size-body-small);
 }
 
 .comment-respond__item {
@@ -17,6 +17,10 @@
   max-width: 360px;
 }
 
+.comment-respond__cancel {
+  font-size: var(--size-body-extra-small);
+}
+
 .comment-respond__label {
   display: block;
   margin-bottom: var(--space-xs);
@@ -45,10 +49,6 @@
   padding: var(--space-xs);
 }
 
-.comment-respond__cancel {
-  font-size: 12px;
-}
-
 .comment-respond__cancel a,
 .comment-respond__cancel a:visited {
   color: var(--color-light-blue);

css/comment.css

@@ -31,7 +31,7 @@
 }
 
 .comment__date {
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
 }
 
 .comment__body {
@@ -60,7 +60,7 @@
 .comment__reply-text {
   display: inline-block;
   position: relative;
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   vertical-align: middle;
   transition: box-shadow var(--transition-md) ease-out;
 }

css/content.css

@@ -1,29 +1,37 @@
-.content h1 {
+.content h1,
-  font-family: var(--heading-font-family);
+.content h2,
-  font-size: 1.8rem;
+.content h3,
-  margin-bottom: var(--space-sm);
-}
-
-.content h2 {
-  font-family: var(--heading-font-family);
-  font-size: 1.6rem;
-  margin-bottom: var(--space-sm);
-}
-
-.content h3 {
-  font-family: var(--heading-font-family);
-  font-size: 1.4rem;
-  margin-bottom: var(--space-sm);
-}
-
 .content h4,
 .content h5,
 .content h6 {
   font-family: var(--heading-font-family);
-  font-size: 1.2rem;
   margin-bottom: var(--space-sm);
 }
 
+.content h1 {
+  font-size: var(--size-heading-1);
+}
+
+.content h2 {
+  font-size: var(--size-heading-2);
+}
+
+.content h3 {
+  font-size: var(--size-heading-3);
+}
+
+.content h4 {
+  font-size: var(--size-heading-4);
+}
+
+.content h5 {
+  font-size: var(--size-heading-5);
+}
+
+.content h6 {
+  font-size: var(--size-heading-6);
+}
+
 .content p {
   margin-bottom: var(--space-sm);
 }

css/excerpt.css

@@ -28,18 +28,18 @@
   }
 }
 
-.excerpt__title {
+.excerpt__title,
-  font-size: 1.5rem;
+.excerpt__subtitle {
+  font-size: var(--size-heading-6);
 }
 
 .excerpt__subtitle {
-  font-size: 1.2rem;
   margin-top: var(--space-sm);
 }
 
 .excerpt__metadata {
   color: var(--color-grey);
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
 }
 

css/footer.css

@@ -1,12 +1,9 @@
 .footer {
   text-align: center;
+  font-size: var(--size-body-extra-small);
 }
 
 .footer__head,
 .footer__body {
   margin-bottom: var(--space-sm);
 }
-
-.footer__text {
-  font-size: 14px;
-}

css/index.css

@@ -32,11 +32,20 @@
   --color-facebook: #3e5a98;
   --color-twitter: #1da1f2;
   --color-rss: #ee802f;
-  --space-xxs: 5px;
+  --space-xxs: 0.25rem;
-  --space-xs: 10px;
+  --space-xs: 0.5rem;
-  --space-sm: 20px;
+  --space-sm: 1rem;
-  --space-md: 30px;
+  --space-md: 2rem;
-  --space-lg: 60px;
+  --space-lg: 4rem;
+  --size-heading-1: 2rem;
+  --size-heading-2: 1.8rem;
+  --size-heading-3: 1.6rem;
+  --size-heading-4: 1.424rem;
+  --size-heading-5: 1.267rem;
+  --size-heading-6: 1.125rem;
+  --size-body: 1rem;
+  --size-body-small: 0.889rem;
+  --size-body-extra-small: 0.79rem;
   --transition-fs: 0.15s;
   --transition-md: 0.3s;
   --transition-sl: 0.6s;
@@ -46,8 +55,8 @@
   --link-focus: 0 3px 0 0 var(--color-light-blue);
 }
 
-@custom-media --viewport-sm (min-width: 480px);
+@custom-media --viewport-sm (min-width: 30rem);
-@custom-media --viewport-md (min-width: 640px);
+@custom-media --viewport-md (min-width: 40rem);
-@custom-media --viewport-lg (min-width: 900px);
+@custom-media --viewport-lg (min-width: 60rem);
-@custom-media --viewport-xl (min-width: 1200px);
+@custom-media --viewport-xl (min-width: 75rem);
 @custom-media --viewport-wordpress-admin-bar (min-width: 783px);

css/metadata.css

@@ -1,7 +1,7 @@
 .metadata {
   display: flex;
   flex-flow: row wrap;
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-light-grey);
 }

css/nav.css

@@ -128,7 +128,7 @@
 
 .nav__list {
   font-family: var(--heading-font-family);
-  font-size: 1.2rem;
+  font-size: var(--size-heading-6);
 }
 
 .nav__list .nav__list {

css/page.css

@@ -3,7 +3,7 @@
   grid-auto-flow: dense;
   grid-gap: var(--space-xs);
   grid-template-columns: 1fr;
-  max-width: 1200px;
+  max-width: 75rem;
   margin: var(--space-xs) var(--space-xs) 0;
 }
 

css/title.css

@@ -1,17 +1,10 @@
 .title {
   font-family: var(--heading-font-family);
-  font-size: 1.8rem;
   color: var(--color-dark-blue);
+  font-size: var(--size-heading-1);
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-md) {
-  .title {
-    font-size: 2.4rem;
-    margin-bottom: var(--space-md);
-  }
-}
-
 .title a {
   color: inherit;
 }

theme/partials/archive.php

@@ -35,7 +35,7 @@ foreach ($posts as $post) {
         <ol class="archive__list archive__list--sub-list">
           <?php foreach ($yearData as $month => $monthData) : ?>
             <li class="archive__item">
-              <h3 class="archive__heading">
+              <h3 class="archive__subheading">
                 <?php echo $month ?>
               </h3>
               <ol class="archive__list archive__list--sub-list">