Customizing Typography

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-font-size	Number	`$font-size-base`	`1rem`
Description Base font size across all components.
$kendo-font-family-sans-serif	List	`$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 Font family for text.
$kendo-font-family-monospace	List	`$font-family-monospace`	`SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
Description Font family for monospaced text. Used for styling the code.
$kendo-font-family	List	`$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 Font family across all components.
$kendo-line-height	Number	`$line-height-base`	`1.5`
Description Line height used along with $kendo-font-size.

Suggested Links