Expand description
Type scale in rems. 14px is 1rem at the 100% text scale.
Reference priority is Figma Material 3 Design Kit > md3.io >
m3e.kyralabs.dev, per value, and the kit defines the whole type family:
sizes, line heights, weights, tracking, typefaces and the emphasized
styles all come from its local text styles M3/<group>/<size> and
M3/<group>/<size>-emphasized (Styles page, file key
ozddDB2Z1v51f1IFZlUuJ2), which are bound to its Typescale and
Font theme variable collections (mode Baseline). Fixture:
crates/material/tests/fixtures/figma-typography.json.
The kit’s Baseline font theme sets both the brand and plain faces to
Roboto, with Regular/Medium/SemiBold as its regular/medium/bold weights
(so the emphasized title-medium, title-small and label styles are 600).
md3.io agrees on every baseline metric but puts title-medium and
title-small on the brand face (tests/fixtures/md3-typography.json);
m3e’s tracking,
700 emphasized weights and Google Sans Flex
(tests/fixtures/m3e-typography.json) are outranked and kept only as
secondary evidence. Applications can resolve TypefaceRole to any
family.
Structs§
- Type
Scale - Reference typography metrics at 100% text scale.
Enums§
- Type
Role - A role in the reference Material type scale.
- Typeface
Role - Independently customizable reference typeface families.
Constants§
- BASE_PX
- The px size of 1rem at the 100% text scale.
- HEADLINE_
LINE_ HEIGHT - LEGACY_
ROLES - The M3 role each legacy size constant maps to, by constant name.
- TEXT_
AUX - Supporting and auxiliary text: body-small (12px).
- TEXT_
BODY - Body and control labels: body-medium (14px).
- TEXT_
HEADLINE - Page titles use the reference headline-small role (24px / 32px).
- TEXT_
READER - Long-form reading: body-large (16px).
- TEXT_
SECTION - Section headings on a page: title-large (22px).
- TEXT_
SETTINGS_ AUX - Component token: the supporting text of a regular tile and of a choice tile: body-medium (14px).
- TEXT_
SETTINGS_ BODY - Component token: the label of a regular tile and of a choice tile
(
crate::components::TileScale::Regular,crate::components::ChoiceTile), one step larger than navigation: body-large (16px). - TEXT_
TITLE - Card and dialog titles: title-large (22px).
Functions§
- rem
- Express a 100%-scale px size in rems.