Typography

Typography is a fundamental need of web development. I have defined the font-size, font-family, font-weight and spacing for the design system employed throughout the component library.

Font-Family

Font Famliy used in the documentation library for font-size is mentioned in the table below.

Font-Size

Font classes used in the documentation library for font-size are mentioned in the table below.

<span class="xl primary">XL-text Font-Size: 48px</span>
<span class="lg primary">LG-text Font-Size: 32px</span>
<span class="md primary">MD-text Font-Size: 24px</span>
<span class="sm primary">SM-text Font-Size: 16px</span>
<span class="xs primary">XS-text Font-Size: 8px</span>

Font-Weight

Font classes used in the documentation library for font weight are mentioned in the table below.

<span class="md lt primary">LT-text Font-Weight: 300</span>
<span class="md reg primary">REG-text Font-Weight: 400</span>
<span class="md sb primary">SB-text Font-Weight: 600</span>
<span class="md bd primary">BD-text Font-Weight: 800</span>
<span class="md bl primary">BL-text Font-Weight: 900</span>

Spacing

Padding spaces used in the documentation library are mentioned in the table below.

<span class="xs-s pd-eg"></span>
<span class="sm-s pd-eg"></span>
<span class="md-s pd-eg"></span>
<span class="lg-s pd-eg"></span>
<span class="xl-s pd-eg"></span>
<span class="xxl-s pd-eg"></span>

Text Align

Classes used text alignment in the documentation library are mentioned in the table below.

Flex Container classes

Use these flex classes to automatically align content inside a container. Refer the table for details.