Typography
Name
Value
Description
Font Family
Multiple Inc.
--font-family
Font Size
Multiple Inc.
--font-size-peta
Multiple Inc.
--font-size-tera
Multiple Inc.
--font-size-giga
Multiple Inc.
--font-size-mega
Multiple Inc.
--font-size-kilo
Multiple Inc.
--font-size-milli
Font Weight
Multiple Inc.
--font-weight-light
Multiple Inc.
--font-weight-book
Multiple Inc.
--font-weight-semibold
Line Height
Multiple
Inc.
--line-height-tiny
Multiple
Inc.
--line-height-small
Multiple
Inc.
--line-height-medium
Multiple
Inc.
--line-height-tall
Multiple
Inc.
--line-height-extra-tall
Letter Spacing
Multiple Inc.
--letter-spacing-none
Multiple Inc.
--letter-spacing-kilo
Multiple Inc.
--letter-spacing-mega
Classes
Desktop Typography
Lorem ipsum dolor sit amet
.header1-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header1-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header1-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-light
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-book
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-semibold
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sitamet
.sup
font-family: var(--font-SuisseIntl);
font-size: .6em;
font-family: var(--font-SuisseIntl);
font-size: .6em;
Lorem ipsum dolor sit amet
.link
text-decoration: underline;
text-decoration: underline;
- Lorem ipsum dolor sit amet
.bullet-list-item
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-peta);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-peta);
- Lorem ipsum dolor sit amet
.number-list-item
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-peta);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-peta);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-peta);
Mobile Typography
Lorem ipsum dolor sit amet
.header1-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header1-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header1-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-tera);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tiny);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header2-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-giga);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-light);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-book);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.header3-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-mega);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-small);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-light);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-book);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-l-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-kilo);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-medium);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-m-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-milli);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-light-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-light);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-book-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-book);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Lorem ipsum dolor sit amet
.paragraph-s-semibold-mobile
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
font-family: var(--font-SuisseIntl);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tall);
letter-spacing: var(--letter-spacing-kilo);
Examples
Directions:
- Select the desired class from the second dropdown menu.
- Type your text and press Enter to create a new line.
- On a new line, ensure both dropdown menus revert to 'Paragraph'. If not, unselect the previously chosen class before typing or selecting a new class.
- Select the next typestyle class you want to use.
- If the new class appears the same as the previous one, both classes may be assigned to the same text element.
- Click the '< >' button in the menu to open the source code modal.
- Locate the targeted text element and remove all classes except the desired one.