Overview of Typography
Typography in a design system encompasses the selection and application of typefaces, sizes, and styles to ensure clear communication and visual consistency across a user interface. It defines rules for text hierarchy, which helps organize information effectively and guides the user’s attention through various elements of the interface. Properly managed typography enhances readability and accessibility by optimizing line spacing, letter spacing, and alignment. These guidelines are crucial for maintaining brand identity and ensuring that text is functional and appealing across all devices and platforms.
Typography Styles
The Telerik and Kendo UI typography system includes four style sets with predefined values designed to create a harmonious and logical appearance, whether used within components or externally on the web page.
Telerik and Kendo UI components inherit the system font family and also support the following set of alternative font families:
Display Styles
Display styles are reserved for the largest text on the screen and are not used within components. They are ideal for highlighting short, significant text or numerals that require emphasis.
Below are the display styles of the Telerik and Kendo UI Default theme:
Heading Styles
Heading styles are reserved for titles and subtitles on a web page and are not used within components. They provide clear structure and hierarchy to the content.
Below are the heading styles of the Telerik and Kendo UI Default theme:
Paragraph Styles
Paragraph style is used within components to determine their size and overall aesthetic, ensuring a cohesive and visually appealing interface.
Below is the paragraph style of the Telerik and Kendo UI Default theme:
Code Style
Code style is designed for code snippets to improve readability and clarity.
Below is the code style of the Telerik and Kendo UI Default theme:
Typography Style Settings
Telerik and Kendo UI typography styles are determined by five key variables: font size, font weight, line height, font family, and letter spacing. These essential settings refine text appearance, optimize readability and enhance aesthetic appeal across digital interfaces:
- Font Size—Determines the size of the text, impacting legibility and visual hierarchy.
- Font Weight—Adjusts the thickness of characters, from light to bold, to emphasize or differentiate textual elements.
- Line Height—Sets the vertical spacing between lines of text, crucial for readability, text flow and component height.
- Font Family—Specifies the typeface used, influencing the tone and readability of the text.
- Letter Spacing—Adjusts the space between characters, affecting clarity and readability, especially at smaller sizes.
Typefaces
Telerik and Kendo UI components inherit the system font family and also support the following set of alternative font families:
| Key | Value |
|---|---|
| Variable: 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 | |
Theme-Specific Variables
For specific information about the typography system, refer to the theme-specific variables list:
