Typography
Text styles as single utilities that set family, size, weight, line height and tracking.
Each text style sets family, size, weight, line height and tracking together. Line heights follow data-fontlineheight, so Thai text gets the taller Thai values.
Render text with the Typography component, and use typography(variant) for the class on an element you render yourself. Both take the style name without the typography-content- prefix.
<Typography variant="body-regular">Body text</Typography>
<textarea className={typography('body-regular')} />The catalog below lists each style by its class name, which works anywhere a class does.
<p className="typography-content-body-regular">Body text</p>typography-content-body-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-body-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-body-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-body-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-code-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-code-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-code-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-code-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-1-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-1-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-1-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-1-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-2-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-2-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-2-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-2-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-3-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-3-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-3-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-display-3-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h1-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h1-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h1-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h1-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h2-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h2-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h2-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h2-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h3-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h3-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h3-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h3-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h4-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h4-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h4-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h4-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h5-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h5-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h5-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h5-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h6-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h6-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h6-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-h6-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-label-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-label-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-label-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-label-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-large-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-large-mediumThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-large-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-large-semi-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-supporting-boldThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
typography-content-supporting-regularThe quick brown fox jumps over the lazy dog. ระบบออกแบบอักษร
To compare font sizes and English or Thai line heights, open the Playground.