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 1Display 2Display 3Featured 1Featured 2Featured 3Title 1Title 2Title 3Body strong 1Body strong 2Body medium 1Body medium 2Body 1Body 2
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
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 1Line 2
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 1Line 2
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.
|variant||display1, display2, display3, title1, title2, title3, featured1, featured2, featured3, strong1, strong2, medium1, medium2, body1, body2, caption1, caption2||-||false||Typeface name|
|color||neutral-faded, positive, critical, primary, disabled||-||false|
|as||string||-||false||Tag used for rendering|
|className||string||-||false||className for the root element|
|attributes||object||-||false||Attributes for the root element|