diff --git a/sass/elements/code.scss b/sass/elements/code.scss
index a7458ae..4a145d3 100644
--- a/sass/elements/code.scss
+++ b/sass/elements/code.scss
@@ -24,6 +24,7 @@ del {
   border-radius: 5px;
   padding: 0 5px;
   font-size: 85%;
+  white-space: nowrap;
 }
 
 kbd {
diff --git a/sass/elements/header.scss b/sass/elements/header.scss
index 35d5be0..2042b3f 100644
--- a/sass/elements/header.scss
+++ b/sass/elements/header.scss
@@ -1,4 +1,4 @@
-header {
+header.intro-card {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
@@ -10,6 +10,8 @@ header {
 
   margin: 2em auto;
 
+  font-family: "IBM Plex Serif", serif;
+
   // Image Controls
   &[data-size="large"] {
     img {
@@ -80,3 +82,13 @@ header {
     }
   }
 }
+
+header.page-header {
+  margin-bottom: 1em;
+
+  .subtitle {
+    font-family: "IBM Plex Serif", serif;
+    font-size: 1.25em;
+    color: gray;
+  }
+}
diff --git a/sass/elements/headings.scss b/sass/elements/headings.scss
index 846f019..b992632 100644
--- a/sass/elements/headings.scss
+++ b/sass/elements/headings.scss
@@ -1,3 +1,4 @@
+
 h1,
 h2,
 h3,
@@ -12,6 +13,10 @@ h6 {
 
   border-bottom: 1px solid #d7dde3;
 
+  font-family: "IBM Plex Serif", serif;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+
   code {
     padding: 0 0.2em;
     font-size: inherit;
diff --git a/sass/elements/text.scss b/sass/elements/text.scss
index 07c76c2..3833ab2 100644
--- a/sass/elements/text.scss
+++ b/sass/elements/text.scss
@@ -1,15 +1,14 @@
-p,
-li,
-span {
-  font-family: sans-serif;
-}
+
 
 p {
   margin-top: 0;
   margin-bottom: 16px;
+  padding: 0 0.25em;
+
   text-align: justify;
   hyphens: auto;
   font-kerning: normal;
+  font-variant-ligatures: normal;
   // font-variant-ligatures: common-ligatures contextual discretionary-ligatures historical-ligatures;
 }
 
diff --git a/sass/styles.scss b/sass/styles.scss
index 57baa7f..595fdc4 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -1,12 +1,17 @@
 // Note: Some things are broken out into smaller files
 
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
 $content-max-width: 800px;
 
 @import "elements/header.scss";
 
 body {
   margin: 1em;
-  font-family: serif;
+  // font-family: serif;
+  font-family: "Noto Sans", sans-serif;
+  font-optical-sizing: auto;
 }
 
 a {
@@ -25,6 +30,9 @@ nav {
   margin: 0 auto;
   text-align: center;
 
+  font-family: "IBM Plex Serif", serif;
+  font-weight: 500;
+
   ul {
     max-width: 100%;
     display: flex;
diff --git a/templates/base.html b/templates/base.html
index f4c9cc6..0dbd24b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -73,7 +73,7 @@
 <body>
 
     {# Heading section (profile photo & name) #}
-    <header data-size="{% if path == '/' %}large{% else %}small{% endif %}">
+    <header data-size="{% if path == '/' %}large{% else %}small{% endif %}" class="intro-card">
         <img src="{{config.extra.profile_photo}}" alt="Evan Pratten">
         <div class="header-text">
             <span class="header-name">Evan Pratten</span><br>
@@ -131,13 +131,14 @@
     <main>
         {% block content %}
         <article>
-            {% if not extra.no_auto_title %}
-            <h1 class="title">{{title}}</h1>
-            {% endif %}
-            {% if page.description %}
-            <em class="subtitle">{{page.description}}</em><br>
-            {% endif %}
-            <br>
+            <header class="page-header">
+                {% if not extra.no_auto_title %}
+                <h1 class="title">{{title}}</h1>
+                {% endif %}
+                {% if page.description %}
+                <span class="subtitle">{{page.description}}</span>
+                {% endif %}
+            </header>
 
             {{ content | safe }}
         </article>
