Typography

The majority of information presented in an interface comes in the form of text, so a well-defined typographic system helps to create clear hierarchies, organize information and guide users well within a product.

Heading#

Headings are used for rendering headlines, which uses Manrope as the typeface.

Manrope is our headings font used in contrast with Inter to add complexity and personality to a design. The typeface is a crossover of different types: it is semi-condensed, semi-rounded, semi-geometric, semi-din, semi-grotesque. It employs minimal stoke thickness variations and a semi-closed aperture.

Digits in Manrope font are perfect for interface design and numeric data, such as phone numbers, card numbers, watch faces, etc.

Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

Usage#

I'm a Heading

Editable Example

Changing font size#

To increase the size of the heading, you can use the fontSize or size props. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

Premium content experiences

Premium content experiences

Premium content experiences

Premium content experiences

Premium content experiences
Premium content experiences
Editable Example

Truncate heading#

Pass the isTruncated prop to render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

Basic text writing, including headings, body text, lists, and more.

Editable Example

Override style#

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled()

I'm overriding this heading

Editable Example

Composition#

Ready to become a content marketing rockstar?

Join our global talent network, expand your skills and develop your career.

Editable Example

Props#

The Heading composes the Box component, so you can pass all Box props.

NameTypeDefaultDescription
size2xl, xl , lg, md, sm, xsxlThe size of the heading.

Text#

Text is the used to render text and paragraphs within an interface. It renders a <p> tag by default and uses Inter as typepace.

Inter is our main font used mainly for body copy. It is a versatile font family, carefully crafted & designed with a focus on high legibility of small-to-medium sized text on computer screens.

Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Import#

Changing the font size#

To increase the font size of the text, you can pass the fontSize prop.

(6xl) Premium content experiences

(5xl) Premium content experiences

(4xl) Premium content experiences

(3xl) Premium content experiences

(2xl) Premium content experiences

(xl) Premium content experiences

(lg) Premium content experiences

(md) Premium content experiences

(sm) Premium content experiences

(xs) Premium content experiences

Editable Example

Truncate text#

Pass the isTruncated prop to render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Editable Example

Override style#

You can change the entire style of the text via props. For example, to change the font size, pass the fontSize prop. No need to write css or styled()

I'm using a custom font-size value for this text

Editable Example

Override the element#

To override the element that gets rendered, pass the as prop. Use Inspect Element to see the element that gets rendered in html.

Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough
Sample
sub
sup
Editable Example

Props#

Text composes the Box component, so you can pass all Box style props.

Edit this page

Made byChakraandRock Content