diff --git a/mdx-components.tsx b/mdx-components.tsx
index 97e1948..a286ff7 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -5,17 +5,17 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ...components,
     // Typography
     h1: (props) => (
-      <h1 {...props} className="scroll-m-20 font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-10 mb-4 text-ink">
+      <h1 {...props} className="scroll-m-20 heading-xl text-ink mt-10 mb-4">
         {props.children}
       </h1>
     ),
     h2: (props) => (
-      <h2 {...props} className="scroll-m-20 border-b border-border pb-2 font-sans text-3xl font-semibold tracking-tight mt-12 mb-4 first:mt-0 text-ink">
+      <h2 {...props} className="scroll-m-20 border-b border-border pb-2 heading-lg text-ink mt-12 mb-4 first:mt-0">
         {props.children}
       </h2>
     ),
     h3: (props) => (
-      <h3 {...props} className="scroll-m-20 font-sans text-2xl font-semibold tracking-tight mt-8 mb-3 text-ink">
+      <h3 {...props} className="scroll-m-20 heading-md text-ink mt-8 mb-3">
         {props.children}
       </h3>
     ),