diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 6824ae3b96ded0..9cc577e4451216 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -173,7 +173,7 @@ const UnforwardedFontSizePicker = (
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								__shouldNotWarnDeprecated36pxSize
-								label={ __( 'Font size' ) }
+								label={ __( 'Custom font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 8ec92ff657391b..7a71531e0fcceb 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -97,8 +97,8 @@ test.describe( 'Global styles variations', () => {
 		await page.click( 'role=button[name="Text"i]' );
 
 		await expect(
-			page.locator( 'css=.components-font-size-picker__header__hint' )
-		).toHaveText( 'Medium' );
+			page.locator( 'role=radio[name="Medium"i]' )
+		).toHaveAttribute( 'aria-checked', 'true' );
 	} );
 
 	test( 'should apply custom colors and font sizes in a variation', async ( {
@@ -132,14 +132,8 @@ test.describe( 'Global styles variations', () => {
 		await page.click( 'role=button[name="Typography"i]' );
 		await page.click( 'role=button[name="Text"i]' );
 
-		// TODO: to avoid use classnames to locate these elements,
-		//  we could provide accessible attributes to the source code in packages/components/src/font-size-picker/index.js.
 		await expect(
-			page.locator( 'css=.components-font-size-picker__header__hint' )
-		).toHaveText( 'Custom' );
-
-		await expect(
-			page.locator( 'role=spinbutton[name="Custom"i]' )
+			page.locator( 'role=spinbutton[name="Custom font size"i]' )
 		).toHaveValue( '15' );
 	} );