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

@use "@new-ui/typography";     // Use `@import` for CSS

Tokens

  Desktop Mobile Role
Heading --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-xl --mobile-body-xl Body large
  --desktop-body --mobile-body Body copy
  --desktop-body-sm --mobile-body-sm Body small
Utility --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.

Utility classes

  Class Description
Font weight .nu-u-fw-bold Bold weight (700)
  .nu-u-fw-semi-bold Semi-bold weight (500)
  .nu-u-fw-normal Normal weight (400)
Text transform .nu-u-text--uppercase Transform text to uppercase
  .nu-u-text--lowercase Transform text to lowercase
  .nu-u-text--capitalize Capitalize first letter of each word
Text decoration .nu-u-text--underline Underline text
Text alignment .nu-u-text--left Left align text
  .nu-u-text--right Right align text
  .nu-u-text--center Center align text
  .nu-u-text--justify Justify text
Fonts .nu-u-serif Apply serif font family
  .nu-u-sans-serif Apply sans-serif font family
  .nu-u-code Apply monospace font family
Components .nu-c-h1 through .nu-c-h6 Heading styles with responsive sizing
  .nu-c-fs-lead Lead paragraph style
  .nu-c-fs-normal Normal body text
  .nu-c-fs-small Small body text
  .nu-c-caption Caption style (uppercase, semi-bold)
  .nu-c-helper-text Helper text style
  .nu-c-code Code text style