Imply consistent logic with visual structures and enhance readability through standards for typefaces and font properties.

Overview of Typography

The Telerik and Kendo UI Design System provides a set of steps with predefined values for creating harmonious and yet logical usage inside of and between the components.

Note that along with typography, spacing is the other key element when building a component as spacing controls the negative area between the elements. For example, the height of the Button component is defined by the line height of its label and the vertical paddings.

StyleWeightSizeLine HeightVariable
Display 1Light84px100.8px$kendo-display1
Display 2Light70px84px$kendo-display2
Display 3Light56px67.2px$kendo-display3
Display 4Light42px50.4px$kendo-display4
Heading 1Regular42px50.4px$kendo-h1
Heading 2Regular34px46px$kendo-h2
Heading 3Bold28px42px$kendo-h3
Heading 4Bold22px32px$kendo-h4
Heading 5Bold16px26px$kendo-h5
Heading 6Bold14px20px$kendo-h6
Base TextRegular14px20px$kendo-body-text
Extra SmallRegular10px20px$kendo-extra-small
Extra LargeRegular20px20px$kendo-extra-large


Telerik and Kendo UI components inherit the system font family and also support the following set of alternative font families:

$kendo-font-family-sans-serifsystem-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"Font families for text input
$kendo-font-familyinheritThe font family across all components

To style code snippets in your project, it is recommended to use the following monospace font families:

$kendo-font-family-monospace"SFMono-Regular", "Menlo", "Monaco", "Consolas", "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceFont families for monospaced text input—used for styling the code

Type Scale

To achieve smooth and appealing transition between text styles, the Telerik and Kendo UI typography uses a fluid type scale based on the default font size.

Commonly, to render their content, the components use the Base text style with its ratio of 1,42. In this way, the controls have a height value that is an even number. However, the ratio increases in smaller sizes and decreases in larger ones, which creates not only a compact look-and-feel for the components, but also a well-defined hierarchy between their text elements.

Line Height

Line height is crucial both for the visual differentiation and for the height of the component.

The height is defined by the top and bottom paddings (which are usually equal) and the line height of the typography style altogether. For example, small-sized buttons have smaller top and bottom paddings, and also use smaller typography styles with ratios that are different from the default ones in the medium size. 

Font Weight

Depending on the usage of the typeface, the font weight also varies.

For display styles that are not used inside the components, the font weight is light (300). When it comes to the typography styles that are used inside the components, the preferable font weight is regular (400), because it provides optimal visual readability.

As the distinction between the body text and any smaller heading styles must be clear, they use bold font weight.