Chakra-UI

I♥️Components

Typography

|

Chakra Docs

|

⦾ Typography in Chakra UI is highly customizable and flexible. Here's a rundown of the main features:
  • Typography Components: These are covered in much more detail in the components-typography section, but it is important to note that Chakra UI provides a variety of components for common typographical elements, including Heading, Text, and Code.
  • Responsive Font Sizes: Like many other props in Chakra UI, fontSize can take an array or object to specify different values at different breakpoints.
  • Font Weights: Chakra UI provides props for controlling font weight: fontWeight.
  • Text Colors: Text color can be controlled using the color prop, as we've seen in examples on color.
  • Line Heights: Line height can be controlled using the lineHeight prop.
  • Text Alignment and Decoration: Text alignment can be controlled with the textAlign prop, and decoration (like underlining) can be controlled with the textDecoration prop.
  • Theme Customization: Chakra UI's theme object allows you to define default styles for typography components, customize the font sizes, weights, and line heights available, and more. You can extend the theme to include custom fonts as well.

To import the Text component:

Examples

I'm a large heading

I'm some medium-sized text

I'm a code snippet

I'm some medium-sized text

I'm responsive text

I'm bold text

I'm text with wide letter spacing

I'm text with tall line height

I'm centered, underlined text

fontSize=32

fontSize="1.5em"

fontSize="md"

textTransform="uppercase"

textTransform="capitalize"

textTransform="lowercase"

textDecoration="underline"

textDecoration="overline"

textDecoration="line-through"

Did you know?

Creative Idea No. 1

Custom Font Family: Chakra UI allows you to easily set a custom font family for your text. You can define your font family in the Chakra UI theme or use the fontFamily prop directly on the Text component.

This text uses a custom font family.

Code

Creative Idea No. 2

Text Alignment: Chakra UI provides the textAlign prop to control the alignment of text within a component.

This text is centered within its container.

Code

Creative Idea No. 3

Chakra UI provides the lineHeight prop to control the spacing between lines of text. This allows you to adjust the vertical rhythm and improve the readability of your text. In this example, the Text component applies the lineHeight="1.5" property, which increases the line height to 1.5 times the font size. This helps create more breathing space between lines, enhancing readability.

This text has an increased line height for improved readability.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.