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