Typography

Space typography, including global settings, headings, body text, lists, and more.

Content Typography

Display 1

Display 2

Display 3

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

This is Lead paragraph.

This is a paragraph.

  1. This is a list.
  2. It appears completely unstyled.
  3. Structurally, it's still a list.
  4. However, this style only applies to immediate child elements.
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

You can use the link Example Link.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

pre {float: right; margin: 15px; width: 100%;}

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

Quote by Roman James

A well-known quote, contained in a blockquote element.

Quote by Roman James

A well-known quote, contained in a blockquote element.

Quote by Roman James

More Info

For the content of the article, you can use class="post-content" in parent div. Write content inside <h2>Title two</h2>, <h3>Title three</h3> and others

              
<!-- display -->
<h1 class="text-5xl md:text-[3.6rem] font-medium">Display 1</h1>
<h2 class="text-4xl md:text-[3rem] font-medium">Display 2</h2>
<h3 class="text-3xl md:text-[2.4rem] font-medium">Display 3</h3>

<!-- heading -->
<h1 class="text-4xl md:text-[2.6rem] font-semibold">Heading H1</h1>
<h2 class="text-3xl md:text-[2rem] font-medium">Heading H2</h2>
<h3 class="text-2xl md:text-[1.6rem] font-medium">Heading H3</h3>
<h4 class="text-xl md:text-[1.4rem] font-medium">Heading H4</h4>
<h5 class="text-lg md:text-[1.2rem] font-medium">Heading H5</h5>
<h6 class="text-base md:text-[1.1rem] font-medium">Heading H6</h6>
<p class="text-lg">This is Lead paragraph.</p>
<p class="text-base">This is a paragraph.</p>

<!-- ol ul -->
<ol class="space-y-1 list-decimal list-inside">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
</ol>
<ul class="space-y-1 list-disc list-inside">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul class="ms-6 space-y-1 list-disc list-inside">
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

<!-- text -->
<p>You can use the link <a href="#" class="hover:underline hover:text-lime-600 dark:text-lime-400">Example Link</a>.</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<pre class="bg-lime-50/50 dark:bg-lime-50/10"><code>pre {float: right; margin: 15px; width: 100%;}</code></pre>

<!-- Quote -->
<blockquote class="py-4 px-6 border-s-4 border-lime-500 bg-lime-50/50 dark:bg-lime-50/10 italic font-semibold">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

<figure class="py-4 px-6 border-s-4 border-lime-500 bg-lime-50/50 dark:bg-lime-50/10">
  <blockquote class="py-2 italic font-semibold">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Quote by <cite class="font-semibold" title="Author">Roman James</cite>
  </figcaption>
</figure>

<figure class="py-4 px-6 border-s-4 border-lime-500 bg-lime-50/50 dark:bg-lime-50/10 text-center">
  <blockquote class="py-2 italic font-semibold">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Quote by <cite class="font-semibold" title="Author">Roman James</cite>
  </figcaption>
</figure>

<figure class="py-4 px-6 border-s-4 border-lime-500 bg-lime-50/50 dark:bg-lime-50/10 text-end">
  <blockquote class="py-2 italic font-semibold">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Quote by <cite class="font-semibold" title="Author">Roman James</cite>
  </figcaption>
</figure>