use incremental sequence of numbers as labels

packages/components/src/font-size-picker/test/index.js

@@ -206,7 +206,7 @@ describe( 'FontSizePicker', () => {
 				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
 			} );
-			it( 'should use `T-shirt` sizes aliases if we have complex css', () => {
+			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
 				const fontSizes = [
 					...options,
 					{
@@ -224,7 +224,7 @@ describe( 'FontSizePicker', () => {
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
 				expect( element.children ).toHaveLength( 2 );
-				expect( element.children[ 0 ].textContent ).toBe( 'L' );
+				expect( element.children[ 0 ].textContent ).toBe( '3' );
 			} );
 		} );
 	} );

packages/components/src/font-size-picker/utils.js

@@ -16,12 +16,12 @@ const CUSTOM_FONT_SIZE_OPTION = {
 
 /**
  * In case we have at most five font sizes, where at least one the them
- * contain a complex css value(clamp, var, etc..) show a `T-shirt size`
- * alias as a label of the font size. We do this because complex css values
- * cannot be caluclated properly and the `T-shirt size` alias can help the
- * user better mentally map the different available font sizes.
+ * contain a complex css value(clamp, var, etc..) show a incremental sequence
+ * of numbers as a label of the font size. We do this because complex css values
+ * cannot be caluclated properly and the incremental sequence of numbers as labels
+ * can help the user better mentally map the different available font sizes.
  */
-const FONT_SIZES_ALIASES = [ 'S', 'M', 'L', 'XL', 'XXL' ];
+const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
 
 /**
  * Helper util to split a font size to its numeric value