Skip to main content

​
Font Sizes

Control text size with our comprehensive font size scale.

Font Size Scale

.text-xs12pxfont-size: 12px;Small text, captions
.text-sm14pxfont-size: 14px;Body text, labels
.text-base16pxfont-size: 16px;Default body text
.text-lg18pxfont-size: 18px;Large body text
.text-xl20pxfont-size: 20px;Small headings
.text-2xl24pxfont-size: 24px;Medium headings
.text-3xl32pxfont-size: 32px;Large headings
.text-4xl40pxfont-size: 40px;Extra large headings
.text-5xl48pxfont-size: 48px;Hero headings

​
Examples

<!-- Heading hierarchy -->
<h1 class="text-5xl font-700">Main Title</h1>
<h2 class="text-3xl font-600">Section Title</h2>
<h3 class="text-2xl font-500">Subsection Title</h3>
<p class="text-base">Body text content goes here.</p>
<small class="text-sm text-gray">Small caption text</small>

​
Font Weights

Control text weight with our font weight utilities.

Font Weight Scale

.font-300Lightfont-weight: 300;Light text
.font-400Normalfont-weight: 400;Regular text
.font-500Mediumfont-weight: 500;Medium emphasis
.font-600Semi-boldfont-weight: 600;Strong emphasis
.font-700Boldfont-weight: 700;Bold text
.font-800Extra boldfont-weight: 800;Very bold text

​
Examples

<!-- Font weight examples -->
<p class="text-lg font-300">Light text for subtle content</p>
<p class="text-base font-400">Regular body text</p>
<p class="text-lg font-500">Medium weight for emphasis</p>
<p class="text-xl font-600">Semi-bold for important text</p>
<h2 class="text-2xl font-700">Bold heading</h2>
<h1 class="text-4xl font-800">Extra bold hero title</h1>

​
Line Heights

Control line spacing for better readability.

Line Height Scale

.leading-tight16pxline-height: 16;Tight spacing
.leading-normal18pxline-height: 18;Normal spacing
.leading-relaxed24pxline-height: 24;Relaxed spacing
.leading-loose32pxline-height: 32;Loose spacing

​
Examples

<!-- Line height examples -->
<p class="text-sm leading-tight">Tight line spacing for compact text</p>
<p class="text-base leading-normal">Normal line spacing for body text</p>
<p class="text-lg leading-relaxed">Relaxed spacing for comfortable reading</p>
<p class="text-xl leading-loose">Loose spacing for large text blocks</p>

​
Text Alignment

Control text alignment with semantic utilities.

Text Alignment

.text-startStarttext-align: start;Left-aligned (LTR)
.text-centerCentertext-align: center;Center-aligned
.text-endEndtext-align: end;Right-aligned (LTR)

​
Examples

<!-- Text alignment examples -->
<h1 class="text-4xl font-700 text-center">Centered Title</h1>
<p class="text-base text-start">Left-aligned paragraph text</p>
<blockquote class="text-lg text-center italic">Centered quote</blockquote>
<address class="text-sm text-end">Right-aligned contact info</address>

​
Text Transform

Transform text case with utility classes.

Text Transform

.uppercaseUPPERCASEtext-transform: uppercase;All caps
.lowercaselowercasetext-transform: lowercase;All lowercase

​
Examples

<!-- Text transform examples -->
<h2 class="text-2xl font-600 uppercase tracking-wide">Section Title</h2>
<code class="text-sm lowercase">function_name()</code>
<kbd class="uppercase">Ctrl + S</kbd>

​
Text Decoration

Control text decoration and styling.

Text Decoration

.underlineUnderlinedtext-decoration: underline;Underlined text
.no-underlineNo underlinetext-decoration: none;Remove underline
.italicItalicfont-style: italic;Italic text

​
Examples

<!-- Text decoration examples -->
<p class="text-base underline">Underlined text for emphasis</p>
<a href="#" class="text-blue no-underline">Link without underline</a>
<em class="text-lg italic">Italic text for emphasis</em>
<cite class="text-sm italic text-gray">Citation text</cite>

​
Letter Spacing

Control character spacing for better readability.

Letter Spacing

.tracking-wideWideletter-spacing: 2px;Increased spacing

​
Examples

<!-- Letter spacing examples -->
<h1 class="text-4xl font-700 tracking-wide uppercase">Hero Title</h1>
<button class="btn tracking-wide">Button Text</button>
<label class="text-sm tracking-wide uppercase">Form Label</label>

​
Typography Combinations

​
Common Patterns

Hero Section

<div class="text-center">
  <h1 class="text-5xl font-800 mb-4">Amazing Product</h1>
  <p class="text-xl text-gray leading-relaxed mb-8">
    Build something incredible with our platform
  </p>
  <button class="btn btn-blue btn-lg">Get Started</button>
</div>

Article Content

<article class="max-w-2xl">
  <h1 class="text-4xl font-700 mb-6">Article Title</h1>
  <p class="text-lg leading-relaxed mb-4">
    Introduction paragraph with relaxed line height for comfortable reading.
  </p>
  <h2 class="text-2xl font-600 mb-4">Section Heading</h2>
  <p class="text-base leading-normal mb-4">
    Body text with normal line height for regular content.
  </p>
</article>

Card Header

<div class="card">
  <h3 class="text-xl font-600 mb-2">Card Title</h3>
  <p class="text-sm text-gray leading-tight">
    Short description with tight line height
  </p>
</div>

Form Labels

<form>
  <label class="text-sm font-500 uppercase tracking-wide text-gray-dark">Email Address</label>
  <input type="email" class="mt-1">
  <label class="text-sm font-500 uppercase tracking-wide text-gray-dark">Password</label>
  <input type="password" class="mt-1">
</form>

​
Best Practices

​
Typography Hierarchy

1

Use Semantic HTML

Always use proper heading tags (h1, h2, h3) with utility classes.
2

Maintain Visual Hierarchy

Use larger font sizes for more important content.
3

Consistent Spacing

Use consistent margin and padding with your typography.
4

Readable Line Heights

Use relaxed line heights for body text, tight for headings.

​
Accessibility

Accessibility Note: Always ensure sufficient color contrast between text and background colors for readability.
  • Use font-600 or font-700 for important text
  • Maintain consistent line heights for readability
  • Use semantic HTML elements with utility classes
  • Test with screen readers for proper heading structure

​
Performance

  • Font weights are loaded efficiently by the browser
  • Line height values are optimized for performance
  • Text transforms don’t affect layout performance

Colors

Text colors for better contrast and hierarchy

Spacing

Margin and padding for typography spacing

Layout

Display utilities for text layout

Components

Pre-built typography components