Font

Font family

When referring to sans-serif or serif, the font-family that will be used is dependent on the operating system. For example, the default sans-serif font in Windows is Segoe UI, and the default sans-serif font in macOS is SF Pro. Other common system sans-serif fonts include Arial, Roboto, and Helvetica. Common system serif fonts include Times New Roman and Georgia.

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

Name	Value
font-family-base The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Reference Vector's default fallback sans instead of the deprecated value `font-family-sans` in WikimediaUI Base.	sans-serif font-family.sans-10
font-family-sans deprecated The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif font-family.sans-50
font-family-system-sans The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif font-family.sans-100
font-family-sans--fallback The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	sans-serif font-family.sans-10
font-family-serif The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif font-family.serif-100
font-family-serif--fallback The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	serif font-family.serif-10
font-family-monospace The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace font-family.monospace-100
font-family-monospace--fallback The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	monospace, monospace font-family.monospace-10
font-family-heading-main The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Legacy value from WikimediaUI Base. Use for first heading special treatment.	'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif font-family.serif-100

Font size

TIP

Font size design tokens are referencing CSS custom properties rather than raw values. This means that the tokens will not work in various preprocessor functions (like Less unit()) and may require relying on CSS calc() function for basic calculations.

List of design token names, values and metadata for font-size

Name	Value
font-size-x-small The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. `x` stands for extra. In this case extra small.	0.75rem font-size.75
font-size-small The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	0.875rem font-size.90
font-size-medium The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1rem font-size.100
font-size-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.125rem font-size.110
font-size-x-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.25rem font-size.125
font-size-xx-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.5rem font-size.150
font-size-xxx-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.75rem font-size.175

Font weight

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

Name	Value
font-weight-hairline The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	100 font-weight.25
font-weight-light The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	300 font-weight.75
font-weight-normal The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	400 font-weight.100
font-weight-semi-bold The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	600 font-weight.150
font-weight-bold The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	700 font-weight.175

Line height

TIP

Line height design tokens are referencing CSS custom properties rather than raw values. This means that the tokens will not work in various preprocessor functions (like Less unit()) and may require relying on CSS calc() function for basic calculations.

List of design token names, values and metadata for line-height

Name	Value
line-height-xxx-small deprecated The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.4285714rem line-height.80
line-height-xx-small deprecated The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.5714285rem line-height.90
line-height-x-small The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. `x` stands for extra. In this case extra small.	1.25rem line-height.125
line-height-small The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.375rem line-height.140
line-height-medium The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.625rem line-height.160
line-height-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.75rem line-height.175
line-height-x-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	1.875rem line-height.190
line-height-xx-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	2.125rem line-height.210
line-height-xxx-large The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	2.375rem line-height.240
line-height-content The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times. Intended for user-generated content that comes from outside of the design system. Components and features should use the standard font-size and line-height tokens instead.	1.625 line-height-unitless.163

Text decoration

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

Name	Value
text-decoration-none The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	none text-decoration.0
text-decoration-line-through The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	line-through text-decoration.150
text-decoration-underline The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	underline text-decoration.200

Text overflow

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

Name	Value
text-overflow-clip The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	clip text-overflow.100
text-overflow-ellipsis The quick brown fox jumps over the lazy dog. Sometimes twice, sometimes three times.	ellipsis text-overflow.200