Tailwind CSS - Font Weight

Tailwind CSS: Font Weight

Font weight utilities control the thickness or boldness of text. Proper use of font weight is crucial for creating typographic hierarchy, drawing attention to key information, and improving the overall readability of your interface.

Font Weight Class Reference

Tailwind provides a full range of numeric font weights, from thin (100) to black (900).

Class	CSS Property (font-weight)
font-thin	100
font-extralight	200
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700
font-extrabold	800
font-black	900

Practical Application

Let’s create a text block that demonstrates different font weights. Note that for a font to render at a specific weight, the font file for that weight must be loaded by the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <title>Font Weight Example</title>
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-white p-8 text-slate-700">
    <div class="max-w-2xl mx-auto">
        <h1 class="text-3xl font-extrabold text-slate-900 mb-2">Typographic Hierarchy</h1>
        <p class="text-lg font-light text-slate-500 mb-6">Using font weights to guide the reader's eye.</p>

        <div class="space-y-4">
            <p class="font-normal">This is the standard body text (`font-normal`), perfect for long-form reading.</p>
            <p class="font-medium">Medium weight (`font-medium`) can be used for subtitles or slightly emphasized text.</p>
            <p class="font-bold">For strong emphasis, `font-bold` is the standard choice. It's clear and effective.</p>
            <p class="font-black">The heaviest weight (`font-black`) is best used sparingly for impactful headlines.</p>
        </div>
    </div>
</body>
</html>

Responsive and State Variants

Like most Tailwind utilities, font weights can be applied conditionally using responsive (sm:, md:, etc.) and state (hover:, focus:, etc.) prefixes. This is great for interactive elements.

<!-- This link becomes bold on hover -->
<a href="#" class="font-medium text-blue-600 hover:font-bold">Read more</a>

<!-- This text is normal on mobile, but semibold on medium screens and up -->
<p class="font-normal md:font-semibold">Important Announcement</p>

Font Smoothing

To fine-tune the rendering of your text, especially on macOS and iOS, you can use the font-smoothing utilities. antialiased gives fonts a crisper, thinner appearance, while subpixel-antialiased provides a more standard, slightly heavier look.

<!-- For a crisp, modern look -->
<body class="antialiased">
  <!-- ... -->
</body>

<!-- For standard rendering -->
<body class="subpixel-antialiased">
  <!-- ... -->
</body>

Accessibility and Best Practices

• Avoid Very Light Weights for Body Text: Weights like font-thin and font-extralight can be very difficult to read, especially for users with visual impairments. Reserve them for large, decorative text or headlines.
• Ensure Font Availability: If you use font-bold, but the user’s browser hasn’t loaded the bold version of your font, it may try to create a “faux bold” version, which often looks poor. Always ensure you are loading all the font weights you intend to use via @font-face or a service like Google Fonts.
• Hierarchy is Key: Use a limited and consistent set of font weights to create a clear visual hierarchy. For example: font-bold for titles, font-semibold for subtitles, and font-normal for body text.