diff --git a/edit-post/components/sidebar/block-sidebar/style.scss b/edit-post/components/sidebar/block-sidebar/style.scss
index 3ca2bfe2eba338..30e7e33e4f6d80 100644
--- a/edit-post/components/sidebar/block-sidebar/style.scss
+++ b/edit-post/components/sidebar/block-sidebar/style.scss
@@ -4,9 +4,9 @@
 	margin: 0 -16px;
 
 	.components-base-control {
-		margin: 0 0 1em 0;
+		margin: 0 0 1.5em 0;
 		&:last-child {
-			margin-bottom: 0;
+			margin-bottom: 0.5em;
 		}
 	}
 
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 78e1f0410e9ca0..8ca793de2c0558 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -110,11 +110,11 @@
 }
 
 .has-small-font-size {
-	font-size: 14px;
+	font-size: 13px;
 }
 
 .has-regular-font-size {
-	font-size: 16px;
+	font-size: 20px;
 }
 
 .has-large-font-size {
@@ -122,5 +122,5 @@
 }
 
 .has-larger-font-size {
-	font-size: 48px;
+	font-size: 42px;
 }
diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js
index f7b155ef56b460..925914b7824154 100644
--- a/packages/components/src/base-control/index.js
+++ b/packages/components/src/base-control/index.js
@@ -7,7 +7,8 @@ function BaseControl( { id, label, help, className, children } ) {
 	return (
 		<div className={ classnames( 'components-base-control', className ) }>
 			<div className="components-base-control__field">
-				{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ label && id && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ label && ! id && <span className="components-base-control__label">{ label }</span> }
 				{ children }
 			</div>
 			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }
diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
index 6472df6fa23e90..fe065ce93fac58 100644
--- a/packages/components/src/base-control/style.scss
+++ b/packages/components/src/base-control/style.scss
@@ -1,22 +1,23 @@
 .components-base-control {
 	font-family: $default-font;
 	font-size: $default-font-size;
-}
 
-.components-base-control__field {
-	margin-bottom: $grid-size;
+	.components-base-control__field {
+		margin-bottom: $grid-size;
 
-	.components-panel__row & {
-		margin-bottom: inherit;
+		.components-panel__row & {
+			margin-bottom: inherit;
+		}
 	}
-}
 
-.components-base-control__label {
-	display: block;
-	margin-bottom: $grid-size-small;
-}
+	.components-base-control__label {
+		display: block;
+		margin-bottom: $grid-size-small;
+	}
 
-.components-base-control__help {
-	font-style: italic;
-	margin-bottom: 0;
+	.components-base-control__help {
+		margin-top: -$grid-size;
+		font-style: italic;
+		margin-bottom: 0;
+	}
 }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index e3ba345ca2ff80..2387bc640e6efc 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -6,51 +6,110 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import Dashicon from '../dashicon';
+import BaseControl from '../base-control';
 import Button from '../button';
-import ButtonGroup from '../button-group';
+import Dropdown from '../dropdown';
 import RangeControl from '../range-control';
+import { NavigableMenu } from '../navigable-container';
+
+function FontSizePicker( {
+	fallbackFontSize,
+	fontSizes = [],
+	onChange,
+	value,
+	withSlider,
+} ) {
+	const onChangeValue = ( event ) => {
+		const newValue = event.target.value;
+		if ( newValue === '' ) {
+			onChange( undefined );
+			return;
+		}
+		onChange( Number( newValue ) );
+	};
+
+	const currentFont = fontSizes.find( ( font ) => font.size === value );
 
-export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) {
 	return (
-		<Fragment>
+		<BaseControl label={ __( 'Font Size' ) }>
 			<div className="components-font-size-picker__buttons">
-				<ButtonGroup aria-label={ __( 'Font Size' ) }>
-					{ map( fontSizes, ( { name, size, shortName } ) => (
+				<Dropdown
+					className="components-font-size-picker__dropdown"
+					contentClassName="components-font-size-picker__dropdown-content"
+					position="bottom"
+					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
-							key={ size }
+							className="components-font-size-picker__selector"
 							isLarge
-							isPrimary={ value === size }
-							aria-pressed={ value === size }
-							onClick={ () => onChange( size ) }
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							aria-label={ __( 'Custom font size' ) }
 						>
-							{ shortName || name }
+							{ ( currentFont && currentFont.name ) || ( ! value && 'Normal' ) || 'Custom' }
 						</Button>
-					) ) }
-				</ButtonGroup>
+					) }
+					renderContent={ () => (
+						<NavigableMenu>
+							{ map( fontSizes, ( { name, size, slug } ) => (
+								<Button
+									key={ slug }
+									onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
+									className={ 'is-font-' + slug }
+									role="menuitem"
+								>
+									{ ( value === size || ( ! value && slug === 'normal' ) ) &&	<Dashicon icon="saved" /> }
+									<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
+										{ name }
+									</span>
+								</Button>
+							) ) }
+						</NavigableMenu>
+					) }
+				/>
+				{ ! withSlider &&
+					<input
+						className="components-range-control__number"
+						type="number"
+						onChange={ onChangeValue }
+						aria-label={ __( 'Custom font size' ) }
+						value={ value || '' }
+					/>
+				}
 				<Button
-					isLarge
+					className="components-color-palette__clear"
+					type="button"
+					disabled={ value === undefined }
 					onClick={ () => onChange( undefined ) }
+					isButton
+					isSmall
+					isDefault
+					aria-label={ __( 'Reset font size' ) }
 				>
 					{ __( 'Reset' ) }
 				</Button>
 			</div>
-			<RangeControl
-				className="components-font-size-picker__custom-input"
-				label={ __( 'Custom Size' ) }
-				value={ value || '' }
-				initialPosition={ fallbackFontSize }
-				onChange={ onChange }
-				min={ 12 }
-				max={ 100 }
-				beforeIcon="editor-textcolor"
-				afterIcon="editor-textcolor"
-			/>
-		</Fragment>
+			{ withSlider &&
+				<RangeControl
+					className="components-font-size-picker__custom-input"
+					label={ __( 'Custom Size' ) }
+					value={ value || '' }
+					initialPosition={ fallbackFontSize }
+					onChange={ onChange }
+					min={ 12 }
+					max={ 100 }
+					beforeIcon="editor-textcolor"
+					afterIcon="editor-textcolor"
+				/>
+			}
+		</BaseControl>
 	);
 }
+
+export default withInstanceId( FontSizePicker );
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index 8a522831093ddf..d4fa0b8fd98f82 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -1,7 +1,20 @@
 .components-font-size-picker__buttons {
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: 1em;
+	align-items: center;
+
+	// Apply the same height as the isSmall Reset button.
+	.components-range-control__number {
+		height: 24px;
+		line-height: 22px;
+
+		// Show the reset button as disabled until a value is entered.
+		&[value=""] + .components-button {
+			cursor: default;
+			opacity: 0.3;
+			pointer-events: none;
+		}
+	}
 }
 
 .components-font-size-picker__custom-input {
@@ -10,3 +23,37 @@
 		height: 30px;
 	}
 }
+
+.components-font-size-picker__dropdown-content .components-button {
+	display: block;
+	position: relative;
+	padding: 10px 20px 10px 40px;
+	width: 100%;
+	text-align: left;
+
+	.dashicon {
+		position: absolute;
+		top: calc(50% - 10px);
+		left: 10px;
+	}
+}
+
+.components-font-size-picker__buttons .components-font-size-picker__selector {
+	border: 1px solid;
+	background: none;
+	position: relative;
+	width: 110px;
+
+	@include input-style__neutral();
+
+	&:focus {
+		@include input-style__focus();
+	}
+
+	&::after {
+		@include dropdown-arrow();
+		right: 8px;
+		top: 12px;
+		position: absolute;
+	}
+}
diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
index 1118028ccd2d9b..971d31d81509d8 100644
--- a/packages/editor/src/store/defaults.js
+++ b/packages/editor/src/store/defaults.js
@@ -81,27 +81,28 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 	fontSizes: [
 		{
 			name: __( 'Small' ),
-			shortName: __( 'S' ),
-			size: 14,
+			size: 13,
 			slug: 'small',
 		},
 		{
-			name: __( 'Regular' ),
-			shortName: __( 'M' ),
+			name: __( 'Normal' ),
 			size: 16,
-			slug: 'regular',
+			slug: 'normal',
+		},
+		{
+			name: __( 'Medium' ),
+			size: 20,
+			slug: 'medium',
 		},
 		{
 			name: __( 'Large' ),
-			shortName: __( 'L' ),
 			size: 36,
 			slug: 'large',
 		},
 		{
-			name: __( 'Larger' ),
-			shortName: __( 'XL' ),
+			name: __( 'Huge' ),
 			size: 48,
-			slug: 'larger',
+			slug: 'huge',
 		},
 	],
 
diff --git a/test/e2e/specs/editor-modes.test.js b/test/e2e/specs/editor-modes.test.js
index b5c8cf2639a0d9..0e17e773ddad92 100644
--- a/test/e2e/specs/editor-modes.test.js
+++ b/test/e2e/specs/editor-modes.test.js
@@ -73,7 +73,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// Change the font size using the sidebar.
-		const changeSizeButton = await page.waitForXPath( '//button[text()="L"]' );
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
 		await changeSizeButton.click();
 
 		// Make sure the HTML content updated.
diff --git a/test/e2e/specs/font-size-picker.test.js b/test/e2e/specs/font-size-picker.test.js
index 9792a5735ab1e2..4a55dd3e0dbc83 100644
--- a/test/e2e/specs/font-size-picker.test.js
+++ b/test/e2e/specs/font-size-picker.test.js
@@ -17,8 +17,9 @@ describe( 'Font Size Picker', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Paragraph to be made "large"' );
 
-		const largeButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'L\']' ) )[ 0 ];
-		await largeButton.click();
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
+		await changeSizeButton.click();
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();
@@ -31,7 +32,7 @@ describe( 'Font Size Picker', () => {
 		await page.keyboard.type( 'Paragraph to be made "small"' );
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
-		await page.keyboard.type( '14' );
+		await page.keyboard.type( '13' );
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();
@@ -57,7 +58,10 @@ describe( 'Font Size Picker', () => {
 		await page.keyboard.type( 'Paragraph with font size reset using button' );
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
-		await page.keyboard.type( '14' );
+		await page.keyboard.type( '13' );
+
+		// Blur the range control
+		await page.click( '.components-base-control__label' );
 
 		const resetButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'Reset\']' ) )[ 0 ];
 		await resetButton.click();
@@ -72,8 +76,9 @@ describe( 'Font Size Picker', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Paragraph with font size reset using input field' );
 
-		const largeButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'L\']' ) )[ 0 ];
-		await largeButton.click();
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
+		await changeSizeButton.click();
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
 		await page.keyboard.press( 'Backspace' );