Typography

Ready

Text styles, headings, and paragraphs using Stack Sans font family

Headings

Six heading levels using Stack Sans Headline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Body text using Stack Sans Text

This is a regular paragraph with bold text and italic text. Stack Sans Text provides excellent readability for body content with its carefully designed letterforms and optimal spacing.

This is a smaller paragraph, perfect for secondary content or descriptions. The font maintains clarity even at smaller sizes.

This is extra small text, useful for captions, labels, or fine print. Stack Sans Text ensures legibility across all sizes.

Text Variants

Different text styles and weights

Light weight text (200)

Normal weight text (400)

Medium weight text (500)

Semibold weight text (600)

Bold weight text (700)

Subdued Text

Muted text for secondary information

Primary text color

Secondary text color

Subdued text color

Muted text color

Disabled text color

Lists

Ordered and unordered lists

Unordered List

  • First list item
  • Second list item
  • Third list item

Ordered List

  1. First ordered item
  2. Second ordered item
  3. Third ordered item

Inline Text Elements

Links, code, and special formatting

This paragraph contains a link element and some inline code.

You can also use Ctrl +C keyboard shortcuts.

Text can be highlighted for emphasis.

Usage

Typography classes and examples

// Headings
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-50">Heading 1</h1>
<h2 className="text-2xl font-bold text-slate-900 dark:text-slate-50">Heading 2</h2>
<h3 className="text-3xl font-semibold text-slate-900">Heading 3</h3>
<h4 className="text-2xl font-semibold text-slate-900 dark:text-slate-50">Heading 4</h4>
<h5 className="text-xl font-medium text-slate-900 dark:text-slate-50">Heading 5</h5>
<h6 className="text-lg font-medium text-slate-900 dark:text-slate-50">Heading 6</h6>

// Paragraphs
<p className="text-base text-slate-900">Regular paragraph</p>
<p className="text-sm text-slate-700 dark:text-slate-300">Small paragraph</p>
<p className="text-xs text-slate-600 dark:text-slate-400">Extra small paragraph</p>

// Weights
<p className="font-light">Light (200)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>

// Subdued Text
<p className="text-slate-900">Primary</p>
<p className="text-slate-700">Secondary</p>
<p className="text-slate-600 dark:text-slate-400">Subdued</p>
<p className="text-slate-500">Muted</p>
<p className="text-slate-400">Disabled</p>

// Inline Elements
<a className="text-indigo-600 hover:text-indigo-700 underline">Link</a>
<code className="px-1.5 py-0.5 bg-slate-200 rounded">Inline code</code>
<kbd className="px-2 py-1 bg-slate-200 rounded border">Keyboard</kbd>
<mark className="bg-amber-200 px-1">Highlight</mark>

Font Family

Stack Sans by Braga Braga

Stack Sans Headline

Used for all heading elements (h1-h6). Provides strong visual hierarchy with excellent readability.

font-family: "Stack Sans Headline", sans-serif

Stack Sans Text

Used for all body text, paragraphs, and UI elements. Optimized for extended reading with balanced letterforms.

font-family: "Stack Sans Text", sans-serif

Variable Font Weights

Both fonts support variable weights from 200 to 700, allowing fine-tuned typography throughout your design.

Features

  • Two font families - Stack Sans Headline for headings, Stack Sans Text for body
  • Variable font weights - 200 to 700 for both families
  • Six heading levels - h1 through h6 with appropriate sizing
  • Multiple text sizes - From xs to 5xl
  • Semantic color scale - slate-900 to slate-400 for text hierarchy
  • Inline elements - Links, code, kbd, and mark support
  • Optical sizing - Auto-optimized for different sizes