Getting Started

Native Components

Wrapper Components

Common Features

Project Setup

Changelog

Styling & Themes / Bootstrap Theme / Customizing Typography /

New to Kendo UI for Vue? Start a free 30-day trial

Customizing Typography

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$enable-typography	Bool	`false`	`false`
Description Global typography styles for the Kendo Bootstrap theme.
$font-size	Number	`$font-size-base`	`1rem`
Description Base font size across all components.
$font-family	List	`$font-family-sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description Font family across all components.
$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.
$line-height	Number	`$line-height-base`	`1.5`
Description Line height used along with $font-size.

Suggested Links

Customizing Treeview

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Telerik and Kendo UI are part of Progress product portfolio. Progress is the leading provider of application development and digital experience technologies.

Copyright © 2022, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved. Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.

DO NOT SELL MY PERSONAL INFORMATION