Typography

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:

Theme-Specific Variables

For specific information about the typography system, refer to the theme-specific variables list:

Typography for DefaultDiscover the Telerik and Kendo UI Default theme typography variables list.

Typography for BootstrapDiscover the Telerik and Kendo UI Bootstrap theme typography variables list.

Typography for MaterialDiscover the Telerik and Kendo UI Material theme typography variables list.

Typography for FluentDiscover the Telerik and Kendo UI Fluent theme typography variables list.

Typography for ClassicDiscover the Telerik and Kendo UI Classic theme typography variables list.