-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Due to the way font sizes are implemented, they're currently tied to a pixel value.
In the font size components, the font size object is intended to include a size
property as a number value, which is the size in px. E.g. size: 16
.
These sizes are required for two reasons:
- They're used to generate the
style
attribute in the font size picker and show the label at a specific size - If the user inputs a font size in the custom input field, the font size picker falls back to any named font size matching that number
Further, because of #11200, in the editor font sizes are rendered with px
values through inline style
, because the stylesheet where we define the font size classes is less specific than our default editor styles.
I would argue that this implementation is flawed for a few reasons:
- It enforces an unnecessary link to pixels
- If your stylesheet displays font sizes with non-
px
values, you're still required to provide a pixel size value, because… - It's not possible to accurately render your font size in the font size picker if you use non-
px
values
- If your stylesheet displays font sizes with non-
- If fonts are defined in CSS with non-
px
values, users can't actually display the pre-defined sizes in px. In other words if you define "Large" as size22
, but it's in your CSS as2rem
, but a user wants to display the font size as actually 22px, they can't. The font size picker will always reset an input of22
to select the "Large" value. (See Font Size issue when using predefined sizes #8689, Font Size #11413)
#10687 was one attempt to solve this. It didn't solve all these problems, but did solve the main issues by…
- Adding an explicit "Custom" value, only showing the custom input when that value was selected
- Continuing to require a
size
parameter but only using it as an "approximate preview" size in the editor - Removing the editor's attempts to convert custom sizes to named sizes — you could only get a named size if you explicitly selected it, and you could only get a custom size if you explicitly selected it
Ultimately #10687 was rejected for UI reasons.
This ticket is an attempt to ideate/brainstorm on how we could improve the UI, to truly separate and isolate custom and named sizes, and to minimise the enforced connection to "px" values.