continue working on post layout, add typography styles

src/styles/main.css

@@ -1,9 +1,11 @@
 @import 'reset.css';
 @import 'vars.css';
+@import 'prose.css';
 
 body {
+    font-family: 'Figtree Variable', sans-serif;
+    font-weight: 350;
     font-size: var(--content-size);
     line-height: var(--content-line-height);
-    letter-spacing: -0.005em;
     color: var(--content-color);
 }

src/styles/prose.css

@@ -0,0 +1,51 @@
+.prose {
+    h1, h2, h3, h4, h5, h6 {
+        font-family: 'Merriweather Variable', serif;
+        font-weight: 600;
+        color: hsl(0 0% 27%);
+        letter-spacing: 0.015em;
+    }
+
+    h1 {
+        margin-top: 0.5em;
+        font-size: 2.15em;
+    }
+
+    h2 {
+        font-size: 1.6em;
+    }
+
+    h3 {
+        font-size: 1.25em;
+    }
+
+    h4 {
+        font-size: 1.1em;
+    }
+
+    h1, h2, h3, h4 {
+        margin-bottom: 0.5em;
+    }
+
+    p, ul, ol {
+        margin-bottom: 0.8em;
+    }
+
+    ul, ol, blockquote {
+        padding: 0;
+        margin-left: 2em;
+    }
+
+    blockquote {
+        position: relative;
+        font-style: italic;
+    }
+
+    blockquote::before {
+        content: '';
+        position: absolute;
+        left: -01em;
+        height: 100%;
+        border-right: 3px solid var(--accent-color);
+    }
+}

src/styles/vars.css

@@ -1,10 +1,10 @@
 :root {
     --content-size: 1.25rem;
     --content-size-sm: 1rem;
-    --content-line-height: 1.4;
+    --content-line-height: 1.5;
     --content-width: 52.5rem;
     --content-padding: 0.65rem;
-    --content-color: #1e1e1e;
+    --content-color: hsl(0deg 0% 20%);
     --content-color-faded: #555;
     --primary-color: hsl(202deg 72% 28%);
     --primary-color-faded: hsl(202deg 14% 36%);