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 | |||
