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.
| Style | Weight | Size | Line Height | Variable |
|---|---|---|---|---|
| Display 1 | Light | 84px | 100.8px | $kendo-display1 |
| Display 2 | Light | 70px | 84px | $kendo-display2 |
| Display 3 | Light | 56px | 67.2px | $kendo-display3 |
| Display 4 | Light | 42px | 50.4px | $kendo-display4 |
| Heading 1 | Regular | 42px | 50.4px | $kendo-h1 |
| Heading 2 | Regular | 34px | 46px | $kendo-h2 |
| Heading 3 | Bold | 28px | 42px | $kendo-h3 |
| Heading 4 | Bold | 22px | 32px | $kendo-h4 |
| Heading 5 | Bold | 16px | 26px | $kendo-h5 |
| Heading 6 | Bold | 14px | 20px | $kendo-h6 |
| Base Text | Regular | 14px | 20px | $kendo-body-text |
| Extra Small | Regular | 10px | 20px | $kendo-extra-small |
| Small | Regular | 12px | 20px | $kendo-small |
| Large | Regular | 16px | 24px | $kendo-large |
| Extra Large | Regular | 20px | 20px | $kendo-extra-large |
Typefaces
Telerik and Kendo UI components inherit the system font family and also support the following set of alternative font families:
| Name | Value | Description |
|---|---|---|
$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" | Font families for text input |
$kendo-font-family | inherit | The font family across all components |
To style code snippets in your project, it is recommended to use the following monospace font families:
| Name | Value | Description |
|---|---|---|
$kendo-font-family-monospace | "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Font 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.
