diff --git a/package-lock.json b/package-lock.json
index 78a9362..99823cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "sdc-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fontsource-variable/public-sans": "^5.2.7",
         "@tailwindcss/vite": "^4.3.0",
         "clsx": "^2.1.1",
         "react": "^19.2.6",
@@ -915,6 +916,15 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@fontsource-variable/public-sans": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/public-sans/-/public-sans-5.2.7.tgz",
+      "integrity": "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
diff --git a/package.json b/package.json
index fc943fc..e17518d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@fontsource-variable/public-sans": "^5.2.7",
     "@tailwindcss/vite": "^4.3.0",
     "clsx": "^2.1.1",
     "react": "^19.2.6",
diff --git a/src/styles/global.css b/src/styles/global.css
index 571c383..3c9ea60 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,13 +1,12 @@
+@import "@fontsource-variable/public-sans";
+@import "@fontsource-variable/public-sans/wght-italic.css";
 @import "tailwindcss";
 @import "../tokens/tokens.css";
+@import "./typography.css";
 
 @layer base {
-  html {
-    font-size: 15px;
-  }
-
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-family: var(--font-sans);
     line-height: 1.5;
     background-color: var(--color-bg);
     color: var(--color-text);
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 0000000..b17377a
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,41 @@
+@utility text-body-strong {
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  font-weight: 700;
+}
+
+@utility text-small-strong {
+  font-size: var(--text-small);
+  line-height: var(--text-small--line-height);
+  font-weight: 700;
+}
+
+@utility text-label {
+  font-size: var(--text-h6);
+  line-height: var(--text-h6--line-height);
+  font-weight: 500;
+}
+
+@utility text-overline {
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@utility text-body-link {
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  font-weight: 700;
+  text-decoration-line: underline;
+  color: var(--color-blue-02);
+}
+
+@utility text-small-link {
+  font-size: var(--text-small);
+  line-height: var(--text-small--line-height);
+  font-weight: 700;
+  text-decoration-line: underline;
+  color: var(--color-blue-02);
+}