Customizing Typography
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-font-size-xs | Number | .75rem | 0.75rem |
Description
Base 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 | null | inherit |
Description
Font family across all components. | |||
| $kendo-line-height-sm | Number | 1.25 | 1.25 |
Description
Line height used along with $kendo-font-size. | |||
| $kendo-font-size | Number | 0.875rem | 0.875rem |
Description
The base font size across all components. | |||
| $kendo-font-size-xxs | Number | 0.5rem | 0.5rem |
Description
The extra extra small font size across all components. | |||
| $kendo-font-size-sm | Number | 0.75rem | 0.875rem |
Description
The small font size across all components. | |||
| $kendo-font-size-md | Number | $kendo-font-size | 1rem |
Description
The medium font size across all components. | |||
| $kendo-font-size-lg | Number | 1rem | 1.25rem |
Description
The large font size across all components. | |||
| $kendo-font-size-xl | Number | 1.25rem | 1.5rem |
Description
The extra large font size across all components. | |||
| $kendo-line-height | Number | k-math-div( 20, 14 ) | 1.4285714286 |
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-md | Number | $kendo-line-height | 1.5 |
Description
The medium line height across all components. | |||
| $kendo-line-height-lg | Number | 1.5 | 1.75 |
Description
The large line height across all components. | |||
| $kendo-line-height-em | Calculation | calc( #{$kendo-line-height-md} * 1em ) | calc(1.5 * 1em) |
Description
The base line height in ems 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-letter-spacing | Null | null | null |
Description
The base letter spacing across all components. | |||
| $kendo-letter-spacing-tightest | Number | -.15px | -0.15px |
Description
The tightest letter spacing across all components. | |||
| $kendo-letter-spacing-tighter | Number | -.10px | -0.1px |
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 | .5px | 0.5px |
Description
Wide letter spacing across all components. | |||
| $kendo-letter-spacing-wider | Number | .10px | 0.1px |
Description
Slightly wider than the wide letter spacing across all components. | |||
| $kendo-letter-spacing-widest | Number | .15px | 0.15px |
Description
The widest letter spacing 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-sizes | Map | k-map-merge( $_default-font-sizes, $kendo-font-sizes ) | (xxs: 0.5rem, xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem) |
Description
The font sizes map | |||
| $kendo-line-heights | Map | k-map-merge( $_default-line-heights, $kendo-line-heights ) | (xs: 1, sm: 1.25, md: 1.5, lg: 1.75) |
Description
The line heights map | |||
| $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 | |||
| $kendo-letter-spacings | Map | k-map-merge( $_default-letter-spacings, $kendo-letter-spacings ) | (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px) |
Description
The letter spacings map | |||
| $kendo-font-families | Map | k-map-merge( $_default-font-families, $kendo-font-families ) | (sans: (Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans), serif: ("Times New Roman", Georgia, Garamond, Palatino, Baskerville), 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"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace)) |
Description
The font families map | |||
