Directory

Adopt Relative Font Sizes for UI · Issue #59225 · WordPress/gutenberg · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adopt Relative Font Sizes for UI #59225

Open
okmttdhr opened this issue Feb 21, 2024 · 2 comments
Open

Adopt Relative Font Sizes for UI #59225

okmttdhr opened this issue Feb 21, 2024 · 2 comments
Labels
[Type] Enhancement A suggestion for improvement.

Comments

@okmttdhr
Copy link
Contributor

What problem does this address?

Currently, font variables within the Gutenberg project are defined using px units, as seen in the file at

gutenberg/packages/base-styles/_variables.scss

Lines 11 to 23 in a4dd8d6

/**
* Fonts & basic variables.
*/
$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
$default-font-size: 13px;
$default-line-height: 1.4;
$editor-html-font: Menlo, Consolas, monaco, monospace;
$editor-font-size: 16px;
$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
$text-editor-font-size: 15px;
$editor-line-height: 1.8;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
.
This approach to defining font sizes might not fully support or comply with accessibility standards, particularly those outlined by the 1.4.4: Resize Text | WAI | W3C regarding text resizing.

Note that this issue is distinct from Fluid font sizes in WordPress 6.1, which focuses on font sizes on user sites. This issue aims to address the font sizes used within the Gutenberg editor's UI itself.

What is your proposed solution?
@okmttdhr okmttdhr added the [Type] Enhancement A suggestion for improvement. label Feb 21, 2024
@okmttdhr okmttdhr mentioned this issue Feb 21, 2024
Merged
7 tasks
@jordesign
Copy link
Contributor

Looks like ^ this merge resolves this issue - is that right @okmttdhr

@okmttdhr
Copy link
Contributor Author

Looks like ^ this merge resolves this issue - is that right @okmttdhr

While this PR: Automattic/wp-calypso#87693 does introduce some improvements to font size scalability on WordPress.com, it doesn't address the issue I raised.
The concern I'm highlighting is how font sizes are defined for WordPress UI, as shown in the variable definitions here: packages/base-styles/_variables.scss. The issue is with static px values for font sizes, which could limit a11y.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jordesign @okmttdhr