diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index a47812640f1a2..582044f3757f7 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -36,6 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+import BaseControl from '../base-control';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
@@ -56,6 +57,7 @@ const UnforwardedFontSizePicker = (
 		value,
 		withSlider = false,
 		withReset = true,
+		label = 'Size',
 	} = props;
 
 	const units = useCustomUnits( {
@@ -131,171 +133,190 @@ const UnforwardedFontSizePicker = (
 	} );
 
 	return (
-		<Container ref={ ref } className="components-font-size-picker">
-			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<Spacer>
-				<Header className="components-font-size-picker__header">
-					<HeaderLabel
-						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
-					>
-						{ __( 'Size' ) }
-						{ headerHint && (
-							<HeaderHint className="components-font-size-picker__header__hint">
-								{ headerHint }
-							</HeaderHint>
+		<BaseControl>
+			<Container ref={ ref } className="components-font-size-picker">
+				<VisuallyHidden as="legend">
+					{ __( 'Font size' ) }
+				</VisuallyHidden>
+				<Spacer>
+					<Header className="components-font-size-picker__header">
+						<HeaderLabel
+							aria-label={ `${ label } ${ headerHint || '' }` }
+						>
+							{ label }
+							{ headerHint && (
+								<HeaderHint className="components-font-size-picker__header__hint">
+									{ headerHint }
+								</HeaderHint>
+							) }
+						</HeaderLabel>
+						{ ! disableCustomFontSizes && (
+							<HeaderToggle
+								label={
+									currentPickerType === 'custom'
+										? __( 'Use size preset' )
+										: __( 'Set custom size' )
+								}
+								icon={ settings }
+								onClick={ () =>
+									setUserRequestedCustom(
+										! userRequestedCustom
+									)
+								}
+								isPressed={ currentPickerType === 'custom' }
+								size="small"
+							/>
 						) }
-					</HeaderLabel>
-					{ ! disableCustomFontSizes && (
-						<HeaderToggle
-							label={
-								currentPickerType === 'custom'
-									? __( 'Use size preset' )
-									: __( 'Set custom size' )
+					</Header>
+				</Spacer>
+				<div>
+					{ currentPickerType === 'select' && (
+						<FontSizePickerSelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							fontSizes={ fontSizes }
+							value={ value }
+							disableCustomFontSizes={ disableCustomFontSizes }
+							size={ size }
+							onChange={ ( newValue ) => {
+								if ( newValue === undefined ) {
+									onChange?.( undefined );
+								} else {
+									onChange?.(
+										hasUnits
+											? newValue
+											: Number( newValue ),
+										fontSizes.find(
+											( fontSize ) =>
+												fontSize.size === newValue
+										)
+									);
+								}
+							} }
+							onSelectCustom={ () =>
+								setUserRequestedCustom( true )
 							}
-							icon={ settings }
-							onClick={ () =>
-								setUserRequestedCustom( ! userRequestedCustom )
-							}
-							isPressed={ currentPickerType === 'custom' }
-							size="small"
 						/>
 					) }
-				</Header>
-			</Spacer>
-			<div>
-				{ currentPickerType === 'select' && (
-					<FontSizePickerSelect
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						fontSizes={ fontSizes }
-						value={ value }
-						disableCustomFontSizes={ disableCustomFontSizes }
-						size={ size }
-						onChange={ ( newValue ) => {
-							if ( newValue === undefined ) {
-								onChange?.( undefined );
-							} else {
-								onChange?.(
-									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
-								);
-							}
-						} }
-						onSelectCustom={ () => setUserRequestedCustom( true ) }
-					/>
-				) }
-				{ currentPickerType === 'togglegroup' && (
-					<FontSizePickerToggleGroup
-						fontSizes={ fontSizes }
-						value={ value }
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						size={ size }
-						onChange={ ( newValue ) => {
-							if ( newValue === undefined ) {
-								onChange?.( undefined );
-							} else {
-								onChange?.(
-									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
-								);
-							}
-						} }
-					/>
-				) }
-				{ currentPickerType === 'custom' && (
-					<Flex className="components-font-size-picker__custom-size-control">
-						<FlexItem isBlock>
-							<UnitControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								__shouldNotWarnDeprecated36pxSize
-								label={ __( 'Custom' ) }
-								labelPosition="top"
-								hideLabelFromVision
-								value={ value }
-								onChange={ ( newValue ) => {
-									setUserRequestedCustom( true );
-
-									if ( newValue === undefined ) {
-										onChange?.( undefined );
-									} else {
-										onChange?.(
-											hasUnits
-												? newValue
-												: parseInt( newValue, 10 )
-										);
-									}
-								} }
-								size={ size }
-								units={ hasUnits ? units : [] }
-								min={ 0 }
-							/>
-						</FlexItem>
-						{ withSlider && (
+					{ currentPickerType === 'togglegroup' && (
+						<FontSizePickerToggleGroup
+							fontSizes={ fontSizes }
+							value={ value }
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							size={ size }
+							onChange={ ( newValue ) => {
+								if ( newValue === undefined ) {
+									onChange?.( undefined );
+								} else {
+									onChange?.(
+										hasUnits
+											? newValue
+											: Number( newValue ),
+										fontSizes.find(
+											( fontSize ) =>
+												fontSize.size === newValue
+										)
+									);
+								}
+							} }
+						/>
+					) }
+					{ currentPickerType === 'custom' && (
+						<Flex className="components-font-size-picker__custom-size-control">
 							<FlexItem isBlock>
-								<Spacer marginX={ 2 } marginBottom={ 0 }>
-									<RangeControl
-										__nextHasNoMarginBottom
-										__next40pxDefaultSize={
-											__next40pxDefaultSize
+								<UnitControl
+									__next40pxDefaultSize={
+										__next40pxDefaultSize
+									}
+									__shouldNotWarnDeprecated36pxSize
+									label={ __( 'Custom' ) }
+									labelPosition="top"
+									hideLabelFromVision
+									value={ value }
+									onChange={ ( newValue ) => {
+										setUserRequestedCustom( true );
+
+										if ( newValue === undefined ) {
+											onChange?.( undefined );
+										} else {
+											onChange?.(
+												hasUnits
+													? newValue
+													: parseInt( newValue, 10 )
+											);
 										}
-										__shouldNotWarnDeprecated36pxSize
-										className="components-font-size-picker__custom-input"
-										label={ __( 'Custom Size' ) }
-										hideLabelFromVision
-										value={ valueQuantity }
-										initialPosition={ fallbackFontSize }
-										withInputField={ false }
-										onChange={ ( newValue ) => {
-											setUserRequestedCustom( true );
+									} }
+									size={ size }
+									units={ hasUnits ? units : [] }
+									min={ 0 }
+								/>
+							</FlexItem>
+							{ withSlider && (
+								<FlexItem isBlock>
+									<Spacer marginX={ 2 } marginBottom={ 0 }>
+										<RangeControl
+											__nextHasNoMarginBottom
+											__next40pxDefaultSize={
+												__next40pxDefaultSize
+											}
+											__shouldNotWarnDeprecated36pxSize
+											className="components-font-size-picker__custom-input"
+											label={ __( 'Custom Size' ) }
+											hideLabelFromVision
+											value={ valueQuantity }
+											initialPosition={ fallbackFontSize }
+											withInputField={ false }
+											onChange={ ( newValue ) => {
+												setUserRequestedCustom( true );
 
-											if ( newValue === undefined ) {
-												onChange?.( undefined );
-											} else if ( hasUnits ) {
-												onChange?.(
-													newValue +
-														( valueUnit ?? 'px' )
-												);
-											} else {
-												onChange?.( newValue );
+												if ( newValue === undefined ) {
+													onChange?.( undefined );
+												} else if ( hasUnits ) {
+													onChange?.(
+														newValue +
+															( valueUnit ??
+																'px' )
+													);
+												} else {
+													onChange?.( newValue );
+												}
+											} }
+											min={ 0 }
+											max={
+												isValueUnitRelative ? 10 : 100
 											}
+											step={
+												isValueUnitRelative ? 0.1 : 1
+											}
+										/>
+									</Spacer>
+								</FlexItem>
+							) }
+							{ withReset && (
+								<FlexItem>
+									<Button
+										disabled={ isDisabled }
+										accessibleWhenDisabled
+										onClick={ () => {
+											onChange?.( undefined );
 										} }
-										min={ 0 }
-										max={ isValueUnitRelative ? 10 : 100 }
-										step={ isValueUnitRelative ? 0.1 : 1 }
-									/>
-								</Spacer>
-							</FlexItem>
-						) }
-						{ withReset && (
-							<FlexItem>
-								<Button
-									disabled={ isDisabled }
-									accessibleWhenDisabled
-									onClick={ () => {
-										onChange?.( undefined );
-									} }
-									variant="secondary"
-									__next40pxDefaultSize
-									size={
-										size === '__unstable-large' ||
-										props.__next40pxDefaultSize
-											? 'default'
-											: 'small'
-									}
-								>
-									{ __( 'Reset' ) }
-								</Button>
-							</FlexItem>
-						) }
-					</Flex>
-				) }
-			</div>
-		</Container>
+										variant="secondary"
+										__next40pxDefaultSize
+										size={
+											size === '__unstable-large' ||
+											props.__next40pxDefaultSize
+												? 'default'
+												: 'small'
+										}
+									>
+										{ __( 'Reset' ) }
+									</Button>
+								</FlexItem>
+							) }
+						</Flex>
+					) }
+				</div>
+			</Container>
+		</BaseControl>
 	);
 };
 
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 2296e96856788..591ff4994a33d 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -74,6 +74,16 @@ export type FontSizePickerProps = {
 	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
+	/**
+	 * Label for the control. If this prop is provided, it will be rendered
+	 * above the control interface.
+	 */
+	label?: string;
+	/**
+	 * Help text to be displayed below the control. If a function is provided, it will
+	 * receive the current font size value as an argument and should return a string.
+	 */
+	help?: string | ( ( value: number | string | undefined ) => string );
 };
 
 export type FontSize = {