diff --git a/styles/components/_banner.scss b/styles/components/_banner.scss
index 134f7a7..e4d818a 100644
--- a/styles/components/_banner.scss
+++ b/styles/components/_banner.scss
@@ -42,7 +42,7 @@
 		> div {
 			display: inline-block;
 			padding: var(--gap-s) var(--gap-m);
-			font-size: typography.$subheading-size;
+			font-size: var(--text-l);
 			background-color: colors.$yellow-600;
 
 			@include colors.coderdojo-theme {
@@ -66,8 +66,8 @@
 
 		> .title {
 			padding: 0 var(--gap-m);
-			line-height: 5rem;
-			font-size: typography.$title-size;
+			line-height: var(--scale-xl);
+			font-size: var(--text-2xl);
 			font-weight: typography.$emphasized-weight;
 			background-color: colors.$teal-500;
 
diff --git a/styles/components/_markup.scss b/styles/components/_markup.scss
index 805321c..b687c30 100644
--- a/styles/components/_markup.scss
+++ b/styles/components/_markup.scss
@@ -12,8 +12,8 @@ body {
 	@extend %content-gutter;
 	margin-top: var(--gap-2xl);
 	margin-bottom: var(--gap-l);
-	font-size: typography.$title-size;
-	line-height: typography.$heading-line-height;
+	font-size: var(--text-2xl);
+	line-height: var(--scale-s);
 	text-align: center;
 	overflow-wrap: anywhere;
 }
@@ -26,17 +26,17 @@ h1 {
 	@extend %content-gutter;
 	margin-top: var(--gap-l);
 	margin-bottom: var(--gap-l);
-	font-size: typography.$heading-size;
-	line-height: typography.$heading-line-height;
+	font-size: var(--text-xl);
+	line-height: var(--scale-s);
 	overflow-wrap: anywhere;
 
 	&:after {
 		content: '';
 		display: block;
-		width: 8rem;
-		height: 0.3rem;
-		margin-top: 0.2rem;
-		border-radius: 0.5rem;
+		width: 8ch;
+		height: 0.3ex;
+		margin-top: 0.2ex;
+		border-radius: 0.3ex;
 		background-color: colors.$blue-800;
 
 		@include colors.coderdojo-theme {
@@ -51,8 +51,8 @@ h2 {
 
 %subheading {
 	@extend %content-gutter;
-	font-size: typography.$subheading-size;
-	line-height: typography.$heading-line-height;
+	font-size: var(--text-l);
+	line-height: var(--scale-s);
 	overflow-wrap: anywhere;
 }
 
@@ -91,7 +91,7 @@ dd {
 
 em {
 	background-color: colors.$teal-300;
-	padding: 0 var(--gap-s) 0 var(--gap-s);
+	padding: 0 0.5ch;
 
 	@include colors.coderdojo-theme {
 		background-color: colors.$orange-300;
@@ -129,7 +129,7 @@ blockquote {
 	> p:only-child > a:only-child > img:only-child {
 		display: block;
 		max-width: 100%;
-		max-height: 60rem;
+		max-height: max(20em, 80vh);
 		margin: 0 auto;
 	}
 }
@@ -141,7 +141,7 @@ blockquote {
 	max-width: layout.$narrow-content-width;
 	text-align: center;
 	text-decoration: none;
-	line-height: 3rem;
+	line-height: var(--scale-l);
 	border: 1px solid colors.$main-text;
 	transition:
 		font motion.$subtle,
@@ -151,7 +151,6 @@ blockquote {
 	&:hover {
 		border-color: colors.$blue-800;
 		font-weight: typography.$emphasized-weight;
-		font-size: 110%;
 
 		@include colors.coderdojo-theme {
 			border-color: colors.$brown-800;
@@ -169,27 +168,7 @@ ul.link-grid {
 	list-style: none;
 
 	@media screen and (min-width: layout.$breakpoint) {
-		&:not(.large) {
 			grid-template-columns: repeat(3, 1fr);
-		}
-
-		&.large {
-			gap: var(--gap-m);
-
-			> li > a {
-				display: flex;
-				align-items: center;
-
-				> img {
-					max-width: 6rem;
-					margin-right: var(--gap-m);
-				}
-			}
-		}
-	}
-
-	&.large {
-		@extend %narrow-content-gutter;
 	}
 
 	> li {
@@ -206,8 +185,8 @@ ul.link-grid {
 			> img {
 				display: block;
 				margin: 0 auto var(--gap-s) auto;
-				max-width: 100%;
-				max-height: 6rem;
+				max-width: 20ch;
+				max-height: 5em;
 			}
 
 			&:hover {
diff --git a/styles/components/_site.scss b/styles/components/_site.scss
index 94a1070..9546a56 100644
--- a/styles/components/_site.scss
+++ b/styles/components/_site.scss
@@ -5,7 +5,7 @@
 
 @mixin header-item {
 	padding: 0 var(--gap-m);
-	line-height: 4rem;
+	line-height: var(--scale-xl);
 }
 
 // The site logo text. More specific styles for this element are also present
@@ -76,10 +76,6 @@
 		> ul {
 			display: flex;
 			margin-bottom: 0;
-
-			> li {
-				margin: 0;
-			}
 		}
 
 		a {
@@ -92,6 +88,10 @@
 		margin: 0;
 		padding: 0;
 		list-style: none;
+
+		> li {
+			margin: 0;
+		}
 	}
 
 	a {
@@ -107,10 +107,6 @@
 .site-mobile-navigation {
 	cursor: pointer;
 
-	li {
-		margin-block: 0;
-	}
-
 	> summary {
 		display: block;
 		@include header-item;
@@ -167,7 +163,7 @@
 	> .site-logo {
 		flex-grow: 1;
 		margin: 0;
-		font-size: typography.$subheading-size;
+		font-size: var(--text-l);
 		text-decoration: none;
 		@include header-item;
 	}
diff --git a/styles/components/_timeline.scss b/styles/components/_timeline.scss
index cbd2cfa..28bef44 100644
--- a/styles/components/_timeline.scss
+++ b/styles/components/_timeline.scss
@@ -47,7 +47,7 @@
 			> time {
 				display: block;
 				padding-inline: var(--gap-s);
-				font-size: typography.$base-size;
+				font-size: var(--text-m);
 				font-weight: typography.$normal-weight;
 			}
 		}
@@ -185,7 +185,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		font-size: typography.$heading-size;
+		font-size: var(--text-xl);
 		background-color: #00000077;
 		color: colors.$gray-50;
 		opacity: 0;
diff --git a/styles/lib/_layout.scss b/styles/lib/_layout.scss
index 8f7385c..76a5fba 100644
--- a/styles/lib/_layout.scss
+++ b/styles/lib/_layout.scss
@@ -53,9 +53,22 @@ $wide-content-width: 80rem;
 }
 
 @mixin setup {
-	$-gap-lower-base: 1.5rem;
-	$-gap-upper-base: 2rem;
 	:root {
+		$-text-lower-base: 1rem / 20 * 16;
+		$-text-upper-base: 1rem;
+		--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
+		--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
+		--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
+		--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};
+
+		$-line-height-factor: 1.5;
+		--scale-s: #{0.8 * $-line-height-factor};
+		--scale-m: #{$-line-height-factor};
+		--scale-l: #{1.5 * $-line-height-factor};
+		--scale-xl: #{1.7 * $-line-height-factor};
+
+		$-gap-lower-base: $-text-lower-base * $-line-height-factor;
+		$-gap-upper-base: $-text-upper-base * $-line-height-factor;
 		--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
 		--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
 		--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
diff --git a/styles/lib/_typography.scss b/styles/lib/_typography.scss
index b153d5f..7aa92f2 100644
--- a/styles/lib/_typography.scss
+++ b/styles/lib/_typography.scss
@@ -1,15 +1,6 @@
 $normal-weight: 400;
 $emphasized-weight: 600;
 
-// This is the major third type scale.
-$base-size: 1rem;
-$title-size: 2.44rem;
-$heading-size: 1.95rem;
-$subheading-size: 1.56rem;
-
-$base-line-height: 1.5;
-$heading-line-height: 1.3;
-
 $comfortaa-weights: (
 	'Light': 300,
 	'Regular': 400,
@@ -49,7 +40,7 @@ $comfortaa-weights: (
 	}
 
 	body {
-		font-size: $base-size;
-		line-height: $base-line-height;
+		font-size: var(--text-m);
+		line-height: var(--scale-m);
 	}
 }