Font Size

Same size as headings (h1-h6), without margins, line height, etc.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

.small text

                
                  <p class="fs-1">.fs-1 text</p>
                  <p class="fs-2">.fs-2 text</p>
                  <p class="fs-3">.fs-3 text</p>
                  <p class="fs-4">.fs-4 text</p>
                  <p class="fs-5">.fs-5 text</p>
                  <p class="fs-6">.fs-6 text</p>
                  <p class="small">.small text</p>
                
              

.fw-lighter Lighter weight text (relative to the parent element).

.fw-light Light weight text.

.fw-normal Normal weight text.

.fw-medium Medium weight text.

.fw-bold Bold text.

.fw-bolder Bolder weight text (relative to the parent element).

.fst-italic Italic text.

.fst-normal Text with normal font style

.font-monospace This is in monospace

                
                  <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
                  <p class="fw-light">Light weight text.</p>
                  <p class="fw-normal">Normal weight text.</p>
                  <p class="fw-medium">Medium weight text.</p>
                  <p class="fw-bold">Bold text.</p>
                  <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>

                  <p class="fst-italic">Italic text.</p>
                  <p><i class="fst-normal">Text with normal font style</i></p>
                  <p class="font-monospace">This is in monospace</p>
                
              

.lh-1 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

.lh-sm Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

.lh-base Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

.lh-lg Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

                
                  <p class="lh-1">...</p>
                  <p class="lh-sm">...</p>
                  <p class="lh-base">...</p>
                  <p class="lh-lg">...</p>
                  
                  <p class="lh-inherit">...</p>
                  <p class="lh-0">...</p> (special requirement)