Headline sizing is inconsistent

[robinscholz]

Describe the Bug.

Depending on the field type, payload’s ui applies different typographic styling to a fields headline. Instead of per field type, this should be handled according to nesting hierarchy. Top-level fields should all feature the larger headline. Nested fields could then be styled with a smaller type size.

Reproduction Steps

1. Add a text field.
2. Add an array field.
3. Headline sizes fastly differ, even though both fields share the same level of hierarchy.

Environment Info

Binaries:
  Node: 20.18.3
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 10.8.0
Relevant Packages:
  payload: 3.33.0
  next: 15.2.0
  @payloadcms/db-mongodb: 3.33.0
  @payloadcms/graphql: 3.33.0
  @payloadcms/live-preview: 3.33.0
  @payloadcms/next/utilities: 3.33.0
  @payloadcms/plugin-cloud-storage: 3.33.0
  @payloadcms/plugin-seo: 3.33.0
  @payloadcms/richtext-lexical: 3.33.0
  @payloadcms/storage-s3: 3.33.0
  @payloadcms/translations: 3.33.0
  @payloadcms/ui/shared: 3.33.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10

[zubricks]

I was able to replicate this—thanks for pointing this out. We'll sort out how to address this.

[jessrynkar]

Hi @robinscholz - as you mentioned, the font size variation is happening because Payload applies styling based on field type, rather than nesting level.

This is an intentional design decision based on the following:

• Larger headings are needed to help visually separate and organize nested field structures, but is not critical for other fields.
• Dynamically scaling font size based on depth would reduce readability by creating overly small labels, especially as nesting increases.

That said, we do recognize that when fields of different types are placed side-by-side (e.g. a text field next to an array field), the varying label styles can feel inconsistent and this is something we plan to improve in the future.

I’m converting this to a feature request so we can track it as part of broader improvements to field hierarchy and styling.

In the meantime, if the visual contrast is disruptive, you can manually override label styles using custom CSS in your Payload config.

Thank you for flagging this!