Design System
v1.0
Typography

The typography system comprises of various text styles for use throughout the project. A Text Style is defined as a set of font properties such as font family, size, weight, line height, letter spacing, etc applied via individual global classes for each style.
‍
The font sizes for the text styles is based on the Type Scale system for establishing a clear visual hierarchy. The default font sizes are based on the ratio of 1.2 — Minor Third for desktop and tablets and scales down to 1.125 — Major Second for smaller devices. Various classes are provided to accommodate most common text styles required for the project.

  
  /* 
   * Class naming convention for text styles.
   */
  .text-{style name}

To modify an existing text style, simply change the font properties of the relevant class below prefixed with text-.

For creating a new text style, duplicate the zs-section below and replace (do not rename) the class name on element having text-{style name} class name with text-{new style name}. and subsequently modifying the applicable font properties.

Body Text

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo.

CSS Class Selector: text-base
Font Size: 1rem (16px)
Font Weight: 400
Line Height: 1.5
  
  /* 
   * Class naming convention for text styles.
   */
  .text-{style name}
Heading 1

Maecenas faucibus mollis interdum cras mattis. Aenean lacinia bibendum.

CSS Class Selector: text-h1
Font Size: 2.986rem (47.78px)
Font Weight: 700
Line Height: 1.2
Heading 2

Maecenas faucibus mollis interdum cras mattis. Aenean lacinia bibendum nulla sed.

CSS Class Selector: text-h2
Font Size: 2.488rem (39.81px)
Font Weight: 700
Line Height: 1.2
Heading 3

Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Aenean lacinia bibendum nulla sed.

CSS Class Selector: text-h3
Font Size: 2.074rem (33.18px)
Font Weight: 700
Line Height: 1.3
Heading 4

Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

CSS Class Selector: text-h4
Font Size: 1.728rem (27.65px)
Font Weight: 700
Line Height: 1.3
Heading 5
Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Maecenas sed diam eget risus varius. Nullam quis risus eget urna mollis ornare vel eu leo.
CSS Class Selector: text-h5
Font Size: 1.44rem (23.04px)
Font Weight: 400
Line Height: 1.5
Heading 6
Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Maecenas sed diam eget risus varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
CSS Class Selector: text-h6
Font Size: 1.2rem (19.20px)
Font Weight: 400
Line Height: 1.5
Menu Text

Maecenas faucibus

CSS Class Selector: text-menu
Font Size: 0.833rem (13.33px)
Font Weight: 400
Letter Spacing: 2px
Line Height: 1
Text Decoration: none
Text Transform: uppercase
Subtitle Text

Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Maecenas sed diam eget risus varius.

CSS Class Selector: text-subtitle
Font Size: 0.833rem (13.33px)
Font Weight: 700
Line Height: 1.5
Text Transform: uppercase
Small Text

Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Maecenas sed diam eget risus varius. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.

CSS Class Selector: text-small
Font Size: 0.833rem (13.33px)
Font Weight: 400
Line Height: 1.5
Fineprint Text

Maecenas faucibus mollis interdum cras mattis. Donec sed odio dui. Maecenas sed diam eget risus varius. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

CSS Class Selector: text-fineprint
Font Size: 0.694rem (11.11px)
Font Weight: 400
Line Height: 1.5
Anchor
Text Link
CSS HTML Selector: a
Color: #71717A
Font Size: inherit
Font Weight: inherit
Line Height: inherit
Text Decoration: underline
Active Anchor
Text Link
CSS Class Selector: a.w--current
Color: #27272A
Font Size: inherit
Font Weight: 700
Line Height: inherit
Text Decoration: inherit
➤