Typography

Styles for headings, paragraphs, lists, and other text elements.

Installation

Typography styles are applied globally through Tailwind CSS utilities and custom CSS classes. No component installation is required.

Using Tailwind Classes

Use Tailwind's typography utilities directly in your JSX for consistent text styling across your application.

Usage

Apply typography styles using Tailwind CSS classes.

export default function MyComponent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight">Heading</h1>
      <p className="text-lg text-muted-foreground">
        A descriptive paragraph with muted text color.
      </p>
    </div>
  )
}

Examples

Headings

Six levels of headings with consistent styling.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings with no classes

Six levels of headings with consistent styling.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Standard and muted paragraph text styles.

This is a standard paragraph with normal weight and default text color. It provides good readability for body content.

This is a standard paragraph with normal weight and default text color. It provides good readability for body content.

This is a muted paragraph with reduced emphasis, perfect for secondary or supporting information.

This is a large paragraph that can be used for lead text or introductory content that needs more emphasis.

This is a small muted paragraph, ideal for captions, footnotes, or supplementary details.

Blockquote

Styled blockquote for quotations.

"The best way to predict the future is to invent it."
— Alan Kay

Lists

Unordered and ordered lists with proper spacing.

Unordered List

  • First item in the list
  • Second item in the list
  • Third item in the list
  • Fourth item in the list

Ordered List

  1. First step
  2. Second step
  3. Third step
  4. Fourth step

Inline Code

Inline code snippets with proper styling.

Use the useState hook to manage component state in React. Import it with import { useState } from 'react'

Code Block

Multi-line code blocks for longer snippets.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Text Styles

Common text styling utilities for emphasis and decoration.

This is bold text for emphasis.

This is italic text for emphasis.

This is underlined text.

This is strikethrough text.

This is highlighted text.

This is small text for fine print.

Lead Text

Larger text for introductions and callouts.

This is lead text. It's slightly larger and can be used for introductions, summaries, or to draw attention to important information at the start of a section or article.

Text Colors

Semantic color utilities for text.

Default text color for standard content

Muted text color for secondary information

Destructive color for errors or warnings

Primary color for branded or emphasized text

Guidelines

Best practices for using typography in your application.

Hierarchy

Use heading levels (h1-h6) to create a clear visual hierarchy. H1 should be used once per page for the main title, with subsequent headings used to structure content logically.

Readability

Keep line lengths between 50-75 characters for optimal readability. Use appropriate line heights (typically 1.5-1.75) and spacing between paragraphs.

Consistency

Maintain consistent font sizes, weights, and colors throughout your application. Use the design system's predefined classes to ensure uniformity.

Accessibility

Ensure sufficient color contrast (WCAG AA: 4.5:1 for normal text, 3:1 for large text). Use semantic HTML elements for proper screen reader support.

Responsive Design

Adjust font sizes for different screen sizes using Tailwind's responsive utilities (e.g., text-base md:text-lg lg:text-xl).