Typography

Font Family

We primarily use serif and sans-serif fonts for rendering text content. However, we can use other fonts when needed.

.ft-sans-serif

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

.ft-serif

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

.ft-mono

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

.ft-fantasy

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

.ft-cursive

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

Example Code

  <div class="ft-sans-serif">
    <strong>.ft-sans-serif</strong>
    <p class="ft-sans-serif">
    The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?
    </p>
  </div>

  <div class="ft-serif">
    <strong>.ft-serif</strong>
    <p class="ft-serif">
    The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?
    </p>
  </div>

  <div class="ft-mono">
    <strong>.ft-mono</strong>
    <p>
    The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?
    </p>
  </div>

  <div class="ft-fantasy">
    <strong>.ft-fantasy</strong>
    <p class="ft-fantasy">
    The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?
    </p>
  </div>

  <div>
    <strong>.ft-cursive</strong>
    <p class="ft-cursive">
    The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?
    </p>
  </div>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example Code

  <p style="width: 500px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Example Code

  <div>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </div>

Header Group

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example Code

  <hgroup>
    <h2>Header Group</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </hgroup>

Text Styling

Bold Text

Italic Text

Small Text

~~Strike Text~~

Underline Text

Mark Text

Code Text

Shall I compare thee to a summer's day?
Thou art more lovely and more temperate.

Example Code

  <div>
    <div><strong>Bold Text</strong></div>
    <div> <i>Italic Text</i> </div>
    <div> <small>Small Text</small> </div>
    <div> <strike>Strike Text</strike> </div>
    <div> <u>Underline Text</u> </div>
    <div> <mark>Mark Text</mark> </div>
    <div> <code>Code Text</code> </div>
    <div>
      <blockquote>
        Shall I compare thee to a summer's day?<br/>
        Thou art more lovely and more temperate.
      </blockquote>
    </div>
  </div>