0.2.2 alpha

Menu

Typography

StableView the source

The typefaces, text sizes and named text styles that every component sets its words in.

Primitive and semantic tokensChanges with viewport

Type scale

  1. Display XL

    typography.display-xl56 to 88 px · weight 400 · line height 1

  2. Display LG

    typography.display-lg48 to 72 px · weight 400 · line height 1

  3. Heading XL

    typography.heading-xl40 to 56 px · weight 400 · line height 1.2

  4. Heading LG

    typography.heading-lg32 to 48 px · weight 400 · line height 1.2

  5. Heading MD

    typography.heading-md28 to 40 px · weight 400 · line height 1.2

  6. Heading SM

    typography.heading-sm24 to 32 px · weight 400 · line height 1.2

  7. Heading XS

    typography.heading-xs20 to 28 px · weight 400 · line height 1.2

  8. Heading 2XS

    typography.heading-2xs18 to 24 px · weight 400 · line height 1.2

  9. Subtitle

    typography.subtitle20 px · weight 400 · line height 1.4

  10. Body LG

    typography.body-lg20 px · weight 400 · line height 1.5

  11. Body MD

    typography.body-md16 px · weight 400 · line height 1.5

  12. Body SM

    typography.body-sm14 px · weight 400 · line height 1.5

  13. Body XS

    typography.body-xs12 px · weight 400 · line height 1.5

  14. Label LG

    typography.label-lg16 px · weight 500 · line height 1.4

  15. Label MD

    typography.label-md14 px · weight 500 · line height 1.4

  16. Label SM

    typography.label-sm12 px · weight 500 · line height 1.4

  17. Field SM

    typography.field-sm16 px on a phone, 14 on a desktop · weight 400 · line height 1.5

  18. Code SM

    typography.code-sm12 px · weight 400 · line height 1.5

  19. Code MD

    typography.code-md14 px · weight 400 · line height 1.6

Guidelines

Purpose

The vocabulary of text: which faces exist, which sizes exist, and the named presets that combine face, size, weight, line height, letter spacing and case into a role such as page title, body copy or control label. Components consume presets. They do not compose text from raw values.

How it is structured

Three groups, stacked.

At the bottom, the typographic primitives: the font families — a display face for headings, a body face for reading, and a monospace face for code and keys — plus runs of sizes, weights and letter-spacing steps. These are ingredients and reach nothing directly.

In the middle, the text sizes: a semantic run of named sizes for display, heading, body and label roles. This is the only layer that changes with the viewport, and it is the layer the presets read their size from.

On top, the presets: display registers and heading levels, each with a light version, body sizes with their medium, semibold and bold versions, label sizes, a small field size and code sizes. Each preset is one composite token. Labels are set in the body face at a medium weight, in sentence case. A preset set in capitals carries the case out of the composite as a setting the component applies, because the token standard's text recipe has no slot for it.

The shape follows role families — display, heading, body, label — with headings independent of the HTML heading level a page chooses.

Tabular figures, digits of equal width for columns, counters and timers, are a CSS setting on the component that needs them, not a token.

Tiers

Text keeps its full line box, in Figma and in the components: nothing is trimmed to the cap height. The space between two texts is the gap between their boxes plus each line's own leading, so the text spacing tokens are set for untrimmed text, and a stack of text in the browser measures the same as its Figma frame.

Font families, sizes, weights and letter-spacing steps are primitives and do not reach CSS as custom properties, for the same reason primitive colors do not: the text ramp compresses at narrow widths, and a component reading a raw size would be blind to that. Semantic text sizes and the presets are what reach CSS. A preset becomes one custom property per part — family, size, weight, line height, letter spacing and text transform — because no single CSS property carries all of them without losing some.

Context behavior

Text size follows the viewport and involves no choice. Below the switch width the text sizes take their minimum values; at and above it, the display and heading sizes step up, some by more than one step, while body and label sizes stay put. The switch width is itself a token, documented under Breakpoints, so the boundary is a design decision held in the token source rather than a number in a stylesheet.

Line heights are ratios, so they scale with the size on their own. Letter spacing is a fixed length, so it does not; the display and heading presets use no tracking, and only the smaller labels carry a little.

Theme and density do not touch typography.

Usage rules

Do

  • Consume a preset by referencing all of its parts together. Longhand properties are always safe; the label presets additionally need their text transform applied.
  • Match the preset to the role, not the size. A card title is the preset that card titles use; if it needs to be bigger, that is a different preset, not a size override.
  • Choose the HTML heading level from document structure and the preset from appearance. They are independent (TYP-001).
  • Use the label presets for every uppercase moment. Uppercase outside the label register is not part of the system.
  • Let text reflow and grow. Components must survive 200% text scaling and the guideline's text-spacing overrides without clipping (TYP-002, TYP-003).

Don't

  • Write a font family, size, weight, line height or letter spacing in component CSS. The conformance checker rejects it.
  • Apply uppercase to a body or display preset.
  • Override one part of a preset with another preset's part. Mixing a heading's size with a body face is a new preset, and new presets are decided in Figma.
  • Use a viewport media query on text inside a component. The text sizes already follow the viewport; a component that wants a different size at a different width wants a different preset.
  • Leave any of the three faces unloaded. Each family names backups after it, a stand-in face sized to match and then the system's own font, so a page drawn before its face arrives keeps its layout. But the backups only stand in; they are not the system's type.
  • Use a display preset more than once on a page, or in a product screen. Display presets are for one moment on a marketing or brand page; product screens stop at the largest heading.

Tokens

106 tokens in 8 groups. Open a group to see its tokens. The button beside a CSS name copies it, ready to paste; open a row for what the token is for and which components read it.

Font familyprimitive · 3 tokens
Typography tokens: Font family
TokenCSS
displayNot in CSS
bodyNot in CSS
monoNot in CSS
Font sizeprimitive · 14 tokens
Typography tokens: Font size
TokenValuePictureCSS
1212pxNot in CSS
1414pxNot in CSS
1616pxNot in CSS
1818pxNot in CSS
2020pxNot in CSS
2424pxNot in CSS
2828pxNot in CSS
3232pxNot in CSS
4040pxNot in CSS
4848pxNot in CSS
5656pxNot in CSS
6464pxNot in CSS
7272pxNot in CSS
8888pxNot in CSS
Font weightprimitive · 4 tokens
Typography tokens: Font weight
TokenValuePictureCSS
light300

The quick brown fox

Not in CSS
regular400

The quick brown fox

Not in CSS
medium500

The quick brown fox

Not in CSS
semibold600

The quick brown fox

Not in CSS
Font letter spacingprimitive · 2 tokens
Typography tokens: Font letter spacing
TokenValuePictureCSS
none0pxNot in CSS
loose0.5pxNot in CSS
Text stylessemantic · 36 tokens
Typography tokens: Text styles
StyleSpecimenSizeWeightLine heightCSS
display-xl56 to 88 px4001--smbk-typography-display-xl-*
display-lg48 to 72 px4001--smbk-typography-display-lg-*
heading-xl40 to 56 px4001.2--smbk-typography-heading-xl-*
heading-lg32 to 48 px4001.2--smbk-typography-heading-lg-*
heading-md28 to 40 px4001.2--smbk-typography-heading-md-*
heading-sm24 to 32 px4001.2--smbk-typography-heading-sm-*
heading-xs20 to 28 px4001.2--smbk-typography-heading-xs-*
heading-2xs18 to 24 px4001.2--smbk-typography-heading-2xs-*
subtitle20 px4001.4--smbk-typography-subtitle-*
body-lg20 px4001.5--smbk-typography-body-lg-*
body-md16 px4001.5--smbk-typography-body-md-*
body-sm14 px4001.5--smbk-typography-body-sm-*
body-xs12 px4001.5--smbk-typography-body-xs-*
label-lg16 px5001.4--smbk-typography-label-lg-*
label-md14 px5001.4--smbk-typography-label-md-*
label-sm12 px5001.4--smbk-typography-label-sm-*
display-xl-light56 to 88 px3001--smbk-typography-display-xl-light-*
display-lg-light48 to 72 px3001--smbk-typography-display-lg-light-*
heading-xl-light40 to 56 px3001.2--smbk-typography-heading-xl-light-*
heading-lg-light32 to 48 px3001.2--smbk-typography-heading-lg-light-*
heading-md-light28 to 40 px3001.2--smbk-typography-heading-md-light-*
heading-sm-light24 to 32 px3001.2--smbk-typography-heading-sm-light-*
heading-xs-light20 to 28 px3001.2--smbk-typography-heading-xs-light-*
heading-2xs-light18 to 24 px3001.2--smbk-typography-heading-2xs-light-*
field-sm16 px on a phone, 14 on a desktop4001.5--smbk-typography-field-sm-*
code-sm12 px4001.5--smbk-typography-code-sm-*
code-md14 px4001.6--smbk-typography-code-md-*
body-md-medium16 px5001.5--smbk-typography-body-md-medium-*
body-sm-medium14 px5001.5--smbk-typography-body-sm-medium-*
body-lg-bold20 px7001.5--smbk-typography-body-lg-bold-*
heading-2xs-bold18 to 24 px7001.2--smbk-typography-heading-2xs-bold-*
body-md-bold16 px7001.5--smbk-typography-body-md-bold-*
body-sm-bold14 px7001.5--smbk-typography-body-sm-bold-*
body-md-semibold16 px6001.5--smbk-typography-body-md-semibold-*
body-sm-semibold14 px6001.5--smbk-typography-body-sm-semibold-*
body-lg-light20 px3001.5--smbk-typography-body-lg-light-*
Font weightsemantic · 1 token
Typography tokens: Font weight
TokenValuePictureCSS
bold700

The quick brown fox

Not in CSS
Font fallbacksemantic · 30 tokens
Typography tokens: Font fallback
TokenCSS
Body12
stackNot in CSS
localNot in CSS
size-adjustNot in CSS
ascentNot in CSS
descentNot in CSS
line-gapNot in CSS
light.size-adjustNot in CSS
medium.size-adjustNot in CSS
semibold.localNot in CSS
semibold.size-adjustNot in CSS
bold.localNot in CSS
bold.size-adjustNot in CSS
Display12
stackNot in CSS
localNot in CSS
size-adjustNot in CSS
ascentNot in CSS
descentNot in CSS
line-gapNot in CSS
light.size-adjustNot in CSS
medium.size-adjustNot in CSS
semibold.localNot in CSS
semibold.size-adjustNot in CSS
bold.localNot in CSS
bold.size-adjustNot in CSS
Mono6
stackNot in CSS
localNot in CSS
size-adjustNot in CSS
ascentNot in CSS
descentNot in CSS
line-gapNot in CSS
Text sizessemantic · 16 tokens
Typography tokens: Text sizes
TokenPhoneDesktopCSS
display-xl56px88px--smbk-text-display-xl
display-lg48px72px--smbk-text-display-lg
heading-xl40px56px--smbk-text-heading-xl
heading-lg32px48px--smbk-text-heading-lg
heading-md28px40px--smbk-text-heading-md
heading-sm24px32px--smbk-text-heading-sm
heading-xs20px28px--smbk-text-heading-xs
heading-2xs18px24px--smbk-text-heading-2xs
body-lg20px20px--smbk-text-body-lg
body-md16px16px--smbk-text-body-md
body-sm14px14px--smbk-text-body-sm
body-xs12px12px--smbk-text-body-xs
label-lg16px16px--smbk-text-label-lg
label-md14px14px--smbk-text-label-md
label-sm12px12px--smbk-text-label-sm
field-sm16px14px--smbk-text-field-sm