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 | 14px | 14px |
Description
Base font size across all components. | |||
| $kendo-font-size-xs | Number | 10px | 10px |
Description
Extra small font size across all components. | |||
| $kendo-font-size-sm | Number | 12px | 12px |
Description
Small font size across all components. | |||
| $kendo-font-size-md | Number | $kendo-font-size | 14px |
Description
Medium font size across all components. | |||
| $kendo-font-size-lg | Number | 16px | 16px |
Description
Large font size across all components. | |||
| $kendo-font-size-xl | Number | 20px | 20px |
Description
Extra large font size across all components. | |||
| $kendo-font-family-sans-serif | List | 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" | 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
Font family for text. | |||
| $kendo-font-family-monospace | List | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace |
Description
Font family for monospaced text. Used for styling the code. | |||
| $kendo-font-family | String | inherit | inherit |
Description
Font family across all components. | |||
| $kendo-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
Line height used along with $kendo-font-size. | |||
| $kendo-line-height-xs | Number | 1 | 1 |
Description
Extra small line height used along with $kendo-font-size-xs. | |||
| $kendo-line-height-sm | Number | 1.25 | 1.25 |
Description
Small line height used along with $kendo-font-size-sm. | |||
| $kendo-line-height-md | Number | $kendo-line-height | 1.4285714286 |
Description
Medium line height used along with $kendo-font-size-md. | |||
| $kendo-line-height-lg | Number | 1.5 | 1.5 |
Description
Large line height used along with $kendo-font-size-lg. | |||
| $kendo-font-weight-light | Number | 300 | 300 |
Description
Light font weight. | |||
| $kendo-font-weight-normal | Number | 400 | 400 |
Description
Normal font weight. | |||
| $kendo-font-weight-medium | Number | 500 | 500 |
Description
Medium font weight. | |||
| $kendo-font-weight-semibold | Number | 600 | 600 |
Description
Semibold font weight. | |||
| $kendo-font-weight-bold | Number | 700 | 700 |
Description
Bold font weight. | |||
| $kendo-letter-spacing | Null | null | null |
Description
Letter spacing. | |||
