Body text

The font family used is Poppins and the default text color used on white and grey areas is #2d2d2d instead of absolute black.

The body text should be placed into a <p> element and have one of the classes shown below, to define its font size.

<p class="txt-xxl">P-XXL DimC CSS paragraph extra lrage</p>
<p class="txt-xl">P-XL DimC CSS paragraph extra extra lrage</p>
<p class="txt-l">P-L DimC CSS paragraph large</p>
<p class="txt-m">P-M DimC CSS paragraph medium</p>
<p class="txt-s">P-S DimC CSS paragraph small</p>
<p class="txt-xs">P-XS DimC CSS paragraph extra small</p>
<p class="txt-xxs">P-XXS DimC CSS paragraph extra extra small</p>

Headings

Headings should be placed into the respective heading html tag, as shown below.

<h1>H1 DimC CSS heading</h1>
<h2>H2 DimC CSS heading</h2>
<h3>H3 DimC CSS heading</h3>
<h4>H4 DimC CSS heading</h4>
<h5>H5 DimC CSS heading</h5>
<h6>H6 DimC CSS heading</h6>

Text properties

For further text adjustments (font weight, text alignment, writing direction), the following classes can be used.

<p class="txt-m txt-light">Here is some light text</p>
<p class="txt-m txt-semibold">Here is some semi-bold text</p>
<p class="txt-m txt-bold">Here is some bold text</p>
<p class="txt-m ta-l">This text is left aligned</p>
<p class="txt-m ta-r">This text is right aligned</p>
<p class="txt-m ta-c">This text is center aligned</p>
<p class="txt-m txt-vertical">This text is vertical</p>