type
Each type of text serves a unique purpose, and when used in concert, they form a symphony of information, guiding the user through the labyrinth of digital interfaces. Their precise and calculated placement, size, and style, hold the power to convey meaning, evoke emotions, and inspire action.
display
The display text type is the largest of them all. It is used for impactful text that requires a larger amount of screenspace to convey an extremely important message. It is an opportunity to create visual impact and set the tone for the overall design. I think things like brand mottos, hot takes, or one-sentence announcement work great for a display type. It represents the designer's voice and intention, guiding the user's experience.
- Avoid this text type on devices with smaller screens.
[JSX] Component
<Text type="display">Alice’s Adventures in Wonderland</Text>[CSS] Style
span.display {
font-size: 3.8rem;
line-height: 4rem;
font-weight: 600;
}- Example with visible margins
title
A title is a text type that is used in the largest true heading and functions as a page title. It serves as a succinct description of the content and provides context to the user. It is an opportunity to create structure within the design and be representative of the content's identity and purpose.
- There must only be one title per page; anything else must be able to fit on the heading and subheading text types.
- A display type must not be used as a "larger title".
[JSX] Component
<Text type="title">Alice’s Adventures in Wonderland</Text>[CSS] Style
span.title {
font-size: 2.8rem;
line-height: 3rem;
font-weight: 600;
}- Example with visible margins
heading
A heading type is one intended to divide the content into manageable sections and provide structure to a page. It guides the user's understanding of the content. You can have more than one heading because they are meant to identify multiple parts of a page.
[JSX] Component
<Text type="heading">Chapter I: Down the Rabbit-Hole</Text>[CSS] Style
span.heading {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
}- Example with visible margins
subheading
The subheading type is used to further divide the content into smaller sections and provide additional context. It can refine the user's understanding of the content and give it more clarity. A subheading has the base color like the paragraph does but is significantly larger and bold like the other heading types.
[JSX] Component
<Text type="subheading">Chapter I: Down the Rabbit-Hole</Text>[CSS] Style
span.subheading {
font-size: 1.8rem;
line-height: 2.1rem;
font-weight: 400;
}- Example with visible margins
paragraph
A paragraph is the default text type of the component, but it can be explicitly stated even though is a bit redundant. Its size and style are designed to be easily readable and provide a comfortable reading experience. By design, it has a large line-height, this so inline code blocks won't create a larger row of text when existing, different from the rest of the paragraph.
[JSX] Component
<Text>By Lewis Caroll</Text>
<Text type="paragraph">By Lewis Caroll</Text>[CSS] Style
span.paragraph {
font-size: 1.8rem;
line-height: 2.1rem;
font-weight: 400;
}- Example with visible margins
small
The small type is useful for text that must not take up as much screen space as a paragraph would. But one must be wary of this, if you want to "hide" that information, why even put it there in the first place? I would advise replacing this with other ways of conveying the same information.
There are times when there's an obligation for it to be visible as text, like the Terms and Conditions or Privacy Policy links. Even though, the small text type must rarely be used and must avoid using extensive text and limit its content to a few words only.
[JSX] Component
<Text type="small">THE MILLENNIUM FULCRUM EDITION 3.0</Text>[CSS] Style
span.small {
font-size: 1.8rem;
line-height: 2.1rem;
font-weight: 400;
}- Example with visible margins
Component Props
noMargins
This property is used for only removing the margins from any text type. This is useful when the margins add too much white space in certain unique layouts (e.g. A text component being a child of a CSS grid with a fixed gap). Not to be confused with the compressed component property that reduces the element's line-height.
[JSX] Component
<Text type="subheading" noMargins>Chapter I: Down the Rabbit-Hole</Text>- Example with visible margins
inheritColor
This property will remove any color setting on the text component and instead, it will add color: inherit; to its styles. This way one could assign a text color from a higher element and this text will just inherit it.
[JSX] Component
<Text inheritColor>Chapter I: Down the Rabbit-Hole</Text>compact
The compact property is a boolean value that is used to lower the text's height. It reduces its line-height as well as its margins.
[JSX] Component
<Text compact>Alice was beginning to get very tired of sitting...</Text>- Comparison of default and compact texts
single
The art of clamping a lengthy text into a single line is a delicate dance between brevity and meaning. With an emphasis on the first few words, the essence of the text must be captured, like the first brushstrokes of a masterpiece. The ellipsis at the end, a simple dot-dot-dot, whispers of more to come, hinting at the depths of thought beyond the constraints of the viewport. The final result is a single line of text.
[JSX] Component
<Text single>Alice was beginning to get very tired...</Text>