API
Typography
Font, text layout, and text color.
Reach for a role first (data-ui="text-lg", native headings), then override one property with a utility. --font-weight takes a number or the role weights strong, heading, and body; standard names such as medium are not CSS, so write 500. Text color is --text, with state tiers.
Reference
| Utility | Writes | Value | Tiers | Notes |
|---|---|---|---|---|
--font-family | font-family | any CSS value | breakpoints | |
--font-size | font-size | any CSS value | breakpoints | --before-font-size / --after-font-size |
--font-weight | font-weight | number, or strong / heading / body (the role weight tokens) | breakpoints | Keywords: heading, body, strong; --before-font-weight / --after-font-weight |
--font-style | font-style | keyword | breakpoints | |
--leading | line-height | any CSS value | breakpoints | |
--tracking | letter-spacing | any CSS value | breakpoints | |
--line-clamp | -webkit-line-clamp | line count (1 truncates) | breakpoints | |
--text-align | text-align | keyword | breakpoints | works tier-only |
--text-decoration | text-decoration-line | any CSS value | breakpoints, states | works tier-only |
--text-transform | text-transform | keyword | breakpoints | |
--text-wrap | text-wrap | keyword | breakpoints | works tier-only |
--whitespace | white-space | keyword | breakpoints | |
--text | color | any CSS value | breakpoints, states | --before-text / --after-text |