Skip to content

Standardize input field labels to sentence case #76673

@poligilad-auto

Description

@poligilad-auto

What problem does this address?

Label styling across form components is inconsistent: checkboxes, toggles, and radio buttons use sentence case, while input field labels use ALL CAPS — a split that feels more accidental than intentional. This inconsistency extends into DataForms itself, where the panel layout and regular layout also apply different label styles. Combined with the readability, accessibility, and internationalization issues that come with ALL CAPS labels, this is worth addressing.

  • Readability: Lowercase letters have distinct ascenders and descenders that create recognizable word shapes. ALL CAPS flattens those shapes, making labels slower to scan. In form-heavy contexts where users are moving through many fields, this adds unnecessary friction.
  • Accessibility: Screen readers can sometimes read ALL CAPS text letter by letter instead of as words, even when the casing is applied via CSS. For users with dyslexia, the loss of distinctive word shapes makes text harder to process.
  • Internationalization: Languages without a concept of uppercase/lowercase (e.g. Japanese, Chinese, Korean, Arabic) get no benefit from ALL CAPS and can end up with a visually inconsistent experience when mixed with Latin text.
  • Tone: ALL CAPS in form labels feels stiff and impersonal. It adds a sense of rigidity that doesn't match the direction WordPress is heading as a product.
  • Consistency between layouts: DataForms has both a panel layout and a regular layout, each with a different label style. These differences create inconsistencies when moving between screens, and at times on the same screen when viewing a mix of layouts in the Editor and the admin.

What is your proposed solution?

Standardize all input field labels across form components to use sentence case, with text style properties matching heading-md (size, weight, and spacing) — without using that variant explicitly, since labels aren't headings and the variant may evolve in ways unsuitable for labels.
DataForm inherits these label styles, so this change would apply there automatically. Labels in the panel layout should also share these styles for visual consistency, even though the panel layout doesn't use form markup.

This should not affect DataViews table headers, which can keep their current ALL CAPS styling. That's a reasonable use of caps for short, scannable column labels in a data-dense context, and previous Gutenberg discussions have acknowledged this as an acceptable exception.

I'd like to open up the discussion on the best exact visual styling. This is an initial pass.

Before

Image

After

Image

Metadata

Metadata

Assignees

Labels

Design SystemIssues related to the system of combining components according to best practices.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] DiscussionFor issues that are high-level and not yet ready to implement.[Type] EnhancementA suggestion for improvement.

Type

No type
No fields configured for issues without a type.

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions