Skip to content

A path toward responsive, non-px font sizes #11671

@chrisvanpatten

Description

@chrisvanpatten

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:

  1. They're used to generate the style attribute in the font size picker and show the label at a specific size
  2. 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:

  1. It enforces an unnecessary link to pixels
    1. If your stylesheet displays font sizes with non-px values, you're still required to provide a pixel size value, because…
    2. It's not possible to accurately render your font size in the font size picker if you use non-px values
  2. 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 size 22, but it's in your CSS as 2rem, but a user wants to display the font size as actually 22px, they can't. The font size picker will always reset an input of 22 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…

  1. Adding an explicit "Custom" value, only showing the custom input when that value was selected
  2. Continuing to require a size parameter but only using it as an "approximate preview" size in the editor
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.CustomizationIssues related to Phase 2: Customization effortsGeneral InterfaceParts of the UI which don't fall neatly under other labels.[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] DiscussionFor issues that are high-level and not yet ready to implement.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions