Unexpected font size for custom select control on mobile screens

[himanshupathak95]

Discovered while working on #69029

Description

There is an inconsistent font size behavior in the custom select control component on mobile screens (below 600px). While most text elements maintain a 13px font size, the selected text in the dropdown displays 16px. This inconsistency creates visual misalignment and poor user experience.

Problems with this inconsistency:

• Creates visual disruption and inconsistent typography hierarchy
• Dropdown options remain at 13px while only the selected text becomes 16px
• No clear UX rationale for highlighting just this particular text element
• Breaks visual consistency with other form controls and text elements
• Makes the interface feel less polished and professional

While 16px is a common default for body text on mobile devices, dropdowns, and secondary UI elements typically follow the same size as surrounding text to maintain visual harmony. I understand 16px is better for readability, but if only the dropdown retains it while others shrink, it contradicts consistent accessibility practices.

This is a conversation starter and I still think this needs design feedback moving forward and also some accessibility insights. Also, this was added in #22329

Step-by-step reproduction instructions

1. Open any page/post with a custom select control component
2. View the page on a mobile device or screen width below 600px
3. Observe the font size of the selected text in the dropdown
4. Compare it with other text elements and dropdown options

Screenshots, screen recording, code snippet

Screen.Recording.2025-02-10.at.13.15.06.mov

Environment info

• WordPress version: 6.7.1
• Gutenberg version: 20.2.0
• Theme: Emptytheme 1.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

I have created a PR (#69114) that demonstrates the expected behavior and proposes a potential fix for this inconsistency.

The PR removes the mobile-specific font size override to maintain consistent typography across all screen sizes. However, I would appreciate both design and development feedback on this approach, as this is meant to start a conversation about the best way to handle font sizing in our mobile UI components.

[t-hamano]

From what I understand, the current font size is intentional, to prevent zoom in mobile Safari (Example: #27405).

Even in core, the font size of all form elements is consistent at 16px for mobile layouts.