Customizing Typography
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-font-size | 0.875rem | ||
Description
The base font size across all components. | |||
| $kendo-font-size-xs | 0.625rem | ||
Description
The extra extra small font size across all components. | |||
| $kendo-font-size-sm | 0.75rem | ||
Description
The small font size across all components. | |||
| $kendo-font-size-md | $kendo-font-size | ||
Description
The medium font size across all components. | |||
| $kendo-font-size-lg | 1rem | ||
Description
The large font size across all components. | |||
| $kendo-font-size-xl | 1.25rem | ||
Description
The extra large font size across all components. | |||
| $kendo-line-height | math.div( 20, 14 ) | ||
Description
The base line height across all components. | |||
| $kendo-line-height-xs | 1 | ||
Description
The extra small line height across all components. | |||
| $kendo-line-height-sm | 1.25 | ||
Description
The small line height across all components. | |||
| $kendo-line-height-md | $kendo-line-height | ||
Description
The medium line height across all components. | |||
| $kendo-line-height-lg | 1.5 | ||
Description
The large line height across all components. | |||
| $kendo-line-height-em | calc( #{$kendo-line-height} * 1em) | ||
Description
The base line height in ems across all components. | |||
| $kendo-letter-spacing | normal | ||
Description
The base letter spacing across all components. | |||
| $kendo-font-family | "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif | ||
Description
The font family across all components. | |||
| $kendo-font-sizes | $_default-font-sizes | ||
Description
The font sizes map | |||
| $kendo-line-heights | $_default-line-heights | ||
Description
The line heights map | |||
| $kendo-h1-font-size | 32px | ||
Description
The font size of the highest level heading. | |||
| $kendo-h2-font-size | 28px | ||
Description
The font size of the second highest level heading. | |||
| $kendo-h3-font-size | 24px | ||
Description
The font size of the third highest level heading. | |||
| $kendo-h4-font-size | 20px | ||
Description
The font size of the fourth highest level heading. | |||
| $kendo-h5-font-size | 18px | ||
Description
The font size of the fifth highest level heading. | |||
| $kendo-h6-font-size | 16px | ||
Description
The font size of the sixth highest level heading. | |||
| $kendo-h1-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the highest level heading. | |||
| $kendo-h2-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the second highest level heading. | |||
| $kendo-h3-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the third highest level heading. | |||
| $kendo-h4-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the fourth highest level heading. | |||
| $kendo-h6-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the sixth highest level heading. | |||
| $kendo-h1-line-height | 40px | ||
Description
The line height of the highest level heading. | |||
| $kendo-h2-line-height | 36px | ||
Description
The line height of the second highest level heading. | |||
| $kendo-h3-line-height | 32px | ||
Description
The line height of the third highest level heading. | |||
| $kendo-h4-line-height | 28px | ||
Description
The line height of the fourth highest level heading. | |||
| $kendo-h5-line-height | 24px | ||
Description
The line height of the fifth highest level heading. | |||
| $kendo-h2-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the highest level heading. | |||
| $kendo-h1-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the second highest level heading. | |||
| $kendo-h3-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the third highest level heading. | |||
| $kendo-h4-font-weight | var( --kendo-font-weight-semibold, normal )!default | ||
Description
The font weight of the fourth highest level heading. | |||
| $kendo-h5-font-weight | var( --kendo-font-weight-semibold, normal )!default | ||
Description
The font weight of the fifth highest level heading. | |||
| $kendo-h6-font-weight | var( --kendo-font-weight-semibold, normal )!default | ||
Description
The font weight of the sixth highest level heading. | |||
| $kendo-h1-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the highest level heading. | |||
| $kendo-h2-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the second highest level heading. | |||
| $kendo-h3-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the third highest level heading. | |||
| $kendo-h4-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the fourth highest level heading. | |||
| $kendo-h5-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the fifth highest level heading. | |||
| $kendo-h6-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the sixth highest level heading. | |||
| $kendo-h1-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the highest level heading. | |||
| $kendo-h2-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the second highest level heading. | |||
| $kendo-h3-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the third highest level heading. | |||
| $kendo-h4-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the fourth highest level heading. | |||
| $kendo-h5-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the fifth highest level heading. | |||
| $kendo-h6-margin | 0 0 var( --kendo-font-size, inherit ) | ||
Description
The margin of the sixth highest level heading. | |||
| $kendo-headings | (
h1: (
font-size: $kendo-h1-font-size,
font-family: $kendo-h1-font-family,
line-height: $kendo-h1-line-height,
font-weight: $kendo-h1-font-weight,
letter-spacing: $kendo-h1-letter-spacing,
margin: $kendo-h1-margin
),
h2: (
font-size: $kendo-h2-font-size,
font-family: $kendo-h2-font-family,
line-height: $kendo-h2-line-height,
font-weight: $kendo-h2-font-weight,
letter-spacing: $kendo-h2-letter-spacing,
margin: $kendo-h2-margin
),
h3: (
font-size: $kendo-h3-font-size,
font-family: $kendo-h3-font-family,
line-height: $kendo-h3-line-height,
font-weight: $kendo-h3-font-weight,
letter-spacing: $kendo-h3-letter-spacing,
margin: $kendo-h3-margin
),
h4: (
font-size: $kendo-h4-font-size,
font-family: $kendo-h4-font-family,
line-height: $kendo-h4-line-height,
font-weight: $kendo-h4-font-weight,
letter-spacing: $kendo-h4-letter-spacing,
margin: $kendo-h4-margin
),
h5: (
font-size: $kendo-h5-font-size,
font-family: $kendo-h5-font-family,
line-height: $kendo-h5-line-height,
font-weight: $kendo-h5-font-weight,
letter-spacing: $kendo-h5-letter-spacing,
margin: $kendo-h5-margin
),
h6: (
font-size: $kendo-h6-font-size,
font-family: $kendo-h6-font-family,
line-height: $kendo-h6-line-height,
font-weight: $kendo-h6-font-weight,
letter-spacing: $kendo-h6-letter-spacing,
margin: $kendo-h6-margin
)
) | ||
Description
The headings Map. | |||
| $kendo-paragraph-margin | 0 0 var( --kendo-font-size, inherit) | ||
Description
The margin of the paragraph. | |||
| $kendo-paragraph-font-size | var( --kendo-font-size, inherit) | ||
Description
The font size of the paragraph. | |||
| $kendo-paragraph-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the paragraph. | |||
| $kendo-paragraph-line-height | var( --kendo-line-height, normal) | ||
Description
The line height of the paragraph. | |||
| $kendo-paragraph-font-weight | var( --kendo-font-weight, normal) | ||
Description
The font weight of the paragraph. | |||
| $kendo-paragraph-letter-spacing | var( --kendo-letter-spacing, normal) | ||
Description
The letter spacing of the paragraph. | |||
| $kendo-code-font-size | var( --kendo-font-size, inherit) | ||
Description
The font size of the code tag. | |||
| $kendo-code-font-family | $kendo-font-family-monospace | ||
Description
The font family of the code tag. | |||
| $kendo-code-line-height | var( --kendo-line-height, normal) | ||
Description
The line height of the code tag. | |||
| $kendo-code-font-weight | var( --kendo-font-weight, normal) | ||
Description
The font weight of the code tag. | |||
| $kendo-code-letter-spacing | var( --kendo-letter-spacing, normal) | ||
Description
The letter spacing of the code tag. | |||
| $kendo-code-padding-x | k-spacing(1) | ||
Description
The horizontal padding of the code tag. | |||
| $kendo-code-padding-y | k-spacing(0) | ||
Description
The vertical padding of the code tag. | |||
| $kendo-pre-padding-x | k-spacing(6) | ||
Description
The horizontal padding of the preformatted text. | |||
| $kendo-pre-padding-y | k-spacing(4) | ||
Description
The vertical padding of the preformatted text. | |||
| $kendo-code-border-width | 1px | ||
Description
The width of the border of the code tag. | |||
| $kendo-code-bg | var( --kendo-component-bg, initial) | ||
Description
The background color of the code tag. | |||
| $kendo-code-text | var( --kendo-component-text, initial) | ||
Description
The text color of the code tag. | |||
| $kendo-code-border | var( --kendo-component-border, initial) | ||
Description
The border color of the code tag. | |||
| $kendo-display1-font-size | calc( var( --kendo-font-size, .875rem ) * 9 ) | ||
Description
The font size of the largest display text. | |||
| $kendo-display2-font-size | calc( var( --kendo-font-size, .875rem ) * 6 ) | ||
Description
The font size of the second largest display text. | |||
| $kendo-display3-font-size | 68px | ||
Description
The font size of the third largest display text. | |||
| $kendo-display4-font-size | calc( var( --kendo-font-size, .875rem ) * 3 ) | ||
Description
The font size of the fourth largest display text. | |||
| $kendo-display1-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the largest display text. | |||
| $kendo-display2-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the second largest display text. | |||
| $kendo-display3-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the third largest display text. | |||
| $kendo-display4-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the fourth largest display text. | |||
| $kendo-display1-line-height | 118px | ||
Description
The line height of the largest display text. | |||
| $kendo-display2-line-height | 94px | ||
Description
The line height of the second largest display text. | |||
| $kendo-display3-line-height | 76px | ||
Description
The line height of the third largest display text. | |||
| $kendo-display4-line-height | 52px | ||
Description
The line height of the fourth largest display text. | |||
| $kendo-display1-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the largest display text. | |||
| $kendo-display2-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the second largest display text. | |||
| $kendo-display3-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the third largest display text. | |||
| $kendo-display4-font-weight | var( --kendo-font-weight-semibold, normal ) | ||
Description
The font weight of the fourth largest display text. | |||
| $kendo-display1-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the largest display text. | |||
| $kendo-display2-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the second largest display text. | |||
| $kendo-display3-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the third largest display text. | |||
| $kendo-display4-letter-spacing | var( --kendo-letter-spacing, normal ) | ||
Description
The letter spacing of the fourth largest display text. | |||
| $kendo-display | (
1: (
font-size: $kendo-display1-font-size,
font-family: $kendo-display1-font-family,
line-height: $kendo-display1-line-height,
font-weight: $kendo-display1-font-weight,
letter-spacing: $kendo-display1-letter-spacing
),
2: (
font-size: $kendo-display2-font-size,
font-family: $kendo-display2-font-family,
line-height: $kendo-display2-line-height,
font-weight: $kendo-display2-font-weight,
letter-spacing: $kendo-display2-letter-spacing
),
3: (
font-size: $kendo-display3-font-size,
font-family: $kendo-display3-font-family,
line-height: $kendo-display3-line-height,
font-weight: $kendo-display3-font-weight,
letter-spacing: $kendo-display3-letter-spacing
),
4: (
font-size: $kendo-display4-font-size,
font-family: $kendo-display4-font-family,
line-height: $kendo-display4-line-height,
font-weight: $kendo-display4-font-weight,
letter-spacing: $kendo-display4-letter-spacing
)
) | ||
Description
The displays Map. | |||
| $kendo-font-size-xxs | 0.5rem | ||
Description
The extra extra small font size across all components. | |||
| $kendo-font-weight | 400 | ||
Description
The base font weight across all components. | |||
| $kendo-font-weight-thin | 100 | ||
Description
The thin font weight across all components. | |||
| $kendo-font-weight-extra-light | 200 | ||
Description
The extra light font weight across all components. | |||
| $kendo-font-weight-light | 300 | ||
Description
The light font weight across all components. | |||
| $kendo-font-weight-normal | $kendo-font-weight | ||
Description
The normal font weight across all components. | |||
| $kendo-font-weight-medium | 500 | ||
Description
The medium font weight across all components. | |||
| $kendo-font-weight-semibold | 600 | ||
Description
The semibold font weight across all components. | |||
| $kendo-font-weight-bold | 700 | ||
Description
The bold font weight across all components. | |||
| $kendo-font-weight-extra-bold | 800 | ||
Description
The extra bold font weight across all components. | |||
| $kendo-font-weight-black | 900 | ||
Description
The most pronounced font weight across all components. | |||
| $kendo-letter-spacing-tightest | -.15px | ||
Description
The tightest letter spacing across all components. | |||
| $kendo-letter-spacing-tighter | -.10px | ||
Description
Slightly looser than the tighter letter spacing across all components. | |||
| $kendo-letter-spacing-tight | -.5px | ||
Description
Moderately tight letter spacing across all components. | |||
| $kendo-letter-spacing-normal | 0px | ||
Description
The normal letter spacing across all components. | |||
| $kendo-letter-spacing-wide | .5px | ||
Description
Wide letter spacing across all components. | |||
| $kendo-letter-spacing-wider | .10px | ||
Description
Slightly wider than the wide letter spacing across all components. | |||
| $kendo-letter-spacing-widest | .15px | ||
Description
The widest letter spacing across all components. | |||
| $kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | ||
Description
The sans font family across all components. | |||
| $kendo-font-family-serif | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | ||
Description
The serif font family across all components. | |||
| $kendo-font-family-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | ||
Description
The sans-serif font family across all components. | |||
| $kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | ||
Description
The monospace font family across all components. | |||
| $kendo-font-weights | k-map-merge( $_default-font-weights, $kendo-font-weights ) | ||
Description
The font weights map | |||
| $kendo-letter-spacings | k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) | ||
Description
The letter spacings map | |||
| $kendo-font-families | k-map-merge( $_default-font-families, $kendo-font-families ) | ||
Description
The font families map | |||
