---
path: foundation/typography/overview
title: Overview
position: 1
seo_title: Overview of Typography
seo_description: Learn more about the typography approaches used for rendering
  the Telerik and Kendo UI components, and find out detailed information about
  the supported font families and their values, and the type scale, line height,
  and font weight of the typefaces.
---

## 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

<Notification data='{"type":"default","content":"Typography styles vary by theme and swatch. To explore these specifics, click the link for the respective theme: [Meridian](/themes/kendo-themes/meridian/), [Bootstrap](/themes/kendo-themes/bootstrap/), [Material](/themes/kendo-themes/material/), [Fluent](/themes/kendo-themes/fluent/), [Default](/themes/kendo-themes/default/) and [Classic](/themes/kendo-themes/classic/)."}'>Typography styles vary by theme and swatch. To explore these specifics, click the link for the respective theme: [Meridian](/themes/kendo-themes/meridian/), [Bootstrap](/themes/kendo-themes/bootstrap/), [Material](/themes/kendo-themes/material/), [Fluent](/themes/kendo-themes/fluent/), [Default](/themes/kendo-themes/default/) and [Classic](/themes/kendo-themes/classic/).</Notification>

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.

<TypographyList data='{"group":"typography","theme":"default","name":"kendo-font-sizes"}'></TypographyList>

#### Font Weight

Adjusts the thickness of characters, from light to bold, to emphasize or differentiate textual elements.

<TypographyList data='{"group":"typography","theme":"default","name":"kendo-font-weights"}'></TypographyList>

#### Line Height

Sets the vertical spacing between lines of text, crucial for readability, text flow and component height.

<TypographyList data='{"group":"typography","theme":"default","name":"kendo-line-heights"}'></TypographyList>

#### Font Family

Specifies the typeface used, influencing the tone and readability of the text.

<TypographyList data='{"group":"typography","theme":"default","name":"kendo-font-families"}'></TypographyList>

#### Letter Spacing

Adjusts the space between characters, affecting clarity and readability, especially at smaller sizes.

<TypographyList data='{"group":"typography","theme":"default","name":"kendo-letter-spacings"}'></TypographyList>

### Theme-Specific Variables

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

<Wrap>
<ExternalResource data='{"url":"/themes/kendo-themes/meridian/theme-variables/#typography-variables","title":"Typography for Meridian","description":"Discover the Telerik and Kendo UI Meridian theme typography variables list."}'>![Telerik and Kendo UI Meridian theme typography variables](/images/foundation-typography-icon-meridian.svg)</ExternalResource>

<ExternalResource data='{"url":"/themes/kendo-themes/bootstrap/theme-variables/#typography-variables","title":"Typography for Bootstrap","description":"Discover the Telerik and Kendo UI Bootstrap theme typography variables list."}'>![Telerik and Kendo UI Bootstrap theme typography variables](/images/foundation-typography-icon-bootstrap.svg)</ExternalResource>

<ExternalResource data='{"url":"/themes/kendo-themes/material/theme-variables/#typography-variables","title":"Typography for Material","description":"Discover the Telerik and Kendo UI Material theme typography variables list."}'>![Telerik and Kendo UI Material theme typography variables](/images/foundation-typography-icon-material.svg)</ExternalResource>

<ExternalResource data='{"url":"/themes/kendo-themes/fluent/theme-variables/#typography-variables","title":"Typography for Fluent","description":"Discover the Telerik and Kendo UI Fluent theme typography variables list."}'>![Telerik and Kendo UI Fluent theme typography variables](/images/foundation-typography-icon-fluent.svg)</ExternalResource>

<ExternalResource data='{"url":"/themes/kendo-themes/default/theme-variables/#typography-variables","title":"Typography for Default","description":"Discover the Telerik and Kendo UI Default theme typography variables list."}'>![Telerik and Kendo UI Default theme typography variables](/images/foundation-typography-icon-default.svg)</ExternalResource>

<ExternalResource data='{"url":"/themes/kendo-themes/classic/theme-variables/#typography-variables","title":"Typography for Classic","description":"Discover the Telerik and Kendo UI Classic theme typography variables list."}'>![Telerik and Kendo UI Classic theme typography variables](/images/foundation-typography-icon-classic.svg)</ExternalResource>

</Wrap>