• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact Typography Overview

The Typography is a reusable component that helps presenting the content in a React application. It could trim down a lot of time as the application grows.


The key benefits of the Typography component are:

  • Efficient—Using the built-in design system, you no longer have to spend time thinking about sizes and styles to unify the look of your application. It provides a set of types and sizes that works well together.
  • Consistent—Having consistency in your application is important. The design system draws a pattern for a consistent look and feel that will help users find information faster and with less confusion.
  • Maintainable—Let's say that your designers decide to change the font size if the all <h2> elements. You have to search for every place that this element is used, go to every CSS file, and try to find where the font-size property is. Instead, if you have reusable components you just need to change it in one place.
  • Avoids duplicated code—Using reusable components helps you avoid copying your code and styles in many different places.

React Typography Demo Preview

The following example demonstrates the Typography variants and styles in action.

Example
View Source
Change Theme:

The Typography is part of the KendoReact Common Utilities component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the Typography and the rest of the Common Utilities, see the Getting Started with the KendoReact Common Utilities guide.

Key Features

  • Appearance—You can quickly add additional style to the Typography by choosing from the predefined styling options.