diff --git a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte b/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
index 2972822850..a3db762b64 100644
--- a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
+++ b/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
@@ -30,7 +30,6 @@
 		height: 1em;
 		padding: 0.3em 0.4em;
 		border-radius: var(--sk-border-radius);
-		line-height: 1em;
 		box-sizing: content-box;
 		color: var(--sk-text-3);
 		border: 1px solid var(--sk-back-3);
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 7a9782ebb6..3953a2ad9c 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -152,8 +152,7 @@
 	}
 
 	h1 {
-		font-size: 4rem;
-		font-weight: 400;
+		font: var(--sk-font-h1);
 	}
 
 	.user {
@@ -162,16 +161,17 @@
 		position: relative;
 		margin: 1rem 0;
 		color: var(--sk-text-2);
-	}
-
-	.avatar {
-		position: absolute;
-		left: 0;
-		top: 0.1rem;
-		width: 2.4rem;
-		height: 2.4rem;
-		border: 1px solid rgba(0, 0, 0, 0.3);
-		border-radius: 0.2rem;
+		font: var(--sk-font-ui-medium);
+
+		.avatar {
+			position: absolute;
+			left: 0;
+			top: 0.1rem;
+			width: 2.4rem;
+			height: 2.4rem;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+			border-radius: var(--sk-border-radius);
+		}
 	}
 
 	.controls {
@@ -182,7 +182,7 @@
 		width: 100%;
 		height: 4rem;
 		margin: 0 0 2rem 0;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
 		outline: 1rem solid var(--sk-back-1);
@@ -204,8 +204,6 @@
 
 	.controls input,
 	.controls button {
-		font-family: inherit;
-		font-size: inherit;
 	}
 
 	.controls input[type='search'] {
@@ -218,6 +216,7 @@
 		border: 1px solid var(--sk-back-5);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
+		font: var(--sk-font-ui-large);
 	}
 
 	.controls button {
@@ -247,7 +246,7 @@
 
 	h2 {
 		color: var(--sk-text-2);
-		font-weight: 400;
+		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -263,7 +262,7 @@
 	}
 
 	li span {
-		font-size: 12px;
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index b713ac4f2d..8d04ade60b 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -345,7 +345,6 @@ export default app;`
 		left: 0;
 		width: 100%;
 		height: 100%;
-		font-family: var(--sk-font-ui);
 	}
 
 	button,
@@ -358,8 +357,6 @@ export default app;`
 
 	.icon {
 		position: relative;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		line-height: 1;
 		background-size: 1.8rem;
@@ -424,12 +421,11 @@ export default app;`
 		border: 1px solid var(--sk-back-4);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
-		font-family: var(--sk-font-ui);
 		width: 0;
 		flex: 1;
 		padding: 0.2rem 0.6rem;
 		height: 3.2rem;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.badge {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
index 0c0217b084..cff72a7291 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -36,8 +36,7 @@
 
 	.name {
 		display: none;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.name {
diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte
index bb7939b096..5ac6f770a7 100644
--- a/apps/svelte.dev/src/routes/+error.svelte
+++ b/apps/svelte.dev/src/routes/+error.svelte
@@ -61,11 +61,6 @@
 		}
 	}
 
-	h1 {
-		font-size: var(--sk-font-size-h1);
-		margin: 0 0 0.5em 0;
-	}
-
 	p {
 		margin: 1em auto;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index cae27a0f6c..b14fa08174 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -145,8 +145,7 @@
 		left: 0;
 		width: 100%;
 		color: var(--sk-text-3);
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.globe span::before {
@@ -181,8 +180,7 @@
 	}
 
 	.platforms a span {
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-3);
 		text-align: center;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/apps/svelte.dev/src/routes/_home/Features.svelte
index 671db60cf7..6b0b6ad8c2 100644
--- a/apps/svelte.dev/src/routes/_home/Features.svelte
+++ b/apps/svelte.dev/src/routes/_home/Features.svelte
@@ -64,8 +64,7 @@
 
 	.wall {
 		margin: 0;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-4);
 
 		strong {
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 9b304baa7c..d9ef3ba2fd 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -95,8 +95,7 @@
 	}
 
 	.cta {
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-theme-1);
 		text-transform: uppercase;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
index e9ed88f883..bc1926b769 100644
--- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
+++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -78,7 +78,7 @@
 	}
 
 	.hero .tagline {
-		font-size: var(--sk-font-size-h2);
+		font: var(--sk-font-h2);
 		color: var(--sk-text-2);
 		margin-bottom: 2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 2741f59231..ddd4112793 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -82,7 +82,7 @@
 
 		.description {
 			position: relative;
-			font-family: var(--sk-font-ui);
+			font: var(--sk-font-ui-medium);
 			display: flex;
 			align-items: center;
 			bottom: 0.2em;
@@ -93,10 +93,9 @@
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font-size: var(--sk-font-size-ui-medium);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
-				font-family: var(--sk-font-ui);
+				font: var(--sk-font-ui-small);
 				color: var(--sk-back-2);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 13fa62007a..51674d6fc6 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -176,13 +176,12 @@
 	}
 
 	video::cue {
-		font-size: 1.25rem;
-		line-height: 1.3;
+		font: var(--sk-font-ui-small);
 	}
 
 	@media (min-width: 600px) {
 		video::cue {
-			font-size: 1.75rem;
+			font: var(--sk-font-ui-medium);
 		}
 	}
 
@@ -218,7 +217,7 @@
 	.captions {
 		line-height: 1;
 		color: white;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		filter: var(--control-filter);
 	}
 
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 9c6db8ac5d..e508feaed3 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -75,7 +75,7 @@
 	h2 {
 		display: inline-block;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-h3);
+		font: var(--sk-font-h3);
 	}
 
 	article {
@@ -87,7 +87,7 @@
 			padding: 0 0 4rem 0;
 
 			h2 {
-				font-size: var(--sk-font-size-h1);
+				font: var(--sk-font-h1);
 				color: var(--sk-text-2);
 			}
 		}
@@ -96,7 +96,6 @@
 			display: block;
 			text-decoration: none;
 			color: var(--sk-text-2);
-			font-size: var(--sk-font-size-body);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -104,7 +103,7 @@
 		}
 
 		p {
-			font-size: var(--sk-font-size-body-small);
+			font: var(--sk-font-body-small);
 			color: var(--sk-text-3);
 			margin: 0 0 0.5em 0;
 		}
@@ -121,15 +120,20 @@
 			gap: 3em;
 		}
 
+		.featured,
+		.feed {
+			&::before {
+				font: var(--sk-font-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+		}
+
 		.featured {
 			display: block;
 
 			&::before {
 				content: 'Featured posts';
-				font-family: var(--sk-font-ui);
-				font-size: var(--sk-font-size-ui-medium);
-				text-transform: uppercase;
-				color: var(--sk-text-4);
 			}
 
 			article {
@@ -138,7 +142,7 @@
 				}
 
 				h2 {
-					font-size: var(--sk-font-size-h2);
+					font: var(--sk-font-h2);
 				}
 			}
 		}
@@ -154,17 +158,11 @@
 				content: 'Monthly updates';
 				position: absolute;
 				top: 0;
-				font-family: var(--sk-font-ui);
-				font-size: var(--sk-font-size-ui-medium);
-				text-transform: uppercase;
-				color: var(--sk-text-4);
 			}
 
 			a {
 				display: block;
-				font-family: var(--sk-font-body);
-				font-weight: 400;
-				font-size: var(--sk-font-size-body);
+				font: var(--sk-font-body);
 				color: var(--sk-text-2);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/blog/Byline.svelte b/apps/svelte.dev/src/routes/blog/Byline.svelte
index a2c06f8ea6..c82dda42e2 100644
--- a/apps/svelte.dev/src/routes/blog/Byline.svelte
+++ b/apps/svelte.dev/src/routes/blog/Byline.svelte
@@ -23,8 +23,7 @@
 	.byline {
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index be4067a251..cea8e7073d 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -51,8 +51,7 @@
 
 				figcaption {
 					color: var(--sk-text-4);
-					text-align: left;
-					font-size: var(--sk-font-size-body-small);
+					font: var(--sk-font-body-small);
 				}
 			}
 
@@ -66,20 +65,11 @@
 				width: 16rem;
 				z-index: 2;
 				color: var(--sk-text-4);
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 
 				p {
 					color: var(--sk-text-4);
-					font-family: var(--sk-font-body);
-					font-size: var(--sk-font-size-body-small);
-
-					&:first-child {
-						margin-top: 0;
-					}
-
-					&:last-child {
-						margin-bottom: 0;
-					}
+					font: inherit;
 				}
 			}
 
@@ -120,11 +110,11 @@
 	}
 
 	h1 {
-		font-size: var(--sk-font-size-h1);
+		font: var(--sk-font-h1);
 	}
 
 	.standfirst {
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 		color: var(--sk-text-3);
 		margin: 0 0 1em 0;
 	}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 5e2999d93c..0e1d44bc82 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -68,9 +68,8 @@
 <style>
 	.edit {
 		position: relative;
-		font-size: 1.4rem;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-ui);
+		font: var(--sk-font-ui-small);
 
 		a {
 			text-decoration: none;
@@ -105,14 +104,13 @@
 
 	.controls span {
 		display: block;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		font-family: var(--sk-font-ui);
 		color: var(--sk-text-3);
 	}
 
 	.controls a {
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 	}
 
 	.controls span.faded {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index 1bbd29b9ce..6c2ef53b9e 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -10,11 +10,9 @@
 
 <style>
 	.breadcrumbs {
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
-		line-height: 1.35;
 
 		span:not(:last-child)::after {
 			content: ' • ';
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index ac9056ddc2..7900fecb34 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -64,9 +64,8 @@
 			padding-top: 0.8rem;
 
 			ul {
-				margin: 0;
 				list-style: none;
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 			}
 
 			/* Only show the title link if it's in the sidebar */
@@ -144,8 +143,7 @@
 				}
 
 				h3 {
-					font-family: var(--sk-font-ui);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					color: var(--sk-text-4);
 					margin: 0;
 					display: block;
@@ -192,8 +190,7 @@
 			}
 
 			& label {
-				font-family: var(--sk-font-heading);
-				font-size: var(--sk-font-size-h3);
+				font: var(--sk-font-h3);
 				display: block;
 
 				&::before {
@@ -216,10 +213,6 @@
 					display: list-item;
 				}
 
-				li {
-					font-size: var(--sk-font-size-body-small);
-				}
-
 				a.active {
 					color: var(--sk-text-1);
 					text-decoration: underline;
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 98be90b02a..86581b4461 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -29,7 +29,6 @@
 		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
-		font-family: var(--sk-font-ui);
 	}
 
 	form {
@@ -43,8 +42,7 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		font-family: inherit;
-		font-size: var(--sk-font-size-h2);
+		font: var(--sk-font-ui-large);
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 5805f64800..c4895a7215 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -390,7 +390,7 @@
 		background: var(--sk-back-2);
 		display: flex;
 		flex-direction: column;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.navigator .solve {
@@ -402,7 +402,7 @@
 		border-right: 1px solid var(--sk-back-4);
 		color: white;
 		opacity: 1;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.navigator .solve:disabled {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index f453f2b41e..19ce85223a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -71,8 +71,7 @@
 		border: none;
 		background-color: var(--sk-back-3);
 		color: var(--sk-text-1);
-		font-family: inherit;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 	}
 
 	a:focus-visible,
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
index 8d4d168454..b403b66693 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
@@ -249,12 +249,11 @@
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
 		padding: 1rem 0;
-		font-size: 1.3rem;
-		line-height: 2rem;
+		font: var(--sk-font-mono);
 	}
 
 	.fake * {
-		font-family: var(--font-mono) !important;
+		/* font-family: var(--font-mono) !important; */
 		color: #ccc;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 0a5bfbfcee..4db4a92639 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -121,8 +121,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.progress-container {
@@ -148,14 +147,13 @@
 	}
 
 	h2 {
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-large);
+		font: var(--sk-font-ui-large);
 		margin: 0 0 0.5em 0;
 	}
 
 	p {
 		margin: 0 0 1em 0;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	button {
@@ -169,7 +167,7 @@
 	}
 
 	small {
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-3);
 		text-transform: uppercase;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
index 90272fee5b..3aef2bc36a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
@@ -172,8 +172,6 @@
 
 	header {
 		position: relative;
-		/* z-index: 2; */
-		font-family: var(--sk-font-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
@@ -246,7 +244,7 @@
 		text-overflow: ellipsis;
 		text-align: center;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 
 		.desktop {
 			display: flex;
@@ -270,9 +268,8 @@
 
 	.separator {
 		position: relative;
-		font-size: 0.8em;
+		font: var(--sk-font-ui-small);
 		opacity: 0.3;
-		top: -0.1rem;
 		display: inline-block;
 	}
 
@@ -329,8 +326,6 @@
 	}
 
 	li :global(svg) {
-		position: absolute;
-		/* left: -2rem; */
 		top: 0.1rem;
 		width: 2rem;
 		height: 2rem;
@@ -352,10 +347,9 @@
 		color: var(--sk-text-2);
 		padding: 0 0 0 0.5rem;
 		display: block;
-		font-variant-numeric: tabular-nums;
 		box-sizing: border-box;
-		font-size: var(--sk-font-size-ui-medium);
-		line-height: 1.5;
+		font: var(--sk-font-ui-medium);
+		font-variant-numeric: tabular-nums;
 	}
 
 	li button {
@@ -434,7 +428,7 @@
 
 		h1 :where(.part-title, .chapter-title) {
 			grid-row: 2 / span 1;
-			font-size: var(--sk-font-size-ui-small);
+			font: var(--sk-font-ui-small);
 			color: var(--sk-text-3);
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index ad21cac5ac..fc8bca8967 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -184,8 +184,7 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--sk-font-mono);
-		font-size: var(--sk-font-size-ui-small); /* TODO this should use a mono size */
+		font: var(--sk-font-mono);
 		padding: 1rem;
 		border-top: 1px solid var(--sk-text-4);
 		background: rgba(255, 255, 255, 0.5);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 89b57998f1..889310dd27 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -73,8 +73,7 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--font-mono);
-		font-size: var(--sk-text-xs);
+		font: var(--sk-font-mono);
 		padding: 1rem;
 		background: var(--sk-back-1);
 		border-top: 1px solid var(--sk-text-4);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
index b7285268bf..c1343fa7ee 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
@@ -43,7 +43,7 @@
 		z-index: 2;
 		margin: 0 auto;
 		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 8095d734f2..5cd2c1f4b5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -194,8 +194,7 @@
 
 		.edit {
 			color: var(--sk-text-2);
-			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-small);
 			padding: 0 0 0 1.4em;
 			background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
 			background-size: 1em 1em;
@@ -204,12 +203,17 @@
 
 	.modal-contents {
 		h2 {
-			font-size: 2.4rem;
+			font: var(--sk-font-ui-large);
 			margin: 0 0 0.5em 0;
 		}
 
+		p {
+			font: var(--sk-font-ui-medium);
+		}
+
 		label {
 			user-select: none;
+			font: var(--sk-font-ui-medium);
 		}
 
 		button {
@@ -221,6 +225,7 @@
 			margin: 1em 0 0 0;
 			border-radius: var(--sk-border-radius);
 			line-height: 1;
+			font: var(--sk-font-ui-small);
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
index 67ace5dc70..357ca88839 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
@@ -31,7 +31,6 @@
 		height: var(--size);
 		width: calc(100% - 0.6em);
 		max-width: calc(2 * var(--size));
-		top: -2px;
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
index b16bf39e8e..03b5728eae 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
@@ -7,9 +7,7 @@
 }
 
 .cm-editor .cm-scroller {
-	font-family: var(--sk-font-mono);
-	font-size: 1.3rem;
-	line-height: 2rem;
+	font: var(--sk-font-mono);
 }
 
 .cm-editor .cm-gutters {
@@ -91,8 +89,7 @@
 }
 
 .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
-	font-family: var(--font-mono);
-	font-size: 1.3rem;
+	font: var(--sk-font-mono);
 }
 
 .cm-editor .cm-panels {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
index 561a5dd1bb..4d99ec4d54 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -42,7 +42,7 @@
 		display: inline-flex;
 		border: 1px solid rgba(0, 0, 0, 0.1);
 		background-color: var(--back);
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
 		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
@@ -70,7 +70,7 @@
 		text-align: left;
 		border: 0px;
 		padding: 0.4rem 1rem 0.2rem 1rem;
-		font-size: 1.4rem;
+		font: var(--sk-font-ui-small);
 	}
 
 	li:first-child button {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index ac603dfceb..a02fe56e2b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index 4955dd8bc2..de9a7cd717 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -120,7 +120,6 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
-		font-family: var(--sk-font-ui);
 	}
 
 	:focus-visible {
@@ -132,7 +131,7 @@
 		color: var(--sk-text-1) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		padding: 0 0.5rem;
-		font-size: var(--font-size);
+		font: inherit;
 	}
 
 	.basename {
@@ -140,7 +139,6 @@
 		position: relative;
 		margin: 0;
 		padding: 0 1rem 0 calc(1rem + var(--inset));
-		font-size: var(--font-size);
 		color: inherit;
 		flex: 1;
 		height: 100%;
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
index 9ef0fd40bd..9154566436 100644
--- a/packages/repl/src/lib/CodeMirror.svelte
+++ b/packages/repl/src/lib/CodeMirror.svelte
@@ -272,7 +272,7 @@
 
 	.codemirror-container :global {
 		* {
-			font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
+			font: var(--sk-font-mono);
 		}
 
 		.mark-text {
@@ -296,7 +296,7 @@
 		.cm-tooltip {
 			border: none;
 			background: var(--sk-back-3);
-			font-family: var(--sk-font-body);
+			font-family: var(--sk-font-family-body);
 			max-width: calc(100vw - 10em);
 			position: relative;
 			filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
@@ -369,7 +369,7 @@
 		}
 
 		.cm-diagnostic :not(code) {
-			font-family: var(--sk-font-body);
+			font-family: var(--sk-font-family-body);
 		}
 
 		.cm-diagnosticText {
@@ -389,7 +389,7 @@
 
 		.cm-diagnosticText strong {
 			font-size: 0.9em;
-			font-family: var(--sk-font-mono);
+			font-family: var(--sk-font-family-mono);
 			opacity: 0.7;
 		}
 	}
@@ -403,7 +403,7 @@
 		border: none;
 		padding: 4px 4px 4px 60px;
 		resize: none;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
 		line-height: 1.7;
 		user-select: none;
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 1cee3c7356..864d67e745 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -314,7 +314,7 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-ui-small);
 		border: none;
 		padding: 0 1rem;
 		height: 100%;
@@ -377,8 +377,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-family: var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small); /* TODO can we just inherit */
 		padding: 0 1rem 1px 2em;
 		box-sizing: border-box;
 	}
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 6d07626b7f..c28dfe5a18 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -14,7 +14,7 @@
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index dd5114aeb4..893536b0f8 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -69,7 +69,7 @@
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/InputOutputToggle.svelte b/packages/repl/src/lib/InputOutputToggle.svelte
index 07efefc504..816f5794b1 100644
--- a/packages/repl/src/lib/InputOutputToggle.svelte
+++ b/packages/repl/src/lib/InputOutputToggle.svelte
@@ -26,8 +26,7 @@
 		width: 100%;
 		height: var(--pane-controls-h);
 		border-top: 1px solid var(--sk-back-5);
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		z-index: 2;
 	}
 
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index f8ef194024..f0f8feb9c6 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -46,7 +46,7 @@
 		position: relative;
 		color: white;
 		padding: 12px 16px 12px 44px;
-		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-body);
+		font: var(--sk-font-ui-small);
 		margin: 0;
 		border-top: 1px solid white;
 	}
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 3a9d8be336..754610af3c 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -111,8 +111,7 @@
 
 <style>
 	* {
-		font-family: var(--sk-font-mono);
-		font-size: var(--sk-font-size-code);
+		font: var(--sk-font-mono);
 	}
 
 	ul {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 17e2dea081..d9c1dbeafa 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -83,7 +83,7 @@
 	code {
 		height: 100%;
 		block-size: 100%;
-		font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
+		font: var(--sk-font-mono);
 	}
 
 	pre {
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 3ae29c538a..e20ecf50a1 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -29,7 +29,7 @@
 <style>
 	.options {
 		padding: 0 10px;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
 		color: var(--sk-text-2, #999);
 		line-height: 1.8;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 609dc7b908..4f4fe58a9f 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -130,7 +130,7 @@
 		background: transparent;
 		text-align: left;
 		position: relative;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-ui-small); /* TODO should probably be a global button style */
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 3f115d3095..5941eb149d 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,9 +69,9 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-text-1, #333);
+		color: var(--sk-text-1);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 134f9cc57d..db47045d3b 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -321,15 +321,14 @@
 	}
 
 	button {
-		color: var(--sk-text-2, #999);
-		font-size: var(--sk-font-size-ui-small);
-		font-family: var(--sk-font-ui);
+		color: var(--sk-text-2);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
-	}
 
-	button:hover {
-		color: var(--sk-text-1, #333);
+		&:hover {
+			color: var(--sk-text-1);
+		}
 	}
 
 	.overlay {
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index a64d792beb..bb286e07e8 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -36,7 +36,7 @@
 		--warning-bg: rgb(254, 251, 218);
 		--warning-border: rgb(242, 232, 163);
 		--json-tree-string-color: var(--sk-code-string);
-		--json-tree-font-family: var(--sk-font-mono);
+		--json-tree-font-family: var(--sk-font-family-mono);
 
 		:global(.dark) & {
 			--error-fg: rgb(235, 78, 109);
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index dd17a1d53a..2a1444bccf 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -201,7 +201,7 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		align-items: center;
 	}
 
@@ -219,7 +219,7 @@
 		grid-template-columns: minmax(0, auto) minmax(auto, 1fr);
 		grid-gap: 0 2rem;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
 
@@ -254,7 +254,7 @@
 
 	.meta {
 		color: var(--sk-text-2, #666);
-		font-family: var(--sk-font-body) !important;
+		font-family: var(--sk-font-family-body) !important;
 		font-size: 12px;
 	}
 
diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
index 0f9081f4db..514462fd65 100644
--- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
@@ -92,7 +92,7 @@
 <style>
 	.table {
 		--json-tree-font-size: 1.2rem;
-		--json-tree-font-family: var(--sk-font-mono);
+		--json-tree-font-family: var(--sk-font-family-mono);
 		margin: 8px;
 		overflow: auto;
 		max-height: 200px;
@@ -104,7 +104,7 @@
 	table {
 		border-collapse: collapse;
 		line-height: 1;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 	}
 
 	th {
@@ -118,7 +118,7 @@
 	}
 
 	td {
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 1.2rem;
 		padding: 0.5rem 1rem;
 		border-bottom: none;
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index d0f7674bb0..31c08cbc70 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -47,8 +47,7 @@
 				color: var(--sk-text-2);
 				padding: 1rem 1.3rem;
 				display: block;
-				font-family: var(--sk-font-ui);
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 				text-decoration: none;
 				line-height: 1;
 				width: 100%;
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 3b88e41f35..b29497c034 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -99,12 +99,6 @@
 			margin-top: 5rem;
 		}
 
-		p,
-		ol,
-		ul {
-			margin: 1em 0;
-		}
-
 		code,
 		kbd {
 			white-space: pre-wrap;
@@ -148,8 +142,7 @@
 					position: relative;
 					top: 0.1rem;
 					flex: 1;
-					font-family: var(--sk-font-ui);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					color: var(--sk-text-3);
 					text-overflow: ellipsis;
 					overflow: hidden;
@@ -181,7 +174,7 @@
 						justify-content: center;
 						align-items: center;
 						font-size: 1.2rem;
-						font-family: var(--sk-font-mono);
+						font-family: var(--sk-font-family-mono);
 						color: var(--sk-text-2);
 					}
 
@@ -406,7 +399,7 @@
 		}
 
 		small {
-			font-size: var(--sk-font-size-body-small);
+			font: var(--sk-font-body-small);
 			float: right;
 			pointer-events: all;
 			color: var(--sk-theme-1);
@@ -458,7 +451,7 @@
 				line-height: 1;
 				left: 0;
 				top: 0;
-				font-family: var(--sk-font-heading);
+				font-family: var(--sk-font-family-heading);
 				color: var(--sk-text-4);
 			}
 
@@ -529,8 +522,7 @@
 				align-items: center;
 				height: 3rem;
 				color: var(--sk-text-4);
-				font-style: normal;
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 				user-select: none;
 
 				&:hover {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 66fcf238d0..48e9d1a3d8 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -64,7 +64,7 @@
 
 	.sidebar {
 		padding: 3.2rem;
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-family-body);
 		height: 100%;
 		bottom: auto;
 		width: 100%;
@@ -96,8 +96,7 @@
 
 	.page {
 		display: block;
-		font-size: var(--sk-font-size-body-small);
-		font-family: var(--sk-font-body);
+		font: var(--sk-font-body-small);
 	}
 
 	[aria-current='page'] {
diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index f8dfea8932..47150d6676 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -58,7 +58,7 @@
 		text-align: left;
 		padding: 0.4rem 0.6rem;
 		border-radius: var(--sk-border-radius);
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 1.2rem;
 		white-space: pre-wrap;
 		z-index: 100;
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index ece7c61b13..1f9af19ce4 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -43,7 +43,7 @@
 <style>
 	footer {
 		max-width: 120rem;
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 		padding: 0 var(--sk-page-padding-side);
 		margin: 0 auto;
 		display: grid;
@@ -61,15 +61,13 @@
 	}
 
 	footer h2 {
-		font-size: var(--sk-font-size-h3);
+		font: var(--sk-font-h3);
 		padding-bottom: 1rem;
 	}
 
 	.links a {
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-body-small);
 		display: block;
-		line-height: 1.8;
 	}
 
 	.open-source {
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 691dd69dff..126dcff00e 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -67,7 +67,7 @@
 
 	.copy {
 		text-align: left;
-		font-size: var(--sk-font-size-body);
+		font: var(--sk-font-body);
 	}
 
 	h2 {
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index 31ab6652ef..9cd4dc37c0 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -50,11 +50,11 @@
 		padding-top: 0.4rem;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 	}
 
 	.terminal pre {
-		font-size: var(--sk-font-size-code);
+		font: var(--sk-font-mono);
 		padding: 1em;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index 06ad0708ab..f17e84843d 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -361,7 +361,7 @@
 		justify-content: start;
 		gap: 1rem;
 
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-3);
 
 		background-color: var(--sk-back-3);
@@ -390,7 +390,7 @@
 		margin: 0.3rem 0;
 		height: 4rem;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.universal .contents,
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c158289a32..685a4c6242 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -139,10 +139,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
 		background-color: var(--sk-back-2);
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		&::after {
 			content: '';
@@ -156,7 +156,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	a {
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.current-section {
@@ -164,7 +164,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 		color: var(--sk-text-3);
 		margin-left: 0.4em;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	@media (max-width: 799px) {
@@ -181,8 +181,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		:global {
 			a {
 				color: var(--sk-text-2);
-				line-height: 1;
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 
 				white-space: nowrap;
 				height: 100%;
@@ -271,7 +270,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		.appearance .caption {
 			display: block;
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-medium); /* TODO this should be inherited */
 		}
 
 		nav :global(.large) {
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 31498acb49..8d5d009dc6 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -72,7 +72,7 @@
 	nav {
 		padding: 0.29rem;
 		padding-top: 0;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		overflow-y: auto;
 
 		height: 100%;
@@ -101,11 +101,8 @@
 	h2,
 	h3 {
 		display: block;
-
 		padding-bottom: 0.8rem;
-
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		color: var(--sk-text-3);
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index da677e1a7b..12d322d46b 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -297,7 +297,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		@media (min-width: 800px) {
 			--padding: 1.6rem;
@@ -309,7 +309,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-size: var(--sk-font-size-ui-large);
+		font: var(--sk-font-ui-large);
 		width: 100%;
 		padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
 		height: 6rem;
@@ -351,7 +351,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		kbd {
 			text-transform: uppercase;
-			font-size: var(--sk-font-size-ui-small);
+			font: var(--sk-font-ui-small);
 		}
 	}
 
@@ -412,7 +412,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			padding-bottom: 1rem;
 
 			a {
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 			}
 		}
 	}
@@ -421,8 +421,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: block;
 		background: var(--background);
 		padding: var(--padding);
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		pointer-events: all;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 43cc4b6d07..65c5eb34bb 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -83,7 +83,7 @@
 			color: var(--sk-text-4);
 			text-transform: uppercase;
 			padding: calc(0.5 * var(--padding)) var(--padding);
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-medium);
 			z-index: 2;
 			user-select: none;
 
@@ -121,6 +121,7 @@
 		padding: 1.2rem var(--padding) 1.2rem calc(4rem + var(--padding));
 		overflow: hidden;
 		background: var(--background);
+		font: var(--sk-font-ui-medium);
 
 		&::before {
 			content: '';
@@ -167,7 +168,7 @@
 		strong {
 			width: 100%;
 			overflow: hidden;
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-medium);
 			color: var(--sk-text-2);
 
 			span {
@@ -177,7 +178,7 @@
 					content: ' • ';
 					position: relative;
 					color: var(--sk-text-4);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					top: -0.1rem;
 				}
 			}
@@ -212,7 +213,7 @@
 
 			span {
 				color: var(--sk-text-3);
-				font-size: var(--sk-font-size-ui-small);
+				font: var(--sk-font-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
 
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 171643332f..50158c7c6b 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -31,7 +31,7 @@ Renders a list of search results
 <style>
 	.info {
 		padding: var(--padding);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		background-color: var(--sk-back-2);
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 033264e53c..c31208e035 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -18,7 +18,7 @@ body {
 }
 
 body {
-	font-family: var(--sk-font-body);
+	font-family: var(--sk-font-family-body);
 	line-height: 1.5;
 	color: var(--sk-text-2);
 	background-color: var(--sk-back-1);
@@ -44,8 +44,16 @@ body {
 p,
 ul,
 ol {
-	font-size: var(--sk-font-size-body);
+	font: var(--sk-font-body);
 	margin: 1em 0;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 
 a {
@@ -60,24 +68,21 @@ a:hover {
 }
 
 h1 {
-	font-size: var(--sk-font-size-h1);
+	font: var(--sk-font-h1);
 }
 
 h2 {
-	font-size: var(--sk-font-size-h2);
+	font: var(--sk-font-h2);
 }
 
 h3 {
-	font-size: var(--sk-font-size-h3);
+	font: var(--sk-font-h3);
 }
 
 h1,
 h2,
 h3 {
 	position: relative;
-	font-family: var(--sk-font-heading);
-	font-weight: 500;
-	line-height: 1.2;
 	text-wrap: balance;
 	color: var(--sk-text-1);
 }
@@ -98,13 +103,13 @@ kbd {
 }
 
 code {
-	font-family: var(--sk-font-mono);
+	font-family: var(--sk-font-family-mono);
 	margin: 0 0.2rem;
 	padding: 0.4rem;
 }
 
 kbd {
-	font-family: var(--sk-font-ui);
+	font-family: var(--sk-font-family-ui);
 }
 
 pre {
@@ -117,7 +122,7 @@ pre code {
 	background-color: transparent;
 	padding: 0;
 	margin: 0;
-	font-size: var(--sk-font-size-code);
+	font-size: var(--sk-font-size-mono);
 }
 
 ::selection {
@@ -143,7 +148,7 @@ blockquote :last-child {
 /*  buttons -------------------------------- */
 input,
 button {
-	font-family: var(--sk-font-ui);
+	font-family: var(--sk-font-family-ui);
 	font-size: inherit;
 }
 
@@ -166,7 +171,7 @@ a {
 /*  tables --------------------------------- */
 table {
 	width: 100%;
-	font-size: var(--sk-font-size-body-small);
+	font: var(--sk-font-body-small);
 }
 
 td,
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 856d5b4168..6a74b62ce2 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,11 +22,11 @@
 	--sk-page-content-width: 84rem;
 	--sk-banner-bottom-height: 0px;
 
-	/* typography */
-	--sk-font-ui: 'Fira Sans', -apple-system, sans-serif;
-	--sk-font-body: 'EB Garamond', Georgia, serif;
-	--sk-font-heading: 'DM Serif Display', Georgia, serif;
-	--sk-font-mono: 'Fira Mono', monospace;
+	/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
+	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
+	--sk-font-family-body: 'EB Garamond', Georgia, serif;
+	--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
+	--sk-font-family-mono: 'Fira Mono', monospace;
 
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
@@ -36,7 +36,17 @@
 	--sk-font-size-ui-small: 1.3rem;
 	--sk-font-size-ui-medium: 1.6rem;
 	--sk-font-size-ui-large: 3rem;
-	--sk-font-size-code: 1.4rem;
+	--sk-font-size-mono: 1.4rem;
+
+	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
+	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
+	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
+	--sk-font-body: 400 var(--sk-font-size-body) / 1.5 var(--sk-font-family-body);
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / 1.5 var(--sk-font-family-body);
+	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
+	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
+	--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
+	--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;