Typography and Fonts

Structuring typography properly makes copy content readable and engaging. Let us explore Tailwind CSS typography and text formatting utility classes.

1. Font Sizes and Line Heights

Tailwind pairs font sizes (text-) with matching line heights (leading-) automatically. The scale ranges from tiny annotations to large page headings:

• text-xs (0.75rem / 12px)
• text-sm (0.875rem / 14px, standard for annotations or secondary text labels)
• text-base (1rem / 16px, standard base size for body copy paragraph text)
• text-lg (1.125rem / 18px)
• text-xl (1.25rem / 20px)
• text-3xl (1.875rem / 30px, commonly used for article titles)
• text-6xl (3.75rem / 60px)

Overriding Line Heights

You can customize line heights manually if needed:

• leading-none: Sets line height to 1.
• leading-tight: Sets line height to 1.25.
• leading-normal: Sets line height to 1.5.
• leading-loose: Sets line height to 2.

2. Font Weights (Thickness)

You can adjust text thickness using font-weight utilities:

• font-light: Font weight of 300.
• font-normal: Font weight of 400 (standard).
• font-medium: Font weight of 500.
• font-semibold: Font weight of 600.
• font-bold: Font weight of 700.

<h1 className="text-3xl font-extrabold leading-tight">Article Header</h1>

3. Text Alignment and Decoration

Control alignment and decorative effects on elements using these helper classes:

Alignments

• text-left: Left alignment.
• text-center: Center alignment.
• text-right: Right alignment.
• text-justify: Justified alignment.

Decorations and Transformations

• underline: Adds a bottom underline decoration to links.
• uppercase: Capitalizes all characters.
• lowercase: Forces lowercase on all characters.
• capitalize: Capitalizes the first letter of each word.