Typography

Typography utilities control text appearance including size, style, decoration, alignment, and text transformation.

Usage Pattern

Text utilities follow the pattern t{type}-{value}

Prefix	Controls	Examples
ts	Text Size	ts-1 (largest) through ts-6 (smallest)
td	Text Decoration	td-b (bold), td-i (italic)
tt	Text Transform	tt-u (uppercase), tt-c (truncate)
ta	Text Alignment	ta-c (center), ta-l (left)

Text Size

Font sizes are predefined with CSS variables:

:root {
  --text-size-1: 3rem;      /* ts-1 */
  --text-size-2: 2.25rem;   /* ts-2 */
  --text-size-3: 1.5rem;    /* ts-3 */
  --text-size-4: 1.25rem;   /* ts-4 */
  --text-size-5: 1rem;      /* ts-5 */
  --text-size-6: 0.875rem;  /* ts-6 */
}

Example - Text Size

<h1 class="ts-1">Large Heading (3rem)</h1>
<h2 class="ts-2">Medium Heading (2.25rem)</h2>
<h3 class="ts-3">Small Heading (1.5rem)</h3>
<p class="ts-5">Normal paragraph text (1rem)</p>
<p class="ts-6">Small text (0.875rem)</p>

Text Decoration

Control font weight, style, and text decorations:

Class	Effect	CSS Applied
td-b	Bold text	font-weight: bold
td-i	Italic text	font-style: italic
td-u	Underlined text	text-decoration: underline
td-s	Strikethrough text	text-decoration: line-through

Example - Text Decoration

<p class="td-b">Bold text</p>
<p class="td-i">Italic text</p>
<p class="td-u">Underlined text</p>
<p class="td-s">Strikethrough text</p>
<p class="td-b td-i">Bold and italic text</p>

Text Transform

Control text capitalization and truncation:

Class	Effect	CSS Applied
tt-t	Title Case	text-transform: capitalize
tt-u	UPPERCASE	text-transform: uppercase
tt-l	lowercase	text-transform: lowercase
tt-c	Truncate with ...	text-overflow: ellipsis; white-space: nowrap; overflow: hidden

Example - Text Transform

<p class="tt-t">title case text (first letter of each word capitalized)</p>
<p class="tt-u">uppercase text (all capitals)</p>
<p class="tt-l">LOWERCASE TEXT (all lowercase)</p>
<div style="width: 200px">
  <p class="tt-c">This text will be truncated with an ellipsis when it's too long</p>
</div>

Text Alignment

Control horizontal text alignment:

Class	Effect	CSS Applied
ta-l	Left-aligned text	text-align: left
ta-c	Centered text	text-align: center
ta-r	Right-aligned text	text-align: right

Example - Text Alignment

<p class="ta-l">Left-aligned text (default)</p>
<p class="ta-c">Centered text</p>
<p class="ta-r">Right-aligned text</p>

Combined Examples

<!-- Heading with multiple text styles -->
<h1 class="ts-2 tt-u ta-c">CENTERED UPPERCASE HEADING</h1>

<!-- Important notice -->
<p class="td-b td-u">Important: Please read carefully!</p>

<!-- Truncated label -->
<div style="width: 150px" class="tt-c td-b">This is a very long text that will be truncated</div>