fix(typography): Minor typography foundation corrections - #5068
Conversation
| Material Design 3 splits the typescale across two font families: <b>Brand</b> (Display, | ||
| Headline and Title Large) and <b>Plain</b> (Title Medium/Small, Label and Body). Both | ||
| resolve to the same platform default above, so they are interchangeable until you | ||
| override one of them. |
There was a problem hiding this comment.
| Material Design 3 splits the typescale across two font families: <b>Brand</b> (Display, | |
| Headline and Title Large) and <b>Plain</b> (Title Medium/Small, Label and Body). Both | |
| resolve to the same platform default above, so they are interchangeable until you | |
| override one of them. | |
| Materail Design 3 typescale uses two font families: | |
| - **Brand**: Headline and Title Large | |
| - **Plain**: Title Medium/Small, Label and Body | |
| The default theme uses the platform default for both font families. |
| Each of the 15 variants above has an `Emphasized` counterpart — `displayLargeEmphasized`, | ||
| `bodyMediumEmphasized`, and so on. They keep the size, line height and letter spacing of | ||
| their baseline variant and only raise the weight: Display, Headline, Title Large and Body | ||
| go to `"500"`, while Title Medium/Small and Label go to `"700"`. |
There was a problem hiding this comment.
Don't mention a number, or exact implementation. It's unnecessary and can get out of sync, Also please don't use emdashes. Docs should be handwritten.
| Each of the 15 variants above has an `Emphasized` counterpart — `displayLargeEmphasized`, | |
| `bodyMediumEmphasized`, and so on. They keep the size, line height and letter spacing of | |
| their baseline variant and only raise the weight: Display, Headline, Title Large and Body | |
| go to `"500"`, while Title Medium/Small and Label go to `"700"`. | |
| Each variant also has an `Emphasized` counterpart with heavier font weight: `displayLargeEmphasized`, | |
| `bodyMediumEmphasized` etc. |
| * Every variant also has an `Emphasized` counterpart, e.g. `displayLargeEmphasized` | ||
| * or `bodyMediumEmphasized`, which renders the same size at a heavier weight. |
There was a problem hiding this comment.
| * Every variant also has an `Emphasized` counterpart, e.g. `displayLargeEmphasized` | |
| * or `bodyMediumEmphasized`, which renders the same size at a heavier weight. | |
| * Each variant also has an `Emphasized` counterpart with heavier font weight. | |
| * e.g. `displayLargeEmphasized`, `bodyMediumEmphasized` etc. |
|
|
||
| Material Design 3 typescale uses two font families: | ||
|
|
||
| - **Brand**: Headline and Title Large |
There was a problem hiding this comment.
Add Display back to Brand - md.sys.typescale.display-{large,medium,small}.font all resolve to md.ref.typeface.brand (type scale tokens). As written it's in neither list, while displayLarge spreads brandRegularType two files over.
| - **Brand**: Headline and Title Large | |
| - **Brand**: Display, Headline and Title Large |
| }; | ||
|
|
||
| const emphasizedBoldType = { | ||
| const plainBoldType = { |
There was a problem hiding this comment.
Should plainBoldType use plainRegular? sans-serif-medium + fontWeight: '700' is the same family/weight mismatch you just removed from Body, and the new test covers the other two groups but not this one.
Motivation
Small, foundation-level typography corrections identified while auditing the type-scale tokens against Material Design 3, as part of the v6 modernization effort. Body was on the wrong font family, seven emphasized styles were on the wrong font family, and the
TypescaleKeytype didn't expose the emphasized variants that the runtime object already had.Changes
Typography tokens (
src/theme/tokens/ref/typeface.ts,src/theme/tokens/sys/typography.ts)fontFamily/fontWeightback to the right values. Added aplainRegulartypeface entry (Plain @ weight 400) and pointedbodyLarge/bodyMedium/bodySmallat it directly, removing the override.plainMedium). Added abrandMediumtypeface entry (Brand @ weight 500) and repointed the seven affected emphasized styles.regularType,mediumType,emphasizedMediumType,emphasizedBoldType) to<family><weight>Typenames (brandRegularType,brandMediumType,plainRegularType,plainMediumType,plainMediumEmphasizedType,plainBoldType). The old names hid that a single helper was shared across styles MD3 assigns to different families — which is exactly how both bugs above happened.Types (
src/theme/types/typography.ts,src/components/Typography/Text.tsx)TypescaleKeywith the 15*Emphasizedvariants soText'svariantprop type-accepts them (the runtimetypescaleobject already had these keys — this only fixes the type).Emphasizedvariants inText'svariantJSDoc.Docs (
docs/6.x/docs/guides/fonts.md)bodyLargeletterSpacing(0.15→0.5) never updated after feat: add emphasized typescale and fix letter-spacing spec bugs #4920 changed the underlying token.Emphasizedvariants.Visual / behavioral changes
None
Public API
md.ref.typeface.plainRegular,md.ref.typeface.brandMedium(internal ref tokens, exported transitively viaPalette/theme but not part of the documented component API).TypescaleKey(and thereforeText'svariantprop) now accepts 15 additional*Emphasizedvalues that were already valid at runtime.Record<TypescaleKey, …>object from scratch now needs the 15 additional keys.configureFontsis unaffected — all its overloads takePartial<Record<TypescaleKey, …>>.Related issue
(new — to be created)
Note on scope: the emphasized Display/Headline/TitleLarge family fix is included here rather than deferred, because Compose's generated
TypeScaleTokens.kt(VERSION: v0_103) marks all 15*Emphasizedentries provisional under a single// TODO update with the generated tokens once availablecomment — but the family assignment (Brand vs Plain) mirrors the non-emphasized baseline split 1:1 and matches the M3 type-scale spec, so it's a low-risk read even while flagged provisional upstream. Only the family was touched; sizes/line-heights/tracking are untouched.Test plan
yarn typescript(tsc -b)yarn lintyarn test— 55 suites / 733 tests / 169 snapshots pass, no snapshot changestypescaleoutput (ios/android/web) betweenmainand this branch — no visual verification needed since there is no rendering change