Text is a utility to apply typography styles responsively based on the viewport size.
Automatically handles its font-size based on the viewport size
Supports inehriting color from its parent elements
Supports rendering as custom HTML tags


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.

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.

Application typefaces

strong, 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.


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


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.


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
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element