diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json
index 303ad125aea..abd726df69c 100644
--- a/build/lib/stylelint/vscode-known-variables.json
+++ b/build/lib/stylelint/vscode-known-variables.json
@@ -55,7 +55,13 @@
 		"--vscode-chat-checkpointSeparator",
 		"--vscode-chat-editedFileForeground",
 		"--vscode-chat-font-family",
-		"--vscode-chat-font-size",
+		"--vscode-chat-font-size-body-l",
+		"--vscode-chat-font-size-body-m",
+		"--vscode-chat-font-size-body-s",
+		"--vscode-chat-font-size-body-xs",
+		"--vscode-chat-font-size-title-l",
+		"--vscode-chat-font-size-title-m",
+		"--vscode-chat-font-size-title-s",
 		"--vscode-chat-linesAddedForeground",
 		"--vscode-chat-linesRemovedForeground",
 		"--vscode-chat-requestBackground",
diff --git a/src/vs/workbench/contrib/chat/browser/chatWidget.ts b/src/vs/workbench/contrib/chat/browser/chatWidget.ts
index fe6dad047a0..d6d29e6453d 100644
--- a/src/vs/workbench/contrib/chat/browser/chatWidget.ts
+++ b/src/vs/workbench/contrib/chat/browser/chatWidget.ts
@@ -616,7 +616,14 @@ export class ChatWidget extends Disposable implements IChatWidget {
 			const fontFamily = chatFontFamily.read(r);
 
 			this.container.style.setProperty('--vscode-chat-font-family', fontFamily === 'default' ? null : fontFamily);
-			this.container.style.setProperty('--vscode-chat-font-size', `${fontSize}px`);
+
+			this.container.style.setProperty('--vscode-chat-font-size-body-xs', `${Math.round(fontSize * (11 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-body-s', `${Math.round(fontSize * (12 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-body-m', `${Math.round(fontSize * (13 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-body-l', `${Math.round(fontSize * (14 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-title-s', `${Math.round(fontSize * (14 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-title-m', `${Math.round(fontSize * (16 / 13))}px`);
+			this.container.style.setProperty('--vscode-chat-font-size-title-l', `${Math.round(fontSize * (20 / 13))}px`);
 		}));
 
 		this._register(this.editorOptions.onDidChange(() => this.onDidStyleChange()));
diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css
index 44372d70725..c9d49eedd19 100644
--- a/src/vs/workbench/contrib/chat/browser/media/chat.css
+++ b/src/vs/workbench/contrib/chat/browser/media/chat.css
@@ -225,7 +225,7 @@
 .interactive-item-container .chat-footer-details {
 	display: none;
 	padding: 0;
-	font-size: 11px;
+	font-size: var(--vscode-chat-font-size-body-xs);
 	opacity: 0.7;
 	color: var(--vscode-descriptionForeground);
 	line-height: 16px;
@@ -334,7 +334,7 @@
 }
 
 .interactive-item-container .value .rendered-markdown h1 {
-	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.54); /* 20px when base is 13px */
+	font-size: var(--vscode-chat-font-size-title-l);
 	font-weight: 600;
 	margin: 16px 0 8px 0;
 	font-family: var(--vscode-chat-font-family, inherit);
@@ -342,14 +342,14 @@
 }
 
 .interactive-item-container .value .rendered-markdown h2 {
-	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.23); /* 16px when base is 13px */
+	font-size: var(--vscode-chat-font-size-title-m);
 	font-weight: 600;
 	margin: 16px 0 8px 0;
 	font-family: var(--vscode-chat-font-family, inherit);
 }
 
 .interactive-item-container .value .rendered-markdown h3 {
-	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.08); /* 14px when base is 13px */
+	font-size: var(--vscode-chat-font-size-title-s);
 	font-weight: 600;
 	margin: 16px 0 8px 0;
 	font-family: var(--vscode-chat-font-family, inherit);
@@ -360,7 +360,7 @@
 }
 
 .interactive-item-container.editing-session .value .rendered-markdown h3 {
-	font-size: var(--vscode-chat-font-size, 13px);
+	font-size: var(--vscode-chat-font-size-body-m);
 	margin: 0 0 8px 0;
 	font-weight: unset;
 }
@@ -419,7 +419,7 @@
 .interactive-item-container .value .rendered-markdown {
 	letter-spacing: 0.01em;
 	line-height: 1.5em;
-	font-size: var(--vscode-chat-font-size, 13px);
+	font-size: var(--vscode-chat-font-size-body-m);
 	font-family: var(--vscode-chat-font-family, inherit);
 }
 
@@ -512,10 +512,10 @@
 		overflow: hidden;
 
 		.output-title {
-			font-size: 13px;
 			padding: 8px 12px;
 			background: var(--vscode-editorWidget-background);
 			border-bottom: 1px solid var(--vscode-widget-border);
+			font-size: var(--vscode-chat-font-size-body-m);
 		}
 
 		.output-error {
@@ -535,7 +535,7 @@
 
 			.output-error-details {
 				font-family: var(--monaco-monospace-font);
-				font-size: 11px;
+				font-size: var(--vscode-chat-font-size-body-xs);
 			}
 		}
 	}
@@ -595,7 +595,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	.monaco-tokenized-source,
 	code {
 		font-family: var(--monaco-monospace-font);
-		font-size: calc(var(--vscode-chat-font-size, 13px) * 0.92); /* 12px when base is 13px */
+		font-size: var(--vscode-chat-font-size-body-s);
 		color: var(--vscode-textPreformat-foreground);
 		background-color: var(--vscode-textPreformat-background);
 		padding: 1px 3px;
@@ -1848,12 +1848,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 .interactive-session .chat-used-context-label {
-	font-size: 12px;
+	font-size: var(--vscode-chat-font-size-body-s);
 	color: var(--vscode-descriptionForeground);
 	user-select: none;
 
 	code {
-		font-size: 11px;
+		font-size: var(--vscode-chat-font-size-body-xs);
 	}
 }
 
@@ -1907,7 +1907,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .interactive-session .chat-file-changes-label .monaco-button .codicon,
 .interactive-session .chat-used-context-label .monaco-button .codicon {
-	font-size: 12px;
+	font-size: var(--vscode-chat-font-size-body-s);
 }
 
 .interactive-item-container .progress-container {
@@ -1922,10 +1922,10 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 	> .codicon[class*='codicon-'] {
 		height: 12px;
-		font-size: 12px;
+		font-size: var(--vscode-chat-font-size-body-s);
 
 		&::before {
-			font-size: 12px;
+			font-size: var(--vscode-chat-font-size-body-s);
 		}
 	}
 
@@ -1943,11 +1943,11 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 		& > p {
 			color: var(--vscode-descriptionForeground);
-			font-size: 12px;
+			font-size: var(--vscode-chat-font-size-body-s);
 			margin: 0;
 
 			code {
-				font-size: 11px;
+				font-size: var(--vscode-chat-font-size-body-xs);
 			}
 		}
 
@@ -2541,7 +2541,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 
 .chat-todo-list-widget .todo-list-title {
 	font-weight: normal;
-	font-size: 12px;
+	font-size: var(--vscode-chat-font-size-body-s);
 	color: var(--vscode-descriptionForeground);
 }
 
@@ -2627,7 +2627,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	}
 
 	.chat-thinking-text {
-		font-size: 12px;
+		font-size: var(--vscode-chat-font-size-body-s);
 		padding: 3px 10px;
 		line-height: inherit;
 		display: flex;