Typography is essential for effective communication, establishing visual hierarchy, conveying brand identity, evoking emotions, ensuring accessibility, enhancing visual appeal, maintaining consistency, and adapting to different devices. By paying attention to typography, you can greatly improve the overall user experience and the impact of your design or content.
Chakra-UI includes Typography components such as Heading, Highlight, and Text, which allow you to style and format text in your applications with ease.
In addition to the common style props, all Typography components in Chakra-UI have access to the theme-based configuration for typography. This allows you to define a consistent typography style across your application by modifying the theme object.
These are Chakra's Typography components:
Heading 🔗: The Heading component is used to display headings and titles in your application. It supports different levels, from h1 to h6, using the as prop. You can customize the font size, color, and other styles using the Chakra UI's style props like fontSize, color, and fontWeight. The Heading component automatically adjusts its font size and margins based on the heading level for proper semantic markup.
Highlight 🔗: The Highlight component is used to highlight a specific part of a text. It allows you to apply a highlight color to a portion of text content using the highlightColor prop. You can further style the highlighted text using Chakra UI style props. The Highlight component is useful for emphasizing important or relevant information.
Text 🔗: The Text component is a versatile component used for displaying general text content. It provides a range of styling options such as font size, color, weight, alignment, and more. You can use the fontSize, color, fontWeight, textAlign, and other style props to customize the appearance of the text. The Text component also supports truncation and text overflow handling using the isTruncated prop.