diff --git a/sites/art/src/components/BaseHead.astro b/sites/art/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/art/src/components/BaseHead.astro
+++ b/sites/art/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/art/src/components/sections/blog-post.tsx b/sites/art/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/art/src/components/sections/blog-post.tsx
+++ b/sites/art/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/art/src/components/sections/blog-posts.tsx b/sites/art/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/art/src/components/sections/blog-posts.tsx
+++ b/sites/art/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/art/src/pages/index.astro b/sites/art/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/art/src/pages/index.astro
+++ b/sites/art/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/art/src/styles/global.css b/sites/art/src/styles/global.css
index 22f0b14..badcfab 100644
--- a/sites/art/src/styles/global.css
+++ b/sites/art/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/poetry/src/components/BaseHead.astro b/sites/poetry/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/poetry/src/components/BaseHead.astro
+++ b/sites/poetry/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/poetry/src/components/sections/blog-post.tsx b/sites/poetry/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/poetry/src/components/sections/blog-post.tsx
+++ b/sites/poetry/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/poetry/src/components/sections/blog-posts.tsx b/sites/poetry/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/poetry/src/components/sections/blog-posts.tsx
+++ b/sites/poetry/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/poetry/src/pages/index.astro b/sites/poetry/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/poetry/src/pages/index.astro
+++ b/sites/poetry/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/poetry/src/styles/global.css b/sites/poetry/src/styles/global.css
index c6338d0..9b9c9f4 100644
--- a/sites/poetry/src/styles/global.css
+++ b/sites/poetry/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/puzzles/src/components/BaseHead.astro b/sites/puzzles/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/puzzles/src/components/BaseHead.astro
+++ b/sites/puzzles/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/puzzles/src/components/sections/blog-post.tsx b/sites/puzzles/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/puzzles/src/components/sections/blog-post.tsx
+++ b/sites/puzzles/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/puzzles/src/components/sections/blog-posts.tsx b/sites/puzzles/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/puzzles/src/components/sections/blog-posts.tsx
+++ b/sites/puzzles/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/puzzles/src/pages/index.astro b/sites/puzzles/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/puzzles/src/pages/index.astro
+++ b/sites/puzzles/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/puzzles/src/styles/global.css b/sites/puzzles/src/styles/global.css
index 1fff1df..39d5301 100644
--- a/sites/puzzles/src/styles/global.css
+++ b/sites/puzzles/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/reflections/src/components/BaseHead.astro b/sites/reflections/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/reflections/src/components/BaseHead.astro
+++ b/sites/reflections/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/reflections/src/components/sections/blog-post.tsx b/sites/reflections/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/reflections/src/components/sections/blog-post.tsx
+++ b/sites/reflections/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/reflections/src/components/sections/blog-posts.tsx b/sites/reflections/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/reflections/src/components/sections/blog-posts.tsx
+++ b/sites/reflections/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/reflections/src/pages/index.astro b/sites/reflections/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/reflections/src/pages/index.astro
+++ b/sites/reflections/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/reflections/src/styles/global.css b/sites/reflections/src/styles/global.css
index f4ebe90..49799b2 100644
--- a/sites/reflections/src/styles/global.css
+++ b/sites/reflections/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/research/src/components/BaseHead.astro b/sites/research/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/research/src/components/BaseHead.astro
+++ b/sites/research/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/research/src/components/sections/blog-post.tsx b/sites/research/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/research/src/components/sections/blog-post.tsx
+++ b/sites/research/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/research/src/components/sections/blog-posts.tsx b/sites/research/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/research/src/components/sections/blog-posts.tsx
+++ b/sites/research/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/research/src/pages/index.astro b/sites/research/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/research/src/pages/index.astro
+++ b/sites/research/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/research/src/styles/global.css b/sites/research/src/styles/global.css
index d2055ed..ab4fb0b 100644
--- a/sites/research/src/styles/global.css
+++ b/sites/research/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/reviews/src/components/BaseHead.astro b/sites/reviews/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/reviews/src/components/BaseHead.astro
+++ b/sites/reviews/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/reviews/src/components/sections/blog-post.tsx b/sites/reviews/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/reviews/src/components/sections/blog-post.tsx
+++ b/sites/reviews/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/reviews/src/components/sections/blog-posts.tsx b/sites/reviews/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/reviews/src/components/sections/blog-posts.tsx
+++ b/sites/reviews/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/reviews/src/pages/index.astro b/sites/reviews/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/reviews/src/pages/index.astro
+++ b/sites/reviews/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/reviews/src/styles/global.css b/sites/reviews/src/styles/global.css
index cde29a3..0f97232 100644
--- a/sites/reviews/src/styles/global.css
+++ b/sites/reviews/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}
diff --git a/sites/vibes/src/components/BaseHead.astro b/sites/vibes/src/components/BaseHead.astro
index 19ca5c4..e519a3a 100644
--- a/sites/vibes/src/components/BaseHead.astro
+++ b/sites/vibes/src/components/BaseHead.astro
@@ -27,7 +27,7 @@ const imageURL = new URL(finalImage, Astro.url);
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 <!-- Load Google Fonts -->
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Hubot+Sans:wght@400;500;600;700&family=Mona+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="robots" content={`${SITE_METADATA.robots.index ? 'index' : 'noindex'}, ${SITE_METADATA.robots.follow ? 'follow' : 'nofollow'}`} />
diff --git a/sites/vibes/src/components/sections/blog-post.tsx b/sites/vibes/src/components/sections/blog-post.tsx
index 598cdb0..84022db 100644
--- a/sites/vibes/src/components/sections/blog-post.tsx
+++ b/sites/vibes/src/components/sections/blog-post.tsx
@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
diff --git a/sites/vibes/src/components/sections/blog-posts.tsx b/sites/vibes/src/components/sections/blog-posts.tsx
index 00f8ec8..fef77e5 100644
--- a/sites/vibes/src/components/sections/blog-posts.tsx
+++ b/sites/vibes/src/components/sections/blog-posts.tsx
@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">
diff --git a/sites/vibes/src/pages/index.astro b/sites/vibes/src/pages/index.astro
index 1343474..8becdef 100644
--- a/sites/vibes/src/pages/index.astro
+++ b/sites/vibes/src/pages/index.astro
@@ -11,11 +11,11 @@ const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort(
 ---
 
 <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="py-16 md:py-28 lg:py-32">
+  <div class="py-12 md:py-20 lg:py-24">
     <div class="container max-w-5xl">
-      <div class="mb-12">
-        <h1 class="text-4xl font-bold mb-4">{ACTIVE_BLOG_SITE.title}</h1>
-        <p class="text-xl text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
+      <div class="mb-10">
+        <h1 class="blog-page-title mb-3">{ACTIVE_BLOG_SITE.title}</h1>
+        <p class="text-lg text-muted-foreground">{ACTIVE_BLOG_SITE.description}</p>
       </div>
       <BlogPosts posts={posts} client:only="react" />
     </div>
diff --git a/sites/vibes/src/styles/global.css b/sites/vibes/src/styles/global.css
index fa534ef..d41cd71 100644
--- a/sites/vibes/src/styles/global.css
+++ b/sites/vibes/src/styles/global.css
@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}