extend h1-6 with .h1-6

src/scss/_base.scss

@@ -44,3 +44,17 @@ body {
   color: $color-body;
   background-color: $background-color;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include font-title();
+}
+
+a,
+button {
+	@include font-link();
+}

src/scss/_reset.scss

@@ -1,71 +1,77 @@
 // based on https://github.com/hankchizljaw/modern-css-reset
-/* Box sizing rules */
+    /* Box sizing rules */
-*,
+    *,
-*::before,
+    *::before,
-*::after {
+    *::after {
-	box-sizing: border-box;
+      box-sizing: border-box;
-}
+    }
 
-/* Remove default padding */
+    /* Remove default padding */
-ul,
+    ul,
-ol {
+    ol {
-	padding: 0;
+      padding: 0;
-	list-style: none;
+      list-style: none;
-}
+    }
 
-/* Remove default margin */
+    /* Remove default margin */
-body,
+    body,
-h1,
+    h1,
-h2,
+    h2,
-h3,
+    h3,
-h4,
+    h4,
-p,
+    p,
-ul,
+    ul,
-ol,
+    ol,
-figure,
+    figure,
-blockquote,
+    blockquote,
-dl,
+    dl,
-dd {
+    dd {
-	margin: 0;
+      margin: 0;
-}
+    }
 
-/* Set core root defaults */
+    /* Set core root defaults */
-html {
+    html {
-	scroll-behavior: smooth;
+      scroll-behavior: smooth;
-}
+    }
 
-/* Set core body defaults */
+    /* Set core body defaults */
-body {
+    body {
-	min-height: 100vh;
+      min-height: 100vh;
-	text-rendering: optimizeSpeed;
+      text-rendering: optimizeSpeed;
-	line-height: 1.5;
+      line-height: 1.5;
-}
+    }
 
-/* Make images easier to work with */
+		a {
-img {
+			text-decoration: none;
-	max-width: 100%;
+		}
-	display: block;
-}
 
-/* Inherit fonts for inputs and buttons */
+    /* Inherit fonts for inputs and buttons */
-input,
+    input,
-button,
+    button,
-textarea,
+    textarea,
-select {
+    select {
-	font: inherit;
+      font: inherit;
-}
+    }
+
+    /* Make images easier to work with */
+    img {
+      max-width: 100%;
+      display: block;
+
+			/* Blur images when they have no alt attribute */
+			&:not([alt]) {
+				filter: blur(10px);
+			}
+    }
+
+    /* Remove all animations and transitions for people that prefer not to see them */
+    @media (prefers-reduced-motion: reduce) {
+      * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
 
-/* Blur images when they have no alt attribute */
-img:not([alt]) {
-	filter: blur(10px);
-}
 
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-	* {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
-}

src/scss/style.scss

@@ -3,3 +3,27 @@
 @import "typography";
 @import "base";
 @import "layout";
+
+.h1 {
+	@extend h1;
+}
+
+.h2 {
+	@extend h2;
+}
+
+.h3 {
+	@extend h3;
+}
+
+.h4 {
+	@extend h4;
+}
+
+.h5 {
+	@extend h5;
+}
+
+.h6 {
+	@extend h6;
+}