CEM theming: voice+fonts+typography

[sashafirsov]

the discussion around fontography/typography/speech which is documented in src/material/theme/tokens/voice-fonts-typography.md

The initial 2020 post laid the fundamental principles.

[sashafirsov]

the difference between UI and TAG roles

In the CEM model, UI and Tag are both “scanable” roles, but they exist for different semantic jobs. The key distinction is:

• UI role communicates structure and affordance (“what is this control/area?”).
• Tag role communicates classification or state (“what is this item like right now?”).

UI role

What it is: Interface labeling and navigation text that helps the user operate the product.

Typical content:

• Button labels, menu items, field labels, section headers in dense UIs
• Helper labels near controls (“Sort by”, “Filter”, “Add”, “Save”)

Consumer-flow contribution:

• Orient/Navigate (where am I / what can I do)
• Act (commit actions; the label must be legible and stable)

Typographic behavior (why):

• Generally regular weight and tight line-height for compact layout.
• Letter spacing slightly positive is acceptable for legibility at small sizes.
• Voice default tends toward gentle (it should guide, not shout), except on primary actions where voice can rise (firm) through action semantics rather than changing the role.

Tag role

What it is: Compact metadata, category, or state markers that support recognition and filtering.

Typical content:

• Status chips (“Open”, “Resolved”, “Risk”, “Draft”)
• Categories (“Residential”, “Premium”, “Beta”)
• Qualifiers (“New”, “Updated”, “Critical”, “Archived”)

Consumer-flow contribution:

• Scan/Compare (rapidly identify attributes)
• Confirm/Reflect (summarize status and outcomes)

Typographic behavior (why):

• More “badge-like”: smaller size, higher weight, often tighter vertical rhythm.
• Default voice tends toward firm because tags are meant to be recognized at a glance.
• Tags often pair with non-typographic semantics (background/outline), but the role remains Tag even when styled as a chip.

Decision rule

Ask: “If the user removed this text, what breaks?”

• If removing it breaks operation/navigation → it’s UI.
• If removing it breaks interpretation/categorization/status → it’s Tag.

Common confusion: clickable chips

A chip can be clickable and still be a Tag role. Clickability is an action semantic layered on top (hover/active/focus tokens). In other words:

• Role (Tag/UI) = what the text means.
• Action state = what the element does right now.

That separation keeps your tokens stable: you don’t switch typography roles just because a tag becomes interactive.