Typography

Typography ensures consistent, readable text across all interfaces and improves clarity and user engagement on all devices.

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.

Typography styles vary by theme and swatch. To explore these specifics, click the link for the respective theme: Default, Bootstrap, Material, Fluent and Classic.

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:

Display 1Display 2Display 3Display 4

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:

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

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:

Paragraph

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:

Code

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:

KeyValue
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: