Typography
Modular typographic scale for you apps and websites.
Install
Install New UI Typography from your terminal via npm.
npm i -D @new-ui/typography
Usage
// Place this at the top of your SCSS/CSS file
@import "@new-ui/typography";
Tokens
| Heading (Desktop) | Heading (Mobile) | Role |
|---|---|---|
--desktop-heading-01 |
--mobile-heading-01 |
Heading 01 |
--desktop-heading-02 |
--mobile-heading-02 |
Heading 02 |
--desktop-heading-03 |
--mobile-heading-03 |
Heading 03 |
--desktop-heading-04 |
--mobile-heading-04 |
Heading 04 |
--desktop-heading-05 |
--mobile-heading-05 |
Heading 05 |
--desktop-heading-06 |
--mobile-heading-06 |
Heading 06 |
| Body (Desktop) | Body (Mobile) | Role |
|---|---|---|
--desktop-body-xl |
--mobile-body-xl |
Body large |
--desktop-body |
--mobile-body |
Body copy |
--desktop-body-sm |
--mobile-body-sm |
Body small |
| Utility (Desktop) | Utility (Mobile) | Role |
|---|---|---|
--desktop-caption |
--mobile-caption |
Caption |
--desktop-helper-text |
--mobile-helper-text |
Helper text |
--desktop-code |
--mobile-code |
Code |
To set line height, simply add the prefix --lh to the font size variables. For instance, --desktop-body-xl becomes --lh-desktop-body-xl.