New to Kendo UI for Angular? Start a free 30-day trial
Customizing Typography
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-font-size | Number | 0.875rem | 0.875rem |
Description
The base font size across all components. | |||
| $kendo-font-size-xs | Number | 0.625rem | 0.625rem |
Description
The extra extra small font size across all components. | |||
| $kendo-font-size-sm | Number | 0.75rem | 0.75rem |
Description
The small font size across all components. | |||
| $kendo-font-size-md | Number | $kendo-font-size | 0.875rem |
Description
The medium font size across all components. | |||
| $kendo-font-size-lg | Number | 1rem | 1rem |
Description
The large font size across all components. | |||
| $kendo-font-size-xl | Number | 1.25rem | 1.25rem |
Description
The extra large font size across all components. | |||
| $kendo-line-height | Number | k-math-div( 28, 14 ) | 2 |
Description
The base line height across all components. | |||
| $kendo-line-height-xs | Number | 1 | 1 |
Description
The extra small line height across all components. | |||
| $kendo-line-height-sm | Number | 1.2 | 1.2 |
Description
The small line height across all components. | |||
| $kendo-line-height-md | Number | $kendo-line-height | 2 |
Description
The medium line height across all components. | |||
| $kendo-line-height-lg | Number | 1.5 | 1.5 |
Description
The large line height across all components. | |||
| $kendo-line-height-em | Calculation | calc( #{$kendo-line-height} * 1em ) | calc(2 * 1em) |
Description
The base line height in ems across all components. | |||
| $kendo-letter-spacing | Null | null | null |
Description
The base letter spacing across all components. | |||
| $kendo-letter-spacing-tightest | Number | -2.5px | -2.5px |
Description
The tightest letter spacing across all components. | |||
| $kendo-letter-spacing-tighter | Number | -1.5px | -1.5px |
Description
Slightly looser than the tighter letter spacing across all components. | |||
| $kendo-letter-spacing-tight | Number | -.5px | -0.5px |
Description
Moderately tight letter spacing across all components. | |||
| $kendo-letter-spacing-normal | Number | 0px | 0px |
Description
The normal letter spacing across all components. | |||
| $kendo-letter-spacing-wide | Number | .15px | 0.15px |
Description
Wide letter spacing across all components | |||
| $kendo-letter-spacing-wider | Number | .25px | 0.25px |
Description
Slightly wider than the wide letter spacing across all components. | |||
| $kendo-letter-spacing-widest | Number | .35px | 0.35px |
Description
The widest letter spacing across all components. | |||
| $kendo-font-family-sans-serif | List | Roboto, "Helvetica Neue", sans-serif | Roboto, "Helvetica Neue", sans-serif |
Description
The sans-serif font family across all components. | |||
| $kendo-font-family-monospace | List | Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
Description
The monospace font family across all components. | |||
| $kendo-font-family | List | $kendo-font-family-sans-serif | Roboto, "Helvetica Neue", sans-serif |
Description
The base font family across all components. | |||
| $kendo-font-sizes | Map | $_default-font-sizes | (xs: 0.625rem, sm: 0.75rem, md: 0.875rem, lg: 1rem, xl: 1.25rem) |
Description
The font sizes map | |||
| $kendo-line-heights | Map | $_default-line-heights | (xs: 1, sm: 1.2, md: 2, lg: 1.5) |
Description
The line heights map | |||
| $kendo-letter-spacings | Map | $_default-letter-spacings | (tightest: -2.5px, tighter: -1.5px, tight: -0.5px, normal: 0px, wide: 0.15px, wider: 0.25px, widest: 0.35px) |
Description
The letter spacings map | |||
| $kendo-font-families | Map | $_default-font-families | (sans-serif: (Roboto, "Helvetica Neue", sans-serif), monospace: (Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) |
Description
The font families map | |||
| $kendo-h1-font-size | Number | 96px | 96px |
Description
The font size of the highest level heading. | |||
| $kendo-h2-font-size | Number | 60px | 60px |
Description
The font size of the second highest level heading. | |||
| $kendo-h3-font-size | Number | 48px | 48px |
Description
The font size of the third highest level heading. | |||
| $kendo-h4-font-size | Number | 34px | 34px |
Description
The font size of the fourth highest level heading. | |||
| $kendo-h5-font-size | Number | 24px | 24px |
Description
The font size of the fifth highest level heading. | |||
| $kendo-h6-font-size | Number | 20px | 20px |
Description
The font size of the sixth highest level heading. | |||
| $kendo-h1-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the highest level heading. | |||
| $kendo-h2-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the second highest level heading. | |||
| $kendo-h3-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the third highest level heading. | |||
| $kendo-h4-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the fourth highest level heading. | |||
| $kendo-h5-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the fifth highest level heading. | |||
| $kendo-h6-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the sixth highest level heading. | |||
| $kendo-h1-line-height | Number | 112px | 112px |
Description
The line height of the highest level heading. | |||
| $kendo-h2-line-height | Number | 72px | 72px |
Description
The line height of the second highest level heading. | |||
| $kendo-h3-line-height | Number | 56px | 56px |
Description
The line height of the third highest level heading. | |||
| $kendo-h4-line-height | Number | 36px | 36px |
Description
The line height of the fourth highest level heading. | |||
| $kendo-h5-line-height | Number | 24px | 24px |
Description
The line height of the fifth highest level heading. | |||
| $kendo-h6-line-height | Number | 24px | 24px |
Description
The line height of the sixth highest level heading. | |||
| $kendo-h1-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the highest level heading. | |||
| $kendo-h2-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the second highest level heading. | |||
| $kendo-h3-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the third highest level heading. | |||
| $kendo-h4-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the fourth highest level heading. | |||
| $kendo-h5-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the fifth highest level heading. | |||
| $kendo-h6-font-weight | String | var( --kendo-font-weight-medium, normal ) | var(--kendo-font-weight-medium, normal) |
Description
The font weight of the sixth highest level heading. | |||
| $kendo-h1-letter-spacing | String | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) |
Description
The letter spacing of the highest level heading. | |||
| $kendo-h2-letter-spacing | String | var( --kendo-letter-spacing-tight, normal ) | var(--kendo-letter-spacing-tight, normal) |
Description
The letter spacing of the second highest level heading. | |||
| $kendo-h3-letter-spacing | String | var( --kendo-letter-spacing-normal, normal ) | var(--kendo-letter-spacing-normal, normal) |
Description
The letter spacing of the third highest level heading. | |||
| $kendo-h4-letter-spacing | String | var( --kendo-letter-spacing-wider, normal ) | var(--kendo-letter-spacing-wider, normal) |
Description
The letter spacing of the fourth highest level heading. | |||
| $kendo-h5-letter-spacing | String | var( --kendo-letter-spacing-normal, normal ) | var(--kendo-letter-spacing-normal, normal) |
Description
The letter spacing of the fifth highest level heading. | |||
| $kendo-h6-letter-spacing | String | var( --kendo-letter-spacing-wide, normal ) | var(--kendo-letter-spacing-wide, normal) |
Description
The letter spacing of the sixth highest level heading. | |||
| $kendo-h1-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the highest level heading. | |||
| $kendo-h2-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the second highest level heading. | |||
| $kendo-h3-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the third highest level heading. | |||
| $kendo-h4-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the fourth highest level heading. | |||
| $kendo-h5-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the fifth highest level heading. | |||
| $kendo-h6-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the sixth highest level heading. | |||
| $kendo-headings | Map | (
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
| (h1: (font-size: 96px, font-family: var(--kendo-font-family, inherit), line-height: 112px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal), margin: 0 0 12px), h2: (font-size: 60px, font-family: var(--kendo-font-family, inherit), line-height: 72px, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tight, normal), margin: 0 0 12px), h3: (font-size: 48px, font-family: var(--kendo-font-family, inherit), line-height: 56px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h4: (font-size: 34px, font-family: var(--kendo-font-family, inherit), line-height: 36px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-wider, normal), margin: 0 0 12px), h5: (font-size: 24px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-normal, normal), letter-spacing: var(--kendo-letter-spacing-normal, normal), margin: 0 0 12px), h6: (font-size: 20px, font-family: var(--kendo-font-family, inherit), line-height: 24px, font-weight: var(--kendo-font-weight-medium, normal), letter-spacing: var(--kendo-letter-spacing-wide, normal), margin: 0 0 12px)) |
Description
The headings Map. | |||
| $kendo-paragraph-margin | List | 0 0 12px | 0 0 12px |
Description
The margin of the paragraph. | |||
| $kendo-paragraph-font-size | Number | 1rem | 1rem |
Description
The font size of the paragraph. | |||
| $kendo-paragraph-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the paragraph. | |||
| $kendo-paragraph-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the paragraph. | |||
| $kendo-paragraph-letter-spacing | Number | .0313em | 0.0313em |
Description
The letter spacing of the paragraph. | |||
| $kendo-code-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the code tag. | |||
| $kendo-code-font-family | String | var( --kendo-font-family-monospace, normal ) | var(--kendo-font-family-monospace, normal) |
Description
The font family of the code tag. | |||
| $kendo-code-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the code tag. | |||
| $kendo-code-font-weight | String | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) |
Description
The font weight of the code tag. | |||
| $kendo-code-letter-spacing | Null | null | null |
Description
The letter spacing of the code tag. | |||
| $kendo-code-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the code tag. | |||
| $kendo-code-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the code tag. | |||
| $kendo-pre-padding-x | String | k-spacing(6) | var(--kendo-spacing-6, 1.5rem) |
Description
The horizontal padding of the preformatted text. | |||
| $kendo-pre-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the preformatted text. | |||
| $kendo-code-border-width | Number | 1px | 1px |
Description
The border width of the code tag. | |||
| $kendo-code-bg | String | $kendo-base-bg | var(--kendo-color-app-surface, #ffffff) |
Description
The background color of the code tag. | |||
| $kendo-code-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212121) |
Description
The text color of the code tag. | |||
| $kendo-code-border | String | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
Description
The border color of the code tag. | |||
| $kendo-display1-font-size | Calculation | calc( var( --kendo-font-size, .875rem ) * 9.5 ) | calc(var(--kendo-font-size, 0.875rem) * 9.5) |
Description
The font size of the largest display text. | |||
| $kendo-display2-font-size | Calculation | calc( var( --kendo-font-size, .875rem ) * 8.75 ) | calc(var(--kendo-font-size, 0.875rem) * 8.75) |
Description
The font size of the second largest display text. | |||
| $kendo-display3-font-size | Calculation | calc( var( --kendo-font-size, .875rem ) * 8 ) | calc(var(--kendo-font-size, 0.875rem) * 8) |
Description
The font size of the third largest display text. | |||
| $kendo-display4-font-size | Calculation | calc( var( --kendo-font-size, .875rem ) * 7.25 ) | calc(var(--kendo-font-size, 0.875rem) * 7.25) |
Description
The font size of the fourth largest display text. | |||
| $kendo-display1-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the largest display text. | |||
| $kendo-display2-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the second largest display text. | |||
| $kendo-display3-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the third largest display text. | |||
| $kendo-display4-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the fourth largest display text. | |||
| $kendo-display1-line-height | Number | 1.2 | 1.2 |
Description
The line height of the largest display text. | |||
| $kendo-display2-line-height | Number | 1.2 | 1.2 |
Description
The line height of the second largest display text. | |||
| $kendo-display3-line-height | Number | 1.2 | 1.2 |
Description
The line height of the third largest display text. | |||
| $kendo-display4-line-height | Number | 1.2 | 1.2 |
Description
The line height of the fourth largest display text. | |||
| $kendo-display1-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the largest display text. | |||
| $kendo-display2-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the second largest display text. | |||
| $kendo-display3-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the third largest display text. | |||
| $kendo-display4-font-weight | String | var( --kendo-font-weight-light, normal ) | var(--kendo-font-weight-light, normal) |
Description
The font weight of the fourth largest display text. | |||
| $kendo-display1-letter-spacing | String | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) |
Description
The letter spacing of the largest display text. | |||
| $kendo-display2-letter-spacing | String | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) |
Description
The letter spacing of the second largest display text. | |||
| $kendo-display3-letter-spacing | String | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) |
Description
The letter spacing of the third largest display text. | |||
| $kendo-display4-letter-spacing | String | var( --kendo-letter-spacing-tighter, normal ) | var(--kendo-letter-spacing-tighter, normal) |
Description
The letter spacing of the fourth largest display text. | |||
| $kendo-display | Map | (
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
),
) | (1: (font-size: calc(var(--kendo-font-size, 0.875rem) * 9.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 2: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8.75), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 3: (font-size: calc(var(--kendo-font-size, 0.875rem) * 8), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal)), 4: (font-size: calc(var(--kendo-font-size, 0.875rem) * 7.25), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: var(--kendo-font-weight-light, normal), letter-spacing: var(--kendo-letter-spacing-tighter, normal))) |
Description
The displays Map. | |||
| $kendo-font-size-xxs | Number | 0.5rem | 0.5rem |
Description
The extra extra small font size across all components. | |||
| $kendo-font-weight | Number | 400 | 400 |
Description
The base font weight across all components. | |||
| $kendo-font-weight-thin | Number | 100 | 100 |
Description
The thin font weight across all components. | |||
| $kendo-font-weight-extra-light | Number | 200 | 200 |
Description
The extra light font weight across all components. | |||
| $kendo-font-weight-light | Number | 300 | 300 |
Description
The light font weight across all components. | |||
| $kendo-font-weight-normal | Number | $kendo-font-weight | 400 |
Description
The normal font weight across all components. | |||
| $kendo-font-weight-medium | Number | 500 | 500 |
Description
The medium font weight across all components. | |||
| $kendo-font-weight-semibold | Number | 600 | 600 |
Description
The semibold font weight across all components. | |||
| $kendo-font-weight-bold | Number | 700 | 700 |
Description
The bold font weight across all components. | |||
| $kendo-font-weight-extra-bold | Number | 800 | 800 |
Description
The extra bold font weight across all components. | |||
| $kendo-font-weight-black | Number | 900 | 900 |
Description
The most pronounced font weight across all components. | |||
| $kendo-font-family-sans | List | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans |
Description
The sans font family across all components. | |||
| $kendo-font-family-serif | List | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | "Times New Roman", Georgia, Garamond, Palatino, Baskerville |
Description
The serif font family across all components. | |||
| $kendo-font-weights | Map | k-map-merge( $_default-font-weights, $kendo-font-weights ) | (thin: 100, extra-light: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700) |
Description
The font weights map | |||
