• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Typography Options

The Kendo UI for Angular Typography directive provides multiple options for styling UI elements. You can apply an appearance variant to the element, configure the font size and weight and the alignment and transformation of the text, and also change the theme color and control the margin.

Element Variants

The Typography provides default appearance classes for the <h1> to <h6> and <p> elements. You can set these by using the variant property.

Example
View Source
Change Theme:

Font Size

To set the font size of the element, use the fontSize property.

Example
View Source
Change Theme:

Font Weight

To set the font weight of the element, use the fontWeight property.

Example
View Source
Change Theme:

Text Alignment

To set the text alignment of the element, use the textAlign property.

Example
View Source
Change Theme:

Text Transformation

To set the text transformation of the element, use the textTransform property.

Example
View Source
Change Theme:

Theme Color

To set the color of the element, use the themeColor property.

Example
View Source
Change Theme:

Margin

To set the margin of the element or its side margins, use the margin property.

Example
View Source
Change Theme: