ciampo · Jul 13, 2026 · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
@@ -2,8 +2,13 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Remove `$font-weight-regular` and `$font-weight-medium`. Use `var(--wpds-typography-font-weight-default)` or `var(--wpds-typography-font-weight-emphasis)` based on the intended emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
+
 ### Enhancements
 
+-   Use semantic `@wordpress/theme` font-weight tokens in typography mixins, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)).
 
 ## 10.2.0 (2026-07-01)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -13,12 +13,12 @@
 
 @mixin _text-heading() {
 	font-family: variables.$font-family-headings;
-	font-weight: variables.$font-weight-medium;
+	font-weight: wpds.var("--wpds-typography-font-weight-emphasis");
 }
 
 @mixin _text-body() {
 	font-family: variables.$font-family-body;
-	font-weight: variables.$font-weight-regular;
+	font-weight: wpds.var("--wpds-typography-font-weight-default");
 }
 
 @mixin heading-small() {

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -12,7 +12,11 @@
  * Fonts & basic variables.
  */
 
-$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables
+$font-family-headings: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-body: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-mono: Menlo, Consolas, monaco, monospace;
+
+$default-font: $font-family-body; // Todo: deprecate in favor of $family variables
 $default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens
 
 /**
@@ -35,15 +39,6 @@ $font-line-height-large: 28px;
 $font-line-height-x-large: 32px;
 $font-line-height-2x-large: 40px;
 
-// Weights
-$font-weight-regular: 400;
-$font-weight-medium: 499; // ensures fallback to 400 (instead of 600)
-
-// Families
-$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-$font-family-mono: Menlo, Consolas, monaco, monospace;
-
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

diff --git a/packages/base-styles/internal/_wpds-token-fallbacks.scss b/packages/base-styles/internal/_wpds-token-fallbacks.scss
@@ -179,8 +179,8 @@ $fallbacks: (
 	'--wpds-typography-font-size-sm': '12px',
 	'--wpds-typography-font-size-xl': '20px',
 	'--wpds-typography-font-size-xs': '11px',
-	'--wpds-typography-font-weight-medium': '499',
-	'--wpds-typography-font-weight-regular': '400',
+	'--wpds-typography-font-weight-default': '400',
+	'--wpds-typography-font-weight-emphasis': '600',
 	'--wpds-typography-line-height-2xl': '40px',
 	'--wpds-typography-line-height-lg': '28px',
 	'--wpds-typography-line-height-md': '24px',

diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 
 ## 5.50.0 (2026-07-01)

diff --git a/packages/block-directory/src/components/compact-list/style.scss b/packages/block-directory/src/components/compact-list/style.scss
@@ -22,7 +22,7 @@
 }
 
 .block-directory-compact-list__item-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-directory-compact-list__item-author {

diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -84,7 +84,7 @@
 
 .block-directory-downloadable-block-list-item__title {
 	display: block;
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-directory-downloadable-block-list-item__author {

@@ -28,6 +28,7 @@
 
 ### Enhancements
 
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 -   Inserter media categories support an optional `emptyMessage`, shown in place of the generic "No results found" notice, that also keeps a source listed when it has no items. The media panel additionally renders attach/detach affordances for attached images ([#79336](https://github.com/WordPress/gutenberg/pull/79336)).
 

@@ -22,7 +22,7 @@
 }
 
 .block-editor-block-card__title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;

@@ -29,7 +29,7 @@
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }
 

@@ -21,7 +21,7 @@
 	z-index: 1;
 
 	.components-checkbox-control__label {
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 }
 

@@ -10,5 +10,5 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables";
-
 .block-editor-block-quick-navigation__item {
-	font-weight: variables.$font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 }
@@ -29,7 +29,7 @@
 		}
 
 		&-checkbox--everywhere {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 		}
 
 		&-icon--checked {

@@ -2,7 +2,7 @@
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 
 .emotion-4 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

@@ -44,7 +44,7 @@ export const Default = {
 			},
 			{
 				fontFamily:
-					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+					'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 				name: 'System Font',
 				slug: 'system-font',
 			},

@@ -163,7 +163,7 @@ $block-inserter-tabs-height: 44px;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
@@ -456,7 +456,7 @@ $block-inserter-tabs-height: 44px;
 }
 
 .components-heading.block-editor-inserter__patterns-category-panel-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-inserter__patterns-explore-button,

@@ -151,7 +151,7 @@ $block-editor-link-control-number-of-actions: 1;
 		width: 100%;
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}
@@ -227,7 +227,7 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}

@@ -50,7 +50,7 @@
 
 .link-preview-button__title {
 	margin-top: $grid-unit-05;
-	font-weight: 500;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	display: block;
 }

@@ -5,7 +5,7 @@
 }
 
 .block-editor-multi-selection-inspector__card-title {
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {

@@ -32,7 +32,7 @@
 }
 
 .block-editor-responsive-block-control__label {
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin-bottom: 0.6em;
 	margin-left: -3px; // visual compensation
 }

@@ -6,7 +6,7 @@
 
 	&:focus {
 		font-size: 14px;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		background: #f1f1f1;
 		z-index: z-index(".skip-to-selected-block");
 	}

@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 
 ## 10.1.0 (2026-07-01)

@@ -18,7 +18,7 @@
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		display: inline-flex;

@@ -110,7 +110,7 @@
 .link-control-transform__subheading {
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	margin-bottom: 1.5em;
 }

@@ -18,7 +18,7 @@
 		font-size: $default-font-size;
 		position: relative;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		border-radius: 4px;

@@ -46,7 +46,7 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	display: block;
 }
 

diff --git a/packages/boot/CHANGELOG.md b/packages/boot/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 
 ## 0.17.0 (2026-07-01)

diff --git a/packages/boot/src/components/navigation/navigation-item/style.scss b/packages/boot/src/components/navigation/navigation-item/style.scss
@@ -29,7 +29,7 @@
 	}
 
 	&.active {
-		font-weight: variables.$font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	svg:last-child {
@@ -38,7 +38,7 @@
 
 	&[aria-current="true"] {
 		color: var(--wpds-color-foreground-interactive-brand-active);
-		font-weight: variables.$font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	// Make sure the focus style is drawn on top of the current item background.

diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 
 ## 1.50.0 (2026-07-01)

diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
@@ -144,7 +144,7 @@ $palette-header-height: 48px;
 			padding: $grid-unit-10 $grid-unit-20;
 			line-height: $grid-unit-20;
 			font-size: $font-size-x-small;
-			font-weight: $font-weight-medium;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			text-transform: uppercase;
 			color: $gray-900;
 		}
@@ -196,5 +196,5 @@ $palette-header-height: 48px;
 .commands-command-menu__item mark {
 	color: inherit;
 	background: unset;
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }
@@ -35,6 +35,7 @@
 
 ### Enhancements
 
+-   Update emphasized labels and controls from the legacy medium weight to the emphasis font-weight token, and align the default font-family stack with the `@wordpress/theme` body token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 -   `Button`: Align focus rings with the design system ([#78646](https://github.com/WordPress/gutenberg/pull/78646)).
 -   The `size` prop no longer has any effect and can be safely removed from the following:

@@ -25,7 +25,7 @@
 	text-decoration: none;
 	font-family: inherit;
 	font-size: $default-font-size;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin: 0;
 	cursor: var(--wpds-cursor-control);
 	appearance: none;
@@ -222,7 +222,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
-		font-weight: $font-weight-regular;
+		font-weight: var(--wpds-typography-font-weight-default);
 		color: $components-color-accent;
 		text-decoration: underline;
 		text-underline-offset: 0.2em;

@@ -21,7 +21,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	color: $components-color-foreground;
 	background-color: $components-color-background;
 	font-size: $font-size-medium;
-	font-weight: $font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 	z-index: 0; // Create a stacking context and render on top of the background.
 
 	*,

@@ -12,7 +12,7 @@ import { CONFIG } from '../utils';
 export const ColorHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: 24px;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

@@ -38,7 +38,7 @@ export const NavigatorHeading = styled( Heading )`
 	grid-column: 2 / 7;
 
 	strong {
-		font-weight: ${ CONFIG.fontWeightHeading };
+		font-weight: ${ CONFIG.fontWeightEmphasis };
 	}
 `;