Master the art of creating beautiful and readable text layouts with Tailwind's utility-first approach
Typography in Tailwind CSS provides a comprehensive set of utilities for styling text content, enabling you to create visually appealing and readable layouts with minimal effort. These utilities control font families, sizes, weights, line heights, colors, and more.
Tailwind makes it easy to apply consistent typography styles across your project, improving readability and visual hierarchy - key components of effective UI design.
Pro Tip: Combine typography utilities with responsive prefixes (like md:text-lg) to create designs that adapt perfectly to different screen sizes.
Font families define the overall character of your text. Tailwind provides three base font family utilities:
font-sans: Modern, clean UI font (default)
font-serif: Traditional, authoritative look
font-mono: Monospaced for code displays
Use cases: Use sans-serif for UI elements and body text, serif for headings or formal content, and monospace for code snippets or technical documentation.
Control text size with responsive utilities ranging from tiny to extra large:
text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
Use cases: Establish visual hierarchy with larger sizes for headings and smaller sizes for captions or secondary information. The responsive variants allow text to adapt to different screen sizes.
Adjust text thickness to create emphasis or reduce visual prominence:
font-light: Lighter than normal text
font-normal: Default text weight
font-medium: Slightly bolder than normal
font-semibold: Semi-bold emphasis
font-bold: Strong emphasis
Use cases: Use font weights to create visual hierarchy without changing font size. Bold and semibold weights are excellent for headings or to highlight important information.
Control the space between characters for improved readability or style:
tracking-tight: Closer letter spacing
tracking-normal: Default letter spacing
tracking-wide: Wider letter spacing
Use cases: Tighter tracking works well for large headlines, while wider tracking can improve readability for all-caps text and improve the appearance of sparse characters.
Control how text aligns horizontally within its container:
text-left: Align text to the left (default)
text-center: Center align text
text-right: Align text to the right
Use cases: Left alignment is best for most paragraph text, center alignment works well for headings or short pieces of text, and right alignment can be useful for timestamps or secondary information.
Add lines to text for emphasis or style:
underline: Underlined text
line-through: Strikethrough text
overline: Line above text
no-underline: Remove text decoration
Use cases: Use underline for links (though this is often handled by link styling), strikethrough for deleted content or discounted prices, and no-underline to remove default underlines from links.
Customize the appearance and position of text decorations:
decoration-solid
decoration-dotted
decoration-dashed
decoration-wavy
underline-offset-4
Use cases: Different decoration styles can enhance the visual appeal of links or headings. Adjusting offset can improve readability by preventing decorations from overlapping with descenders in text.
Control the capitalization of text:
normal-case: Text as entered
uppercase: ALL CAPS
lowercase: all lowercase
capitalize: First Letter Of Each Word
Use cases: Use uppercase for headings, buttons, or labels to create visual impact. Lowercase can soften text, while capitalize works well for titles and proper nouns.
Typography is both an art and a science—these utilities provide the technical tools, but thoughtful application is what creates truly effective designs.
The quick brown fox (font-sans)
The quick brown fox (font-serif)
The quick brown fox (font-mono)
Font Light
Font Normal
Font Medium
Font Semibold
Font Bold
This text is left-aligned.
This text is center-aligned.
This text is right-aligned.
text-xs: Small text
text-sm: Slightly small text
text-base: Base text size
text-lg: Larger text
text-xl: Extra large
text-2xl: 2xl size
text-3xl: 3xl size
Underlined
Strikethrough
Dotted
Dashed
Wavy
Offset
This text is uppercase.
THIS TEXT IS LOWERCASE.
this text is capitalized.