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
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.
| Key | CSS Variable | Value | Example |
|---|---|---|---|
| xxs | --kendo-font-size-xxs | 0.5rem | Lorem ipsum |
| xs | --kendo-font-size-xs | 0.625rem | Lorem ipsum |
| sm | --kendo-font-size-sm | 0.75rem | Lorem ipsum |
| md | --kendo-font-size-md | 0.875rem | Lorem ipsum |
| lg | --kendo-font-size-lg | 1rem | Lorem ipsum |
| xl | --kendo-font-size-xl | 1.25rem | Lorem ipsum |
Font Weight
Adjusts the thickness of characters, from light to bold, to emphasize or differentiate textual elements.
| Key | CSS Variable | Value | Example |
|---|---|---|---|
| thin | --kendo-font-weight-thin | 100 | Lorem ipsum |
| extra-light | --kendo-font-weight-extra-light | 200 | Lorem ipsum |
| light | --kendo-font-weight-light | 300 | Lorem ipsum |
| normal | --kendo-font-weight-normal | 400 | Lorem ipsum |
| medium | --kendo-font-weight-medium | 500 | Lorem ipsum |
| semibold | --kendo-font-weight-semibold | 600 | Lorem ipsum |
| bold | --kendo-font-weight-bold | 700 | Lorem ipsum |
Line Height
Sets the vertical spacing between lines of text, crucial for readability, text flow and component height.
| Key | CSS Variable | Value | Example |
|---|---|---|---|
| xs | --kendo-line-height-xs | 1 | Lorem ipsum |
| sm | --kendo-line-height-sm | 1.25 | Lorem ipsum |
| md | --kendo-line-height-md | 1.43 | Lorem ipsum |
| lg | --kendo-line-height-lg | 1.5 | Lorem ipsum |
Font Family
Specifies the typeface used, influencing the tone and readability of the text.
| Key | CSS Variable | Value | Example |
|---|---|---|---|
| sans | --kendo-font-family-sans | Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans | Lorem ipsum |
| serif | --kendo-font-family-serif | "Times New Roman", Georgia, Garamond, Palatino, Baskerville | Lorem ipsum |
| sans-serif | --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" | Lorem ipsum |
| monospace | --kendo-font-family-monospace | SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Lorem ipsum |
Letter Spacing
Adjusts the space between characters, affecting clarity and readability, especially at smaller sizes.
| Key | CSS Variable | Value | Example |
|---|---|---|---|
| tightest | --kendo-letter-spacing-tightest | -0.15px | Lorem ipsum |
| tighter | --kendo-letter-spacing-tighter | -0.1px | Lorem ipsum |
| tight | --kendo-letter-spacing-tight | -0.5px | Lorem ipsum |
| normal | --kendo-letter-spacing-normal | 0px | Lorem ipsum |
| wide | --kendo-letter-spacing-wide | 0.5px | Lorem ipsum |
| wider | --kendo-letter-spacing-wider | 0.1px | Lorem ipsum |
| widest | --kendo-letter-spacing-widest | 0.15px | Lorem ipsum |
Theme-Specific Variables
For specific information about the typography system, refer to the theme-specific variables list:
