Text
Text is a utility to apply typography styles responsively based on the viewport size.

Usage

Arcade type scale includes a range of styles that support both expressive and application font sizes. Each style is represented by a combination of font-size, line-height, font-weight and font-family values. All these values are coming from the design tokens defined in the theme.

Display 1
Display 2
Display 3
Featured 1
Featured 2
Featured 3
Title 1
Title 2
Title 3
Body strong 1
Body strong 2
Body medium 1
Body medium 2
Body 1
Body 2
Caption 1
Caption

Note: It's better to read this part of documentation from desktop screens and try resizing the screen to see how typography behaves for every viewport size

Expressive typefaces

Display from 1 to 3 are the biggest typefaces and are mostly for using them for marketing materials or landing pages, rather then applications UI. They can be paired together with subtitles of the same variant number.

Line 1
Line 2

Application typefaces

body-strong, body-medium and body variants of the Text component are used for displaying long-form writing with the chosen font-weight. Each of them comes in ranges 1-2 which is related the size of the typeface, where 1 is bigger than 2. Default typeface is body2.

These smaller typefaces can also be used as subtitles for title 4-6 typefaces.

Line 1
Line 2

Colors

Text component comes with a color property that lets you use design token values.

Neutral
Neutral faded
Safe
Danger
Primary
Disabled

Accessibility

Text component can be rendered as any html tag using as property. This helps with assigning specific element roles to text elements, like rendering them as headings or paragraphs.

Colors used by the color property are only picking values with foreground roles to achieve 4.5:1 contrast ratio with backgrounds.

Properties

NameTypeDefaultRequiredComment
variantdisplay1, display2, display3, title1, title2, title3, featured1, featured2, featured3, strong1, strong2, medium1, medium2, body1, body2, caption1, caption2-falseTypeface name
colorneutral-faded, positive, critical, primary, disabled-false
asstring-falseTag used for rendering
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element