diff --git a/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx b/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
index 72f2992cd..1c9ec4073 100644
--- a/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
+++ b/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
@@ -12,3 +12,7 @@ status: in-development
 ## Font Weights
 
 <FontWeightsTable />
+
+## Typography
+
+<Typography />
diff --git a/apps/docs/src/components/document/mdx.tsx b/apps/docs/src/components/document/mdx.tsx
index a37ffdf5d..1c2fc98ff 100644
--- a/apps/docs/src/components/document/mdx.tsx
+++ b/apps/docs/src/components/document/mdx.tsx
@@ -3,6 +3,7 @@ import { Heading } from '../typography/heading';
 import { ColorPrimitives } from '@/components/document/color/color-primitives';
 import { FontSizesTable } from './typography/font-sizes-table';
 import { FontWeightsTable } from './typography/font-weights-table';
+import { Typography } from './typography/typography';
 
 export type MdxProps = {
   code: string;
@@ -18,6 +19,7 @@ export function Mdx({ code }: MdxProps) {
         ColorPrimitives: () => <ColorPrimitives />,
         FontSizesTable: () => <FontSizesTable />,
         FontWeightsTable: () => <FontWeightsTable />,
+        Typography: () => <Typography />,
       }}
     />
   );
diff --git a/apps/docs/src/components/document/typography/typography.tsx b/apps/docs/src/components/document/typography/typography.tsx
new file mode 100644
index 000000000..62b054dc9
--- /dev/null
+++ b/apps/docs/src/components/document/typography/typography.tsx
@@ -0,0 +1,118 @@
+import { meta } from '@govie-ds/tokens';
+import { objectKeys } from 'ts-extras';
+import { Table, Td } from './table';
+import { TokenName } from '../color/token-name';
+import { P } from 'vitest/dist/reporters-yx5ZTtEV.js';
+
+function remToPx(remString: string) {
+  return `${Number(remString.replace('rem', '')) * 16}px`;
+}
+
+function unitlessToPx(unitless: number) {
+  return `${unitless * 16}px`;
+}
+
+function CellLabel({ label }: { label: string }) {
+  return <p className="font-semibold">{label}:</p>;
+}
+
+function TypographyCell({
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+}: {
+  fontFamily: string[];
+  fontSize: string;
+  fontWeight: number;
+  lineHeight: number;
+}) {
+  return (
+    <Td className="text-sm">
+      <div className="grid grid-cols-2">
+        <CellLabel label="Font family" />
+        <p>{fontFamily.join(', ')}</p>
+        <CellLabel label="Font size" />
+        <p>
+          {fontSize} ({remToPx(fontSize)})
+        </p>
+        <CellLabel label="Font weight" />
+        <p>{fontWeight}</p>
+        <CellLabel label="Line height" />
+        <p>
+          {lineHeight} ({unitlessToPx(lineHeight)})
+        </p>
+      </div>
+    </Td>
+  );
+}
+
+// TODO: type
+function TypographyTable({
+  name,
+  tokens,
+}: {
+  name: string;
+  tokens: Record<string, { regular: any; bold: any }>;
+}) {
+  return (
+    <Table
+      headers={['Token', 'Regular', 'Bold']} // , 'Example']}
+      ids={objectKeys(tokens)}
+      renderRow={(id) => {
+        const { $value: regularValue } = tokens[id].regular;
+
+        const { $value: boldValue } = tokens[id].bold;
+
+        const {
+          fontFamily: fontFamilyRegular,
+          fontSize: fontSizeRegular,
+          fontWeight: fontWeightRegular,
+          lineHeight: lineHeightRegular,
+        } = regularValue;
+
+        const {
+          fontFamily: fontFamilyBold,
+          fontSize: fontSizeBold,
+          fontWeight: fontWeightBold,
+          lineHeight: lineHeightBold,
+        } = boldValue;
+
+        return (
+          <tr key={id}>
+            <Td className="whitespace-nowrap w-[1px] text-sm">
+              <TokenName name={`${name}/${id}`} />
+            </Td>
+            <TypographyCell
+              fontFamily={fontFamilyRegular}
+              fontSize={fontSizeRegular}
+              fontWeight={fontWeightRegular}
+              lineHeight={lineHeightRegular}
+            />
+            <TypographyCell
+              fontFamily={fontFamilyBold}
+              fontSize={fontSizeBold}
+              fontWeight={fontWeightBold}
+              lineHeight={lineHeightBold}
+            />
+          </tr>
+        );
+      }}
+    />
+  );
+}
+
+export function Typography() {
+  return (
+    <div className="flex flex-col gap-2xl">
+      <TypographyTable
+        name="heading"
+        tokens={meta.light.resolved.primitive.heading}
+      />
+      <TypographyTable
+        name="text"
+        tokens={meta.light.resolved.primitive.text}
+      />
+    </div>
+  );
+}
diff --git a/tokens/tokens/light/primitive/heading.json b/tokens/tokens/light/primitive/heading.json
index 8e5fe0aff..c0d1061cf 100644
--- a/tokens/tokens/light/primitive/heading.json
+++ b/tokens/tokens/light/primitive/heading.json
@@ -148,7 +148,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1000}",
             "fontWeight": "{primitive.font.weight.400}",
-            "lineHeight": "{primitive.font.lineHeight.900}"
+            "lineHeight": "{primitive.font.lineHeight.1000}"
           }
         },
         "bold": {
@@ -157,7 +157,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1000}",
             "fontWeight": "{primitive.font.weight.700}",
-            "lineHeight": "{primitive.font.lineHeight.900}"
+            "lineHeight": "{primitive.font.lineHeight.1000}"
           }
         }
       },
@@ -168,7 +168,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1100}",
             "fontWeight": "{primitive.font.weight.400}",
-            "lineHeight": "{primitive.font.lineHeight.1000}"
+            "lineHeight": "{primitive.font.lineHeight.1100}"
           }
         },
         "bold": {
@@ -177,7 +177,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1100}",
             "fontWeight": "{primitive.font.weight.700}",
-            "lineHeight": "{primitive.font.lineHeight.1000}"
+            "lineHeight": "{primitive.font.lineHeight.1100}"
           }
         }
       },
@@ -188,7 +188,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1200}",
             "fontWeight": "{primitive.font.weight.400}",
-            "lineHeight": "{primitive.font.lineHeight.1100}"
+            "lineHeight": "{primitive.font.lineHeight.1200}"
           }
         },
         "bold": {
@@ -197,7 +197,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1200}",
             "fontWeight": "{primitive.font.weight.700}",
-            "lineHeight": "{primitive.font.lineHeight.1100}"
+            "lineHeight": "{primitive.font.lineHeight.1200}"
           }
         }
       },
@@ -208,7 +208,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1300}",
             "fontWeight": "{primitive.font.weight.400}",
-            "lineHeight": "{primitive.font.lineHeight.1200}"
+            "lineHeight": "{primitive.font.lineHeight.1300}"
           }
         },
         "bold": {
@@ -217,7 +217,7 @@
             "fontFamily": "{primitive.font.family.primary}",
             "fontSize": "{primitive.font.size.1300}",
             "fontWeight": "{primitive.font.weight.700}",
-            "lineHeight": "{primitive.font.lineHeight.1200}"
+            "lineHeight": "{primitive.font.lineHeight.1300}"
           }
         }
       }