diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss
index d51193553..c0692dcfb 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss
@@ -65,7 +65,7 @@ $image-min-height: variables.$g-spacer-unit * 12;
 	}
 
 	&__label {
-		@include typography.sofia-pro-heading-md;
+		@include typography.heading-md;
 	}
 
 	// Mobile keeps only the arrow at the far edge; desktop groups the selected icons and arrow at
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss
index 67ef1835a..273461231 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss
@@ -68,7 +68,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 	overflow: hidden;
 
 	&__title {
-		@include typography.sofia-pro-heading-2xl;
+		@include typography.heading-2xl;
 
 		// The shapes layer reaches into the title, so the title has to sit in front of it.
 		position: relative;
@@ -77,7 +77,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		text-align: center;
 
 		@media (max-width: variables.$g-bp2) {
-			@include typography.sofia-pro-heading-xl;
+			@include typography.heading-xl;
 
 			margin-bottom: variables.$g-spacer-unit * 6;
 		}
@@ -222,7 +222,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 	}
 
 	&__pill {
-		@include typography.sofia-pro-heading-lg;
+		@include typography.heading-lg;
 
 		position: relative;
 		z-index: 1;
@@ -233,7 +233,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
 		text-align: center;
 
 		@media (max-width: variables.$g-bp2) {
-			@include typography.sofia-pro-heading-md;
+			@include typography.heading-md;
 
 			display: flex;
 			align-items: center;
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss
index 4cc5178be..33206a4ca 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss
@@ -1,8 +1,6 @@
 @use "../../../../shared/styles/settings/colors" as colors;
 @use "../../../../shared/styles/settings/variables" as variables;
 
-// Same ratio as the video player on an object's detail page.
-$media-aspect-ratio: 16 / 9;
 $card-radius: variables.$g-spacer-unit * 1.5;
 
 .c-driekeuzespeler-modal {
@@ -10,7 +8,7 @@ $card-radius: variables.$g-spacer-unit * 1.5;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		aspect-ratio: $media-aspect-ratio;
+		aspect-ratio: 16 / 9;
 		width: 100%;
 
 		// Keeps a tall newspaper page inside the viewport instead of pushing the metadata panel and
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss
index 0192d1534..96bdc1979 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss
@@ -260,13 +260,8 @@ $hero-carousel-search-radius-desktop: 3.2rem;
 				}
 
 				&-label {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					font-family: typography.$font-family;
-					font-size: 1.8rem;
-					font-style: normal;
-					font-weight: 800;
+					@include typography.truncate;
+					@include typography.heading-md;
 					line-height: 2rem;
 					color: colors.$white;
 				}
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss
index 20ac0308d..dfc3841e0 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss
@@ -62,7 +62,7 @@ $mark-line-height: variables.$g-spacer-unit * 9;
 		white-space: pre-line;
 
 		// Figma node 455:5724, style "P - XL".
-		@include typography.sofia-pro-body-xl;
+		@include typography.body-xl;
 
 		@media (max-width: variables.$g-bp2) {
 			// Figma node 455:7186: gap below the mark, plus the padding on the text group that
@@ -77,7 +77,7 @@ $mark-line-height: variables.$g-spacer-unit * 9;
 		margin-top: variables.$g-spacer-unit;
 
 		// Figma node 455:5725, style "P - S".
-		@include typography.sofia-pro-body-xs;
+		@include typography.body-xs;
 
 		@media (max-width: variables.$g-bp2) {
 			margin-bottom: variables.$g-spacer-unit;
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss
index b9a6cffd8..e8431647f 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss
@@ -44,7 +44,7 @@ $pattern-mobile-overshoot: 15rem;
 			background: var(--pattern-color, transparent);
 			padding: variables.$g-spacer-unit * 6;
 
-			@include typography.sofia-pro-body;
+			@include typography.body;
 
 			@media (max-width: variables.$g-bp4) {
 				padding: calc(#{variables.$g-spacer-unit} * 3) calc(#{variables.$g-spacer-unit} * 2.5) !important;
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss
index b1bed8a80..1dd67066e 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss
@@ -70,13 +70,13 @@ $pattern-mobile-overshoot: 10rem;
 			width: 100%;
 			white-space: wrap;
 
-			@include typography.sofia-pro-heading-xl(true);
+			@include typography.heading-xl(true);
 		}
 
 		&-text {
 			color: colors.$neutral;
 
-			@include typography.sofia-pro-body(true);
+			@include typography.body(true);
 
 			// The rich text paragraph margins space the paragraphs apart, but the title's
 			// padding does the spacing above the first one.
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss
index 8b850f4c0..9dfa18618 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss
@@ -21,7 +21,7 @@
 
 		&-title {
 			color: colors.$color-gray-1000;
-			@include typography.sofia-pro-heading-lg();
+			@include typography.heading-lg();
 			@include typography.truncate();
 			width: fit-content;
 		}
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss
index c632d7509..80b62b099 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss
@@ -49,7 +49,7 @@ $max-item-height: 37.6rem;
 	}
 
 	.c-block-objects-grid__title {
-		@include typography.sofia-pro-heading-lg($important: false);
+		@include typography.heading-lg($important: false);
 
 		color: colors.$color-gray-1000;
 		margin-bottom: 2.2rem;
@@ -194,7 +194,7 @@ $max-item-height: 37.6rem;
 	}
 
 	.c-block-objects-grid__tile-title {
-		@include typography.sofia-pro-heading-sm($important: false);
+		@include typography.heading-sm($important: false);
 		font-size: 1.6rem;
 
 		@include typography.truncate-after-x-lines(2);
@@ -202,7 +202,7 @@ $max-item-height: 37.6rem;
 	}
 
 	.c-block-objects-grid__tile-maintainer {
-		@include typography.sofia-pro-body-sm($important: false);
+		@include typography.body-sm($important: false);
 		line-height: 2rem;
 
 		@include typography.truncate;
@@ -222,7 +222,7 @@ $max-item-height: 37.6rem;
 		background-color: colors.$color-gray-1000;
 		color: colors.$white;
 
-		@include typography.sofia-pro-heading;
+		@include typography.heading;
 
 		text-decoration: none;
 
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss
index ec15923de..dfe800d32 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss
@@ -8,7 +8,7 @@ $tile-padding: 3rem;
 $description-animation-speed: 0.3s;
 
 .c-block-overview-themes {
-	@include typography.sofia-pro-heading-xl;
+	@include typography.heading-xl;
 
 	&__group {
 		position: relative;
@@ -50,7 +50,7 @@ $description-animation-speed: 0.3s;
 		position: relative;
 		z-index: 1;
 
-		@include typography.sofia-pro-heading-xl(true);
+		@include typography.heading-xl(true);
 
 		// Reset so the heading level (h1-h4, chosen for semantics only) never affects the visual style.
 		margin: 0 0 (variables.$g-spacer-unit * 3) !important;
@@ -181,7 +181,7 @@ $description-animation-speed: 0.3s;
 	&__tile-title {
 		color: colors.$white;
 
-		@include typography.sofia-pro-heading-md;
+		@include typography.heading-md;
 		@include typography.truncate-after-x-lines(2);
 	}
 
@@ -204,7 +204,7 @@ $description-animation-speed: 0.3s;
 			margin-top $description-animation-speed ease-out;
 		color: colors.$white;
 
-		@include typography.sofia-pro-body-sm;
+		@include typography.body-sm;
 	}
 
 	.c-block-overview-themes__tile {
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss
index 944a69cf2..8ed771b8f 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss
@@ -25,7 +25,7 @@ $slide-width: 28rem;
 		&-title {
 			color: colors.$color-gray-1000;
 
-			@include typography.sofia-pro-heading-lg;
+			@include typography.heading-lg;
 			@include typography.truncate;
 
 			width: fit-content;
@@ -140,7 +140,7 @@ $slide-width: 28rem;
 			}
 
 			.c-block-overview-with-carousel__slide-text {
-				@include typography.sofia-pro-heading-xl;
+				@include typography.heading-xl;
 			}
 		}
 
@@ -174,7 +174,7 @@ $slide-width: 28rem;
 
 			color: colors.$color-gray-1000;
 
-			@include typography.sofia-pro-heading-md;
+			@include typography.heading-md;
 		}
 	}
 }
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss
index fcd7bcc94..65db1c826 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss
@@ -34,7 +34,7 @@ $slide-image-height-mobile: 12rem;
 			width: fit-content;
 
 			@include typography.truncate;
-			@include typography.sofia-pro-heading-lg;
+			@include typography.heading-lg;
 
 			@media (max-width: variables.$g-bp2) {
 				line-height: 2.6rem;
@@ -43,7 +43,7 @@ $slide-image-height-mobile: 12rem;
 
 		&-subtitle {
 			@include typography.truncate-after-x-lines(3);
-			@include typography.sofia-pro-body-sm;
+			@include typography.body-sm;
 
 			color: colors.$neutral;
 			width: 100%;
@@ -246,7 +246,7 @@ $slide-image-height-mobile: 12rem;
 			&-title {
 				color: colors.$color-gray-1000;
 
-				@include typography.sofia-pro-heading-md;
+				@include typography.heading-md;
 
 				width: 100%;
 
@@ -264,7 +264,7 @@ $slide-image-height-mobile: 12rem;
 				width: 100%;
 				color: colors.$color-gray-1000;
 
-				@include typography.sofia-pro-body-sm;
+				@include typography.body-sm;
 
 
 				@media (max-width: variables.$g-bp2) {
@@ -289,7 +289,7 @@ $slide-image-height-mobile: 12rem;
 		}
 
 		&-label {
-			@include typography.sofia-pro-heading-md;
+			@include typography.heading-md;
 			@include typography.truncate-after-x-lines(3);
 		}
 
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
index d082f6f8d..0f900f582 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
@@ -129,7 +129,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 		align-self: baseline;
 		padding-right: 1rem;
 
-		@include typography.sofia-pro-heading-xl;
+		@include typography.heading-xl;
 
 		// Taller than the font itself, so the year lines up with the top of the node's content
 		line-height: 5.6rem;
@@ -148,7 +148,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 		display: block;
 		padding-left: $line-content-gap;
 
-		@include typography.sofia-pro-heading-lg;
+		@include typography.heading-lg;
 
 		line-height: 2.6rem;
 		color: colors.$color-gray-300;
@@ -227,19 +227,19 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 
 	&__node-text {
 		padding-bottom: $node-background-padding;
+
+		&:first-child .c-block-timeline__node-title {
+			margin-top: 0;
+		}
 	}
 
 	&__node-title {
 		margin: (variables.$g-spacer-unit * 4) 0 0;
 
-		&:first-child {
-			margin-top: 0;
-		}
-
-		@include typography.sofia-pro-heading-lg;
+		@include typography.heading-lg;
 
 		@media (max-width: variables.$g-bp3) {
-			@include typography.sofia-pro-heading-md;
+			@include typography.heading-md;
 			margin: (variables.$g-spacer-unit * 3) 0 0;
 		}
 	}
@@ -247,10 +247,10 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 	&__node-description {
 		margin-top: variables.$g-spacer-unit * 2;
 
-		@include typography.sofia-pro-body;
+		@include typography.body;
 
 		@media (max-width: variables.$g-bp3) {
-			@include typography.sofia-pro-body-sm;
+			@include typography.body-sm;
 		}
 	}
 
@@ -334,7 +334,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 		// and on backgrounds with no record. https://meemoo.atlassian.net/browse/ARC-3848
 		color: colors.$color-gray-300;
 
-		@include typography.sofia-pro-body-xs;
+		@include typography.body-xs;
 
 		&-icon {
 			width: 1rem;
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss
index 7f7a0de14..f7d34e617 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss
@@ -122,12 +122,12 @@
 	&__title-text {
 		display: inline;
 
-		@include typography.sofia-pro-heading-2xl(true);
+		@include typography.heading-2xl(true);
 
 		color: colors.$white;
 
 		@media (max-width: variables.$g-bp2) {
-			@include typography.sofia-pro(4rem, 800, 4.4rem, true);
+			@include typography.set-font(4rem, 800, 4.4rem, true);
 		}
 	}
 
@@ -144,7 +144,7 @@
 	&__subtitle-text {
 		color: colors.$neutral;
 
-		@include typography.sofia-pro(2.4rem, 800, 2.6rem, true);
+		@include typography.set-font(2.4rem, 800, 2.6rem, true);
 	}
 
 	&__subtitle-box {
@@ -154,7 +154,7 @@
 	// "Big" keeps the desktop subtitle size on mobile - only "small" shrinks it.
 	&--small &__subtitle-text {
 		@media (max-width: variables.$g-bp2) {
-			@include typography.sofia-pro(2rem, 800, 2.4rem, true);
+			@include typography.set-font(2rem, 800, 2.4rem, true);
 		}
 	}
 }
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/README.md b/ui/src/react-admin/modules/content-page/components/blocks/README.md
index 6ada032c9..eb9dca725 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/README.md
+++ b/ui/src/react-admin/modules/content-page/components/blocks/README.md
@@ -154,9 +154,9 @@ Block styles are a plain `Block<Name>.scss` next to the component, imported by i
 - **Breakpoints** are `variables.$g-bp1`…`$g-bp4`, written as
   `@media (max-width: variables.$g-bp2)`.
 - **Type** goes through [`mixins/_typography.scss`](../../../shared/styles/mixins/_typography.scss):
-  always a preset (`sofia-pro-body()`, `sofia-pro-heading-lg()`, …). If none of them matches, add a
-  preset there instead of calling `sofia-pro($size, $weight, $line-height)` from the block. Don't
-  re-declare `font-family`/`font-size`/`font-weight` by hand.
+  always a preset (`body()`, `heading-lg()`, …). If none of them matches, add a
+  preset there instead of calling `set-font($size, $weight, $line-height)` from the block. Don't
+  re-declare `font-size`/`font-weight` by hand.
 - **Colours** come from `settings/colors`, or from a CSS custom property when the editor picks them
   (`background: var(--frame-color)`).
 - A value that genuinely is design-specific (a frame radius, an icon-column width) becomes a named
diff --git a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss
index 82ae84f9f..7043030fa 100644
--- a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss
+++ b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss
@@ -9,6 +9,6 @@
 	display: inline-block;
 	padding: variables.$g-spacer-unit;
 
-	@include typography.sofia-pro(1.6rem, 700, 2rem);
+	@include typography.set-font(1.6rem, 700, 2rem);
 	@include typography.truncate;
 }
diff --git a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss
index b1aabb304..ccc2ec86c 100644
--- a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss
+++ b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss
@@ -8,11 +8,11 @@
 
 	&__annotation {
 		color: colors.$neutral;
-		@include typography.sofia-pro-body-xs(true);
+		@include typography.body-xs(true);
 	}
 
 	&__text {
 		color: colors.$color-gray-1000;
-		@include typography.sofia-pro-body-xs(true);
+		@include typography.body-xs(true);
 	}
 }
diff --git a/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss b/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss
index 4675b4626..d0a22de0b 100644
--- a/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss
+++ b/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss
@@ -1,11 +1,9 @@
 // Shared text stylings for the "SofiaPro" typeface used across content blocks. Centralised so
 // the same size/weight combo (e.g. body copy) reads identically wherever it's used, instead of
 // each block re-declaring its own font-family/size/weight/line-height by hand.
-$font-family: "SofiaPro", sans-serif;
 
-@mixin sofia-pro($size, $weight: 500, $line-height: null, $important: false) {
+@mixin set-font($size, $weight: 500, $line-height: null, $important: false) {
   @if $important {
-    font-family: $font-family !important;
     font-size: $size !important;
     font-style: normal !important;
     font-weight: $weight !important;
@@ -13,7 +11,6 @@ $font-family: "SofiaPro", sans-serif;
       line-height: $line-height !important;
     }
   } @else {
-    font-family: $font-family;
     font-size: $size;
     font-style: normal;
     font-weight: $weight;
@@ -25,46 +22,46 @@ $font-family: "SofiaPro", sans-serif;
 
 // Presets for the combos used across content blocks - always style through one of these. If a new
 // block needs a size/weight that isn't here, add a preset for it rather than calling
-// `sofia-pro(...)` straight from the block, so the set stays consistent and reusable.
+// `set-font(...)` straight from the block, so the set stays consistent and reusable.
 // The design system's H1: 64/64. Used by the display titles of the full-bleed blocks.
-@mixin sofia-pro-heading-2xl($important: false) {
-  @include sofia-pro(6.4rem, 800, 6.4rem, $important);
+@mixin heading-2xl($important: false) {
+  @include set-font(6.4rem, 800, 6.4rem, $important);
 }
 
-@mixin sofia-pro-heading-xl($important: false) {
-  @include sofia-pro(3.2rem, 800, 4rem, $important);
+@mixin heading-xl($important: false) {
+  @include set-font(3.2rem, 800, 4rem, $important);
 }
 
-@mixin sofia-pro-heading-lg($important: false) {
-  @include sofia-pro(2.4rem, 800, null, $important);
+@mixin heading-lg($important: false) {
+  @include set-font(2.4rem, 800, null, $important);
 }
 
-@mixin sofia-pro-heading-md($important: false) {
-  @include sofia-pro(1.8rem, 800, 2.8rem, $important);
+@mixin heading-md($important: false) {
+  @include set-font(1.8rem, 800, 2.8rem, $important);
 }
 
-@mixin sofia-pro-heading($important: false) {
-  @include sofia-pro(1.6rem, 800, 2.4rem, $important);
+@mixin heading($important: false) {
+  @include set-font(1.6rem, 800, 2.4rem, $important);
 }
 
-@mixin sofia-pro-heading-sm($important: false) {
-  @include sofia-pro(1.4rem, 800, 2rem, $important);
+@mixin heading-sm($important: false) {
+  @include set-font(1.4rem, 800, 2rem, $important);
 }
 
-@mixin sofia-pro-body-xl($important: false) {
-  @include sofia-pro(3.2rem, 500, 4rem, $important);
+@mixin body-xl($important: false) {
+  @include set-font(3.2rem, 500, 4rem, $important);
 }
 
-@mixin sofia-pro-body($important: false) {
-	@include sofia-pro(1.8rem, 500, 2.8rem, $important);
+@mixin body($important: false) {
+	@include set-font(1.8rem, 500, 2.8rem, $important);
 }
 
-@mixin sofia-pro-body-sm($important: false) {
-	@include sofia-pro(1.6rem, 500, 2.4rem, $important);
+@mixin body-sm($important: false) {
+	@include set-font(1.6rem, 500, 2.4rem, $important);
 }
 
-@mixin sofia-pro-body-xs($important: false) {
-	@include sofia-pro(1.4rem, 500, 2rem, $important);
+@mixin body-xs($important: false) {
+	@include set-font(1.4rem, 500, 2rem, $important);
 }
 
 // Single-line truncation with an ellipsis - shared with .u-truncate (utilities/_text.scss).