On this page

Font

Font family

List of design token names, values and metadata for `font-family`
Name	Value
font-family-base	`sans-serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.sans.10` Reference Vector's default fallback sans instead of the deprecated value `font-family-sans` in WikimediaUI Base.
font-family-sans deprecated	`'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.sans.50` Deprecated: Use `font-family-sans--fallback` instead. See T247166. (use `font-family-sans-50` instead)
font-family-system-sans	`-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.sans.100`
font-family-sans--fallback	`sans-serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.sans.10`
font-family-serif	`'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.serif.100`
font-family-serif--fallback	`serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.serif.10`
font-family-monospace	`'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.monospace.100`
font-family-monospace--fallback	`monospace, monospace` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-family.monospace.10`
font-family-heading-main	`'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-components.json` Refers to `font-family.serif.100` Legacy value from WikimediaUI Base. Use for first heading special treatment.

Font size

List of design token names, values and metadata for `font-size`
Name	Value
font-size-base	`16px` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. This token is targeted exclusively for font-size derived calculations. Apply `font-size-medium` and similar for component font size property use.
font-size-x-small	`0.75em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.75` Refers to `unit.system` `x` stands for extra. In this case extra small.
font-size-small	`0.875em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.90` Refers to `unit.system`
font-size-medium	`1em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.100` Refers to `unit.system`
font-size-large	`1.125em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.110` Refers to `unit.system`
font-size-x-large	`1.25em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.125` Refers to `unit.system`
font-size-xx-large	`1.5em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.150` Refers to `unit.system`
font-size-xxx-large	`1.75em` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-size.175` Refers to `unit.system`

Font weight

List of design token names, values and metadata for `font-weight`
Name	Value
font-weight-hairline	`100` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-weight.25`
font-weight-light	`300` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-weight.75`
font-weight-normal	`400` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-weight.100`
font-weight-semi-bold	`600` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-weight.150`
font-weight-bold	`700` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `font-weight.175`

Line height

List of design token names, values and metadata for `line-height`
Name	Value
line-height-xxx-small	`1.25` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `line-height.60` `x` stands for extra. In this case extra-extra-extra small.
line-height-xx-small	`1.375` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `line-height.70`
line-height-x-small deprecated	`1.4285714` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `line-height.80` Deprecated: Legacy line-height. Use `line-height-small` instead. (use `line-height-80` instead)
line-height-small	`1.5714285` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `line-height.90`
line-height-medium	`1.6` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `line-height.100`

Text decoration

List of design token names, values and metadata for `text-decoration`
Name	Value
text-decoration-none	`none` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `text-decoration.0`
text-decoration-line-through	`line-through` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `text-decoration.150`
text-decoration-underline	`underline` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `text-decoration.200`

Text overflow

List of design token names, values and metadata for `text-overflow`
Name	Value
text-overflow-clip	`clip` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `text-overflow.100`
text-overflow-ellipsis	`ellipsis` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/codex-base.json` Refers to `text-overflow.200`

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

List of design token names, values and metadata for `line-height`
Name	Value
line-height-base deprecated	`1.6` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `line-height.medium` Deprecated: Use `line-height-medium` instead.
line-height-heading deprecated	`1.375` The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `line-height.xx-small` Deprecated: Use `line-height-xx-small` instead.