Typescale / Typography
Use typography to present your design and content as clearly and efficiently as possible.
Default
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
paragraph text lorem ipsum
small text bold text some link<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
<p>paragraph text lorem ipsum</p>
<small>small text</small>
<b>bold text</b>
<a href="https://css-utils.oardi.com">some link</a>Text Scales
paragraph with .text-xs
paragraph with .text-sm
paragraph with .text-md
paragraph with .text-lg
paragraph with .text-xl
paragraph with .text-xxl
paragraph with .text-xxxl
<p class="text-xs">paragraph with .text-xs</p>
<p class="text-sm">paragraph with .text-sm</p>
<p class="text-md">paragraph with .text-md</p>
<p class="text-lg">paragraph with .text-lg</p>
<p class="text-xl">paragraph with .text-xl</p>
<p class="text-xxl">paragraph with .text-xxl</p>
<p class="text-xxxl">paragraph with .text-xxxl</p>Text Alignment
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more
Start aligned text.
Center aligned text.
End aligned text.
<p class="text-start">Start aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">End aligned text.</p>