From 3b65c554456764c7691d5262f69e6ad8cffca632 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Fri, 27 Mar 2026 13:24:02 -0500
Subject: [PATCH] fix(site): increase blog body text to 18px for readability
 (#1146)

Co-authored-by: Claude <noreply@anthropic.com>
---
 site/src/components/typography/H4.astro  |  3 +--
 site/src/components/typography/H5.astro  |  2 +-
 site/src/components/typography/Td.astro  |  2 +-
 site/src/components/typography/Th.astro  |  5 +----
 site/src/components/typography/styles.ts |  2 +-
 site/src/layouts/Markdown.astro          | 10 ++++++----
 site/src/pages/blog/[...slug].astro      |  2 +-
 site/src/styles/globals.css              |  5 +++++
 8 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/site/src/components/typography/H4.astro b/site/src/components/typography/H4.astro
index 11b0b70e..e23d55f6 100644
--- a/site/src/components/typography/H4.astro
+++ b/site/src/components/typography/H4.astro
@@ -14,11 +14,10 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("mt-8 mb-4 text-p2 font-bold", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mt-8 mb-4 text-p15 font-bold", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
-  style={{ fontSize: "1.125rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H5.astro b/site/src/components/typography/H5.astro
index a2668de6..e125a4c1 100644
--- a/site/src/components/typography/H5.astro
+++ b/site/src/components/typography/H5.astro
@@ -14,7 +14,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("my-4 text-p2 italic", maxWidth && "mx-auto max-w-3xl"),
+    clsx("my-4 italic", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/Td.astro b/site/src/components/typography/Td.astro
index c9189a35..691732d3 100644
--- a/site/src/components/typography/Td.astro
+++ b/site/src/components/typography/Td.astro
@@ -10,6 +10,6 @@ type Props<Tag extends HTMLTag = 'td'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'td', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge("px-4 py-2 text-p2", className)} {...props}>
+<Tag class={twMerge("px-4 py-2", className)} {...props}>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Th.astro b/site/src/components/typography/Th.astro
index 1e144da2..dd8a7d64 100644
--- a/site/src/components/typography/Th.astro
+++ b/site/src/components/typography/Th.astro
@@ -10,9 +10,6 @@ type Props<Tag extends HTMLTag = 'th'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'th', class: className, ...props } = Astro.props;
 ---
 
-<Tag
-  class={twMerge("px-4 py-2 text-left text-p3 font-bold", className)}
-  {...props}
->
+<Tag class={twMerge("px-4 py-2 text-left font-bold", className)} {...props}>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/styles.ts b/site/src/components/typography/styles.ts
index b859197f..01b5cd69 100644
--- a/site/src/components/typography/styles.ts
+++ b/site/src/components/typography/styles.ts
@@ -11,7 +11,7 @@ export const shared = {
   codeBlock: 'font-mono text-code text-manila-light',
   pre: 'shiki astro-code',
   em: 'italic',
-  li: 'text-p2',
+  li: '',
   ol: 'list-decimal list-outside pl-4 space-y-1',
   strong: 'font-bold',
   ul: 'list-disc list-outside pl-4 space-y-1',
diff --git a/site/src/layouts/Markdown.astro b/site/src/layouts/Markdown.astro
index caea3073..a8a5ed5a 100644
--- a/site/src/layouts/Markdown.astro
+++ b/site/src/layouts/Markdown.astro
@@ -17,14 +17,16 @@ const { title, subtitle, description } = Astro.props;
   <slot name="head" slot="head" />
   <NavBar />
   <main class="mt-10 px-6 pb-24 md:mt-20 md:px-10">
-    <article class="@container">
-      <header class="border-light-40 mx-auto mb-10 max-w-3xl border-b pb-10">
+    <article class="@container text-p2 sm:text-p15">
+      <header
+        class="mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
+      >
         <h1
-          class="mb-2 font-display text-h2 leading-tight uppercase @lg:text-h25"
+          class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15"
         >
           {title}
         </h1>
-        <p class="">{description}</p>
+        <p>{description}</p>
       </header>
       <slot />
     </article>
diff --git a/site/src/pages/blog/[...slug].astro b/site/src/pages/blog/[...slug].astro
index 4b4b2ac3..9cc04804 100644
--- a/site/src/pages/blog/[...slug].astro
+++ b/site/src/pages/blog/[...slug].astro
@@ -55,7 +55,7 @@ const jsonLdSchema = createBlogPostingSchema({
 >
   <JsonLd slot="head" schema={jsonLdSchema} />
   <article
-    class="@container"
+    class="@container text-p2 sm:text-p15"
     data-search-content
     data-llms-content
     data-llms-description={post.data.description}
diff --git a/site/src/styles/globals.css b/site/src/styles/globals.css
index c5d075dc..19387247 100644
--- a/site/src/styles/globals.css
+++ b/site/src/styles/globals.css
@@ -151,6 +151,11 @@
   --text-p1--letter-spacing: var(--tracking-tight);
   --text-p1--font-weight: var(--font-weight-normal);
 
+  --text-p15: 1.125rem; /* 18px */
+  --text-p15--line-height: 1.5;
+  --text-p15--letter-spacing: var(--tracking-normal);
+  --text-p15--font-weight: var(--font-weight-normal);
+
   --text-p2: 1rem; /* 16px */
   --text-p2--line-height: 1.5;
   --text-p2--letter-spacing: var(--tracking-normal);