Skip to content

feat(typography): Support Material 3 Emphasized type styles as system typography tokens #33557

Description

@Mikastark

Feature Description

Material Design 3 defines 15 emphasized type styles alongside the baseline scale (Display, Headline, Title, Body, Label × Large/Medium/Small). Emphasized styles mirror baseline size, line height, tracking, and font family, but use a higher weight (typically Medium for headlines/display, Bold for some title roles) for selection, actions, headlines, and editorial emphasis.

Angular Material’s M3 system tokens currently expose only the baseline typescale (--mat-sys-headline-large, --mat-sys-body-medium, etc.). Apps that follow the M3 type scale must manually override weights or invent custom tokens, which diverges from Material components and breaks when the theme’s shorthand font tokens bake in Regular weight.

Please emit emphasized typescale tokens (shorthand + subtokens: font, size, line-height, tracking, weight), e.g.:

  • --mat-sys-headline-large-emphasized (+ -font, -size, -line-height, -tracking, -weight)
  • same pattern for display / headline / title / body / label × large / medium / small

Ideally document usage next to the existing typography system tokens and keep baseline tokens unchanged.

Use Case

  1. Editorial headlines — Page and section titles should use emphasized Headline styles per M3, without hardcoding font-weight: 500 after font: var(--mat-sys-headline-*) (which fights the shorthand token).
  2. Consistent theming — One theme change should update app SCSS and Material surfaces that consume typescale tokens (dialogs, cards, lists), instead of per-component weight overrides.
  3. Selective emphasis — Keep baseline for body/UI chrome and switch to emphasized for selected/active text, primary CTAs, or important labels, matching Compose/Android *Emphasized APIs and the M3 Expressive type scale.
  4. Forward compatibility — Apps can adopt official tokens now and drop temporary theme overrides once Angular Material ships the full 30-style scale.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: themingfeatureLabel used to distinguish feature request from other issuesgemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions