Typography

Sets the font family (typeface) for text. Font family is one of the most important typographic choices for establishing the visual tone of your content and ensuring readability. Tailwind's font family utilities provide system font stacks that look great across different devices and operating systems without requiring custom font loading. In Tailwind v4, font metrics are better handled to reduce layout shift.

Controls the size of text. Tailwind provides a comprehensive type scale that follows a harmonious progression, making it easy to create consistent typography across your project. Each text size utility also sets an appropriate default line-height, which you can override with line-height utilities when needed. In Tailwind v4, font-size utilities are enhanced with improved default line heights and support for modern CSS units.

Controls the font smoothing and antialiasing applied to text, which can dramatically improve text rendering on certain screens and operating systems. These utilities are especially useful for light text on dark backgrounds, custom fonts, and larger text where rendering quality is more noticeable. In Tailwind v4, font smoothing has improved integration with system fonts.

Controls whether text is displayed in an italic style or with normal font style. Italic text can add emphasis, indicate citations or titles, or create visual contrast within your typography. Font style utilities are simple but powerful for adding typographic nuance to your content. In Tailwind v4, font style utilities integrate better with custom fonts and variable fonts.

Controls the weight (thickness) of the font. Font weight is essential for establishing visual hierarchy, emphasis, and readability. Tailwind provides a range of font weights from thin to black, allowing you to create contrast and focus within your typography. In Tailwind v4, font weight utilities are optimized for variable fonts and better integration with custom typefaces.

Controls the spacing between letters (characters) in text. Letter spacing can enhance readability, create a more modern look, or add emphasis to specific text elements. Tailwind provides utilities for adjusting letter spacing from tighter to looser settings. In Tailwind v4, letter spacing utilities are optimized for variable fonts and better integration with custom typefaces.

Controls the height of lines of text. Line height is crucial for readability and visual comfort, especially in longer paragraphs. Tailwind provides a range of line height utilities that can be applied to text elements to ensure optimal spacing between lines. In Tailwind v4, line height utilities are optimized for variable fonts and better integration with custom typefaces.

Controls the style of list items in ordered and unordered lists. Tailwind provides utilities for common list styles, including disc, decimal, square, and none. These utilities help you customize the appearance of lists to fit your design needs. In Tailwind v4, list style type utilities are optimized for better integration with custom fonts and variable fonts.

Controls the alignment of text within its container. Tailwind provides utilities for left, center, right, and justify text alignment. These utilities help you create a clear visual hierarchy and improve readability in your designs. In Tailwind v4, text alignment utilities are optimized for better integration with custom fonts and variable fonts.

Controls the decoration applied to text, such as underlining or striking through. Text decoration utilities are useful for indicating links, emphasizing text, or showing deleted content. In Tailwind v4, text decoration utilities are optimized for better integration with custom fonts and variable fonts.