Tailwind CSS Font Weight

Font weight in CSS defines the thickness or boldness of typography within your application. This property allows you to distinguish text hierarchies, focus attention, and maintain consistency across your design system.

In this guide, we will explore Tailwind CSS font weight utilities, how to apply them conditionally, and the process for creating custom weights—enabling you to craft text that aligns with your application's design:

Overview of Font Weight

When working with font weights in Tailwind CSS, you tap into a collection of utilities that represent predefined CSS font-weight values. These values range from thin (lighter) to extrabold or black (heaviest). This section focuses on applying standard font weight utilities to text.

Adding Font Weight

To set the font weight of a particular text element, simply add the corresponding utility class to your element.

The utility classes font-light, font-semibold, and font-extrabold are applied in the below example. Tailwind automatically maps these utilities to CSS's font-weight values without additional configuration.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Hover and Focus States

State-dependent utilities such as hover, focus, and active enable you to modify typography appearance dynamically. Each state is declared with a colon prefix.

In this example, the text transitions from font-light (300) to font-extrabold (800) when the user hovers over it.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Media query breakpoints in Tailwind make font-weight modifications highly adaptable for responsive designs. You can specify distinct font-weight utilities for each screen size to satisfy complex layout requirements.

On smaller screens, the text weight starts as medium (500) but progresses to bold (700) for devices with larger resolutions.

export default function App() {
  return <h1>Hello world</h1>
}

Custom Font Weight

While the default font-weight values in Tailwind encompass most design needs, you might occasionally encounter requirements for custom typography rules. Tailwind lets you extend its configuration effortlessly.

Extending the Theme

To create custom font weights, modify the theme configuration in your tailwind.config.js file. By extending the fontWeight key, you define unique weights and reuse them across your project.

New utilities—font-hairline and font-ultraheavy—are now part of your Tailwind project and can be applied like this:

export default function App() {
  return <h1>Hello world</h1>
}

Using Arbitrary Values

Sometimes, you may want to apply font-weight values without defining explicit utilities. Tailwind supports arbitrary value classes, which can be directly embedded within elements for instant styling.

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Product Review Ratings Component with Variable Font Weights

This component displays user reviews with different font weights to emphasize ratings and review content.

export default function App() {
  return <h1>Hello world</h1>
}

Team Member Directory with Hierarchical Font Weights

This component showcases team members with different font weights to establish visual hierarchy.

export default function App() {
  return <h1>Hello world</h1>
}

Blog Post Preview with Typography Hierarchy

This component displays blog post previews with varying font weights for better readability.

export default function App() {
  return <h1>Hello world</h1>
}

Feature Comparison Table with Weight Emphasis

This component shows a pricing comparison table using font weights to highlight important information.

export default function App() {
  return <h1>Hello world</h1>
}

Statistics Dashboard with Font Weight Variations

This component displays statistics with different font weights to create visual hierarchy.

export default function App() {
  return <h1>Hello world</h1>
}

Customization Examples

Dynamic Blog Post Headers with Custom Font Weights

This example demonstrates how to create a blog post header with different font weights for title and subtitle.

export default function App() {
  return <h1>Hello world</h1>
}

Product Price Card with Weight Variations

This example shows how to implement a product pricing card with different font weights for various text elements.

export default function App() {
  return <h1>Hello world</h1>
}

Statistics Dashboard Card with Variable Weights

This example showcases a statistics card using different font weights for numbers and labels.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

When implementing font weight in your project, it's essential to maintain a consistent typographic hierarchy. In Tailwind CSS, you have access to utility classes such as font-light, font-medium, and font-bold, among others. These predefined classes help ensure uniformity across your application when applied systematically.

For example, use lighter font weights like font-light for auxiliary text such as descriptions or metadata, reserving heavier weights like font-bold or font-extrabold for headings and sections that require visual emphasis. By sticking to this principle, you create predictable rules that make the UI easier to navigate.

export default function App() {
  return <h1>Hello world</h1>
}

Leverage Utility Combinations

Tailwind CSS emphasizes utility-first design principles, allowing you to combine font weights with layout properties such as padding, margins, and colors. For example, combining font-extrabold with vibrant text colors can draw attention to specific calls to action or critical details in your UI.

Combining font-light for subtler text and font-semibold for action buttons creates visual contrast, guiding users' attention throughout the component.

export default function App() {
  return <h1>Hello world</h1>
}

Accessibility Considerations

Enhance Readability for All Users

Accessible typography depends heavily on selecting font weights that do not compromise text readability. Tailwind CSS enables you to experiment while remaining mindful of user needs. For example, avoid weights that are either excessively thin or overly bold for body copy, as this can overwhelm readers.

Striking an appropriate balance between font weight and spacing ensures your content is accessible to a broader audience.

export default function App() {
  return <h1>Hello world</h1>
}

Focus on High Contrast Typography

Pairing font weights with appropriate color contrast can help users with visual impairments read content comfortably. For example, utilities like text-gray-800 and text-gray-100 work effectively with different font weights to provide sufficient contrast.

By intentionally maximizing contrast between text and background, you create visually inclusive designs for everyone.

export default function App() {
  return <h1>Hello world</h1>
}

Debugging Common Issues

Resolve Nested Typography Issues in Complex Components

In deeply nested components, inherited styles may apply font weights. To avoid this issue, if the parent element contains a font weight, specifically add a new weight to the child.

export default function App() {
  return <h1>Hello world</h1>
}