Typography

Good typography makes content readable, establishes hierarchy, and creates visual rhythm. This guide covers best practices for text styling in your applications.

Type Scale

Our type scale provides consistent sizing for all text elements:

6xlDisplay

5xlHero text

4xlPage title

3xlSection heading

2xlSubsection heading

xlCard title

lgLead paragraph

baseBody text (16px)

smSecondary text

xsCaption, labels

Font Families

Choose the right font family for your content type:

Click a font tile above to preview it across this entire page.

Font Weights

font-lightLight weight text

font-normalNormal weight text

font-mediumMedium weight text

font-semiboldSemibold weight text

font-boldBold weight text

Creating Hierarchy

Establish clear hierarchy using size, weight, and color together:

Article Title

Published on November 25, 2024 · 5 min read

This is the body text of the article. Notice how different sizes, weights, and colors create a clear visual hierarchy. The title stands out most, followed by the body text, with metadata being the least prominent.

<article>
  <h1 className="text-2xl font-semibold text-gray-900">
    Article Title
  </h1>
  <p className="text-sm text-gray-500">
    Published on November 25, 2024 · 5 min read
  </p>
  <p className="text-base text-gray-600 leading-relaxed">
    Body text content...
  </p>
</article>

Line Height

Appropriate line height improves readability. Use tighter line heights for headings, relaxed for body text:

leading-tight

Tight line height is good for headings with multiple lines of text

leading-relaxed

Relaxed line height makes body text much easier to read, especially in longer paragraphs where the eye needs to track lines.

Best Practices

Do: Limit line length

Keep body text to 50-75 characters per line (use max-w-prose or ~65ch). Long lines are hard to read.

Do: Use consistent scale

Stick to the type scale. Random sizes like 17px or 22px create visual discord.

Do: Create contrast between levels

Skip sizes to create clear distinction. Don't use text-lg for h2 and text-base for h3.

Don't: Use too many weights

Limit to 2-3 weights (normal, medium, bold). More creates visual chaos.

Don't: Center long text

Centered text is hard to read in paragraphs. Use left-alignment for body content.

Common Patterns

Page Header

<header>
  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
    Page Title
  </h1>
  <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
    A brief description of what this page is about.
  </p>
</header>

Card Content

<div className="space-y-1">
  <h3 className="text-lg font-medium text-gray-900">Card Title</h3>
  <p className="text-sm text-gray-500">Supporting description</p>
</div>

Form Labels

<label className="block text-sm font-medium text-gray-700">
  Email Address
</label>
<p className="mt-1 text-xs text-gray-500">
  We'll never share your email.
</p>