Typography

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

Heading

H1
H2
H3
H4
H5
H6
                      
                        <h1 class="text-4xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H1</h1>
                        <h2 class="text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H2</h2>
                        <h3 class="text-2xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H3</h3>
                        <h4 class="text-xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H4</h4>
                        <h5 class="text-lg leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H5</h5>
                        <h6 class="text-base leading-normal mb-2 font-bold text-gray-800 dark:text-gray-300">H6</h6>

Heading also can change with <p class="...">

Display

Display 1

Display 2

Display 3

Display 4

                      
                        <h2 class="text-8xl mb-6 font-normal text-gray-800 dark:text-gray-300">Display 1</h2>
                        <h2 class="text-7xl mb-6 font-normal text-gray-800 dark:text-gray-300">Display 2</h2>
                        <h2 class="text-6xl mb-6 font-normal text-gray-800 dark:text-gray-300">Display 3</h2>
                        <h2 class="text-5xl mb-6 font-normal text-gray-800 dark:text-gray-300">Display 4</h2>

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                      
                        <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

Link

Click this link
External link 
                      
                        <a href="#" class="text-indigo-500 hover:underline">Click this link</a>
                        <a href="#" target="_blank" rel="noopener" class="text-indigo-500 hover:underline">External link</a>

Text Muted

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

                      
                        <p class="text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote by Ari Budin
                      
                        <blockquote class="relative p-4 ltr:border-l-4 rtl:border-r-4 border-blue-700 bg-gray-100 dark:bg-gray-700 mb-4 text-xl">
                          <span class="absolute opacity-80 w-8 h-8">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270.000000 270.000000"><g transform="translate(0.000000,270.000000) scale(0.100000,-0.100000)" fill="#4f46e5" stroke="none"><path d="M920 2182 c-290 -124 -482 -341 -540 -610 -30 -140 -40 -296 -40 -644 l0 -328 370 0 370 0 0 370 0 370 -181 0 -181 0 7 63 c26 243 129 387 342 477 35 15 66 29 69 32 7 7 -132 298 -143 298 -4 0 -37 -13 -73 -28z"></path><path d="M2179 2186 c-249 -103 -442 -295 -520 -516 -50 -142 -61 -247 -66 -677 l-5 -393 371 0 371 0 0 370 0 370 -181 0 -181 0 7 53 c21 170 67 281 150 363 51 49 143 107 215 134 19 7 39 17 44 21 10 9 -124 298 -139 298 -5 0 -35 -10 -66 -23z"></path></g></svg>
                          </span>
                          <p class="ltr:ml-16 rtl:mr-16 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                          <footer class="ltr:ml-16 rtl:mr-16 text-base">Quote by <cite title="Source Title">Ari Budin</cite></footer>
                        </blockquote>

Dropcaps

Aenean sodales lacus est, at ultricies augue ele ifend sit amet. Be yourself everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Be yourself everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes.

                      
                        <p><span class="block ltr:float-left rtl:float-right text-6xl ltr:mr-3 rtl:ml-3 mb-3 text-center">A</span>enean sodales lacus est, at ultricies augue ele ifend sit amet. <ins>Be yourself</ins> everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus.</p>

Text inline

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.

                      
                        <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>

List Ul and Ol

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    • Itaque earum rerum hic tenetur a sapiente delectus
    • which of us ever undertakes laborious physical exercise
  • Et harum quidem rerum facilis est et expedita distinctio
  • Itaque earum rerum hic tenetur a sapiente delectus
  • which of us ever undertakes laborious physical exercise

  1. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    1. Itaque earum rerum hic tenetur a sapiente delectus
    2. which of us ever undertakes laborious physical exercise
  2. Et harum quidem rerum facilis est et expedita distinctio
  3. Itaque earum rerum hic tenetur a sapiente delectus
  4. which of us ever undertakes laborious physical exercise

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    1. Itaque earum rerum hic tenetur a sapiente delectus
    2. which of us ever undertakes laborious physical exercise
  • Et harum quidem rerum facilis est et expedita distinctio
  • Itaque earum rerum hic tenetur a sapiente delectus
  • which of us ever undertakes laborious physical exercise
                      
                        <ul class="list-disc list-inside ltr:pl-8 rtl:pr-8 my-2">
                          <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            <ul class="list-disc list-inside ltr:pl-8 rtl:pr-8 my-2">
                              <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                              <li>which of us ever undertakes laborious physical exercise</li>
                            </ul>
                          </li>
                          <li>Et harum quidem rerum facilis est et expedita distinctio</li>
                          <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                          <li>which of us ever undertakes laborious physical exercise</li>
                        </ul>
                        
                        <ol class="list-decimal list-inside ltr:pl-8 rtl:pr-8 my-2">
                          <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            <ol class="list-decimal list-inside ltr:pl-8 rtl:pr-8 my-2">
                              <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                              <li>which of us ever undertakes laborious physical exercise</li>
                            </ol>
                          </li>
                          <li>Et harum quidem rerum facilis est et expedita distinctio</li>
                          <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                          <li>which of us ever undertakes laborious physical exercise</li>
                        </ol>

                        <ul class="list-disc list-inside ltr:pl-8 rtl:pr-8 my-2">
                          <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            <ol class="list-decimal list-inside ltr:pl-8 rtl:pr-8 my-2">
                              <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                              <li>which of us ever undertakes laborious physical exercise</li>
                            </ol>
                          </li>
                          <li>Et harum quidem rerum facilis est et expedita distinctio</li>
                          <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
                          <li>which of us ever undertakes laborious physical exercise</li>
                        </ul>