Skip to content

Font

Font family

List of design token names, values and metadata for font-family
NameValue
font-family-basesans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.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/application.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/application.json

Refers to font-family.sans-100

font-family-sans--fallbacksans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.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/application.json

Refers to font-family.serif-100

font-family-serif--fallbackserif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.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/application.json

Refers to font-family.monospace-100

font-family-monospace--fallbackmonospace, monospace

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.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/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
NameValue
font-size-x-small0.75rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.75

`x` stands for extra. In this case extra small.

font-size-small0.875rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.90

font-size-medium1rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.100

font-size-large1.125rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.110

font-size-x-large1.25rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.125

font-size-xx-large1.5rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.150

font-size-xxx-large1.75rem

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-size.175

Font weight

List of design token names, values and metadata for font-weight
NameValue
font-weight-hairline100

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-weight.25

font-weight-light300

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-weight.75

font-weight-normal400

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-weight.100

font-weight-semi-bold600

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-weight.150

font-weight-bold700

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to font-weight.175

Line height

List of design token names, values and metadata for line-height
NameValue
line-height-xxx-small1.25

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to line-height.60

`x` stands for extra. In this case extra-extra-extra small.

line-height-xx-small1.375

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.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/application.json

Refers to line-height.80

Deprecated: Legacy line-height. Use `line-height-small` instead. (use `line-height-80` instead)

line-height-small1.5714285

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to line-height.90

line-height-medium1.6

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to line-height.100

Text decoration

List of design token names, values and metadata for text-decoration
NameValue
text-decoration-nonenone

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to text-decoration.0

text-decoration-line-throughline-through

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to text-decoration.150

text-decoration-underlineunderline

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to text-decoration.200

Text overflow

List of design token names, values and metadata for text-overflow
NameValue
text-overflow-clipclip

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to text-overflow.100

text-overflow-ellipsisellipsis

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/application.json

Refers to text-overflow.200