Typography

The 30 type styles from TypeScaleTokens (Compose Material3 1.5.0-beta01) set in Google Sans Flex (D1), self-hosted from @kyralabs/m3e-tokens/fonts.css. Compare with the m3.material.io type scale.

bodyLarge
16/24 sp · weight 400 · tracking 0.5 sp · plain
bodyMedium
14/20 sp · weight 400 · tracking 0.2 sp · plain
bodySmall
12/16 sp · weight 400 · tracking 0.4 sp · plain
displayLarge
57/64 sp · weight 400 · tracking -0.2 sp · brand
displayMedium
45/52 sp · weight 400 · tracking 0 sp · brand
displaySmall
36/44 sp · weight 400 · tracking 0 sp · brand
headlineLarge
32/40 sp · weight 400 · tracking 0 sp · brand
headlineMedium
28/36 sp · weight 400 · tracking 0 sp · brand
headlineSmall
24/32 sp · weight 400 · tracking 0 sp · brand
labelLarge
14/20 sp · weight 500 · tracking 0.1 sp · plain
labelMedium
12/16 sp · weight 500 · tracking 0.5 sp · plain
labelSmall
11/16 sp · weight 500 · tracking 0.5 sp · plain
titleLarge
22/28 sp · weight 400 · tracking 0 sp · brand
titleMedium
16/24 sp · weight 500 · tracking 0.2 sp · plain
titleSmall
14/20 sp · weight 500 · tracking 0.1 sp · plain
bodyLargeEmphasized
16/24 sp · weight 500 · tracking 0.15 sp · plain
bodyMediumEmphasized
14/20 sp · weight 500 · tracking 0.25 sp · plain
bodySmallEmphasized
12/16 sp · weight 500 · tracking 0.4 sp · plain
displayLargeEmphasized
57/64 sp · weight 500 · tracking 0 sp · brand
displayMediumEmphasized
45/52 sp · weight 500 · tracking 0 sp · brand
displaySmallEmphasized
36/44 sp · weight 500 · tracking 0 sp · brand
headlineLargeEmphasized
32/40 sp · weight 500 · tracking 0 sp · brand
headlineMediumEmphasized
28/36 sp · weight 500 · tracking 0 sp · brand
headlineSmallEmphasized
24/32 sp · weight 500 · tracking 0 sp · brand
labelLargeEmphasized
14/20 sp · weight 700 · tracking 0.1 sp · plain
labelMediumEmphasized
12/16 sp · weight 700 · tracking 0.5 sp · plain
labelSmallEmphasized
11/16 sp · weight 700 · tracking 0.5 sp · plain
titleLargeEmphasized
22/28 sp · weight 500 · tracking 0 sp · brand
titleMediumEmphasized
16/24 sp · weight 700 · tracking 0.15 sp · plain
titleSmallEmphasized
14/20 sp · weight 700 · tracking 0.1 sp · plain

Font profiles

@kyralabs/m3e-tokens ships Google Sans Flex in three profiles (D11, D15). Each registers the same "Google Sans Flex" family, so import exactly one: the others replace fonts.css, they do not add to it. Axes a profile drops are fixed at their defaults (wdth 100, ROND 0, slnt 0), so every profile renders the type scale above identically. Browsers download only the chunks a page's text needs.

Entry	Variable axes	Latin chunk	All chunks	Use
`fonts.css`	wght, opsz	138.8 KiB	328.5 KiB	Default; the umbrella CSS imports it.
`fonts-rond.css`	wght, opsz, ROND	205.2 KiB	468.1 KiB	Opt-in roundness (D15).
`fonts-full.css`	wght, opsz, ROND, wdth, slnt	1020.8 KiB	2026.8 KiB	Every axis, for width and slant.

Roundness (ROND)

To round the letterforms, import fonts-rond.css instead of fonts.css (with the umbrella package, import the layers' CSS yourself in place of its bundled stylesheet), then set the axis. ROND runs from 0 (the default) to 100. It has no CSS property of its own, so it is set with font-variation-settings, which replaces any inherited value instead of merging with it: repeat every other axis you set in the same declaration.

@import '@kyralabs/m3e-tokens/fonts-rond.css'; /* instead of fonts.css */
@import '@kyralabs/m3e-tokens/tokens.css';
@import '@kyralabs/m3e-tokens/theme.css';
@import '@kyralabs/m3e-css/index.css';

.playful {
  font-variation-settings: 'ROND' 100;
}

The type scale tokens do not set ROND, wdth or slnt: no Material source specifies values for them, so emphasized styles change weight only. The samples below use the latin chunk of the ROND profile under a docs-only family name, so the rest of this site keeps the default profile.

Roundness 0
font-variation-settings: 'ROND' 0
Roundness 100
font-variation-settings: 'ROND' 100