Tailwind Font Weight Explained

Ever feel like your website's text needs a bit more punch? You're not alone! The weight of your fonts can make a big difference in how your content looks and feels. In this guide, we'll show you all you need to know about controlling font weight in Tailwind CSS. Whether you want to make your headlines stand out or adjust the thickness of your paragraphs, we've got you sorted.

What is Font Weight in CSS?

Font weight is all about how thick or bold your text appears. In CSS, you can control it with the font-weight property. This property accepts numbers like 100, 400, 700, or words like normal and bold.

But what do these numbers mean? Here's a quick rundown:

• 100 — Thin

• 200 — Extra Light

• 300 — Light

• 400 — Normal

• 500 — Medium

• 600 — Semi Bold

• 700 — Bold

• 800 — Extra Bold

• 900 — Black

Changing the font weight can improve readability and help draw attention to key parts of your webpage. For example, you might use a heavier weight for headlines to make them pop, while keeping your body text at a normal weight so it's easy to read.

Why Does Font Weight Matter?

Font weight isn't just about looks—it's also about how users experience your site. The right font weight can:

• Make reading easier, especially on small screens.

• Guide readers through your content by creating visual hierarchy.

• Help users with visual impairments read your text.

• Match the style and branding of your website.

By choosing font weights carefully, you can make your content more engaging and easier to understand.

The Default Font Weight Classes

Tailwind CSS gives you a bunch of classes to control font weight. These classes range from font-thin to font-black, covering all the weights you might need. Here's a quick list:

• font-thin → font-weight: 100;

• font-extralight → font-weight: 200;

• font-light → font-weight: 300;

• font-normal → font-weight: 400;

• font-medium → font-weight: 500;

• font-semibold → font-weight: 600;

• font-bold → font-weight: 700;

• font-extrabold → font-weight: 800;

• font-black → font-weight: 900;

Using these classes is easy. Just add them to your HTML elements to apply the weight you want:

<h1 class="font-bold">This is a bold headline</h1>
<p class="font-light">This is light paragraph text</p>

Examples

Let's see how different font weights look:

<p class="font-thin">Thin text (font-weight: 100)</p>
<p class="font-extralight">Extra Light text (font-weight: 200)</p>
<p class="font-light">Light text (font-weight: 300)</p>
<p class="font-normal">Normal text (font-weight: 400)</p>
<p class="font-medium">Medium text (font-weight: 500)</p>
<p class="font-semibold">Semi Bold text (font-weight: 600)</p>
<p class="font-bold">Bold text (font-weight: 700)</p>
<p class="font-extrabold">Extra Bold text (font-weight: 800)</p>
<p class="font-black">Black text (font-weight: 900)</p>

By using these classes, you can easily adjust how your text looks.

Customizing Font Weight in Tailwind

Sometimes, the default font weights aren't exactly what you need. Maybe you want an ultra-thin font for a minimalist look, or an ultra-bold font for a big headline. The good news is that Tailwind lets you customize font weights in the tailwind.config.js file.

Adding Custom Font Weights

First, open your tailwind.config.js file. Then, in the theme section, add your custom font weights:

module.exports = {
  theme: {
    fontWeight: {
      hairline: 50,
      ultralight: 150,
      regular: 400,
      ultrabold: 950,
      heavy: 1000,
      // Add your custom weights here
    },
  },
}

Now, you can use these new classes in your HTML:

<p class="font-hairline">This text is ultra-thin!</p>
<p class="font-heavy">This text is super heavy!</p>

Tailwind will generate the CSS based on your settings, giving you full control over the font weights in your project.

Extending Default Weights

If you want to keep the default weights and add new ones, you can extend the fontWeight in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontWeight: {
        ultralight: 150,
        ultrabold: 950,
      },
    },
  },
}

This way, you keep all the default weights and add your own on top.

Using with Custom Fonts

When using custom font weights, make sure your font files support them. Not all fonts have weights like 950 or 50. If the font doesn't support a weight, the browser might use the closest weight it can find, or it might not display the font correctly.

Using Variable Fonts with Tailwind

Variable fonts offer a range of font weights and other features within a single font file. Tailwind supports variable fonts, giving you even more options.

What Are Variable Fonts?

Variable fonts are fonts that contain multiple variations of a typeface in a single file. Instead of having separate files for each weight and style, variable fonts let you adjust things like weight, width, and slant on the fly.

How to Use Variable Fonts in Tailwind

To use variable fonts, you'll need to include the font-variation-settings property. Here's how to set it up.

Step 1: Include the Variable Font

First, include the variable font in your CSS:

@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/Inter-VariableFont.woff2') format('woff2');
}

Step 2: Create a Custom Class

Then, define a custom class to set the font and adjust the font-variation-settings:

.variable-font {
  font-family: 'InterVariable', sans-serif;
  font-variation-settings: 'wght' var(--font-weight);
}

Step 3: Use Custom Properties in Tailwind

In your Tailwind config, you can define custom properties and utilities:

module.exports = {
  theme: {
    extend: {
      fontWeight: {
        // Map font weight values to custom variable font settings
        'variable-100': '100',
        'variable-200': '200',
        // Continue as needed
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.font-variable': {
          fontFamily: "'InterVariable', sans-serif",
        },
      }
      addUtilities(newUtilities, ['responsive', 'hover'])
    },
  ],
}

Step 4: Apply in HTML

Finally, use the classes in your HTML:

<p class="font-variable font-[200]">This text uses a variable font weight of 200!</p>

This way, you get the precision of variable fonts while still using Tailwind's classes.

Benefits of Variable Fonts

• Better Performance: Only one font file to load, reducing the number of HTTP requests.

• More Flexibility: Adjust font weight to any value within the supported range.

• Smooth Design: Create smooth transitions between font weights.

Responsive Font Weight Adjustments

Tailwind CSS makes it easy to adjust font weights based on screen size. By adding breakpoint prefixes to font weight classes, you can control how text appears on different devices.

Tailwind's Responsive Design

Tailwind uses a mobile-first approach, meaning styles are applied to all screen sizes unless you change them with breakpoints.

Here's how it works:

<p class="font-normal md:font-bold lg:font-extrabold">
  This text changes weight based on screen size!
</p>

In this example:

• Default (mobile devices): font-normal

• Medium screens (md:): font-bold

• Large screens (lg:): font-extrabold

Custom Breakpoints

You can also set up custom breakpoints in your tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      // Existing breakpoints
    },
  },
}

Then use them in your HTML:

<p class="font-normal xs:font-medium sm:font-semibold md:font-bold">
  Responsive font weights at custom breakpoints!
</p>

This lets you enhance readability and emphasize elements depending on the device or screen size.

Combining Font Weight with Other Tailwind Typography Utilities

Font weight is just one part of typography. Tailwind provides lots of utilities to control all aspects of text styling.

Font Size

Adjust font size with classes like text-sm, text-lg, text-xl, etc.:

<p class="text-lg font-medium">Larger text with medium weight.</p>

Line Height

Control line height using classes like leading-none, leading-tight, leading-loose:

<p class="font-light leading-loose">
  Light font weight with loose line spacing.
</p>

Letter Spacing

Adjust letter spacing with classes like tracking-tight, tracking-wide:

<p class="font-semibold tracking-wider">
  Semi-bold text with wider letter spacing.
</p>

Text Color

Change text color using classes like text-gray-700, text-red-500:

<p class="font-bold text-blue-600">
  Bold text with blue color.
</p>

Text Alignment

Align text with classes like text-left, text-center, text-right:

<p class="font-normal text-center">
  Centered text with normal weight.
</p>

By combining these utilities, you can create rich typography styles quickly.

Accessibility Considerations

When changing font weights, it's good to think about accessibility. Some users might have trouble reading very thin or very thick fonts. Here are some tips:

• Contrast: Make sure there's enough contrast between text and background colors.

• Readability: Avoid using very light or heavy weights for body text.

• Testing: Use tools like screen readers to see how your typography works for different users.

By keeping accessibility in mind, you make your site better for everyone.

Troubleshooting Common Font Weight Issues

Sometimes, you might apply a font weight class and not see any change. Here are some common reasons why:

1. Font Family Limitations

Not all fonts support all weight values. If you're using a custom font that doesn't include bold weights, applying font-bold won't make a difference.

What to do: Check the font's documentation or files to see which weights are available. You might need to use a different font or import additional weights.

2. Specificity Conflicts

Inline styles or other CSS rules might be overriding your Tailwind classes.

What to do: Use your browser's developer tools to inspect the element and see which styles are applied. Make sure Tailwind classes aren't being overridden by more specific CSS.

3. Typo in Class Names

Double-check that you're using the correct Tailwind class names without typos.

What to do: Look at the Tailwind documentation to verify class names.

4. Missing Font Files

If you're linking to external fonts, the font files might not be loading correctly.

What to do: Check the URLs and make sure the font files are accessible. Use your browser's developer tools to check for any errors.

Tips for Using Font Weight Effectively

• Stay Consistent: Use a limited set of font weights to keep a cohesive design.

• Create Hierarchy: Use font weight to guide readers. Headlines can be bold, subheadings semi-bold, and body text normal.

• Focus on Readability: Make sure text is easy to read, especially longer paragraphs.

• Test on Different Devices: See how your font weights look on various devices and browsers.

• Combine Thoughtfully: Mix font weight with font size, color, and spacing to create appealing typography.

• Remember Accessibility: Ensure that your choices work for all users.

Real-World Examples

Example 1: Blog Post

For a blog post, you might set up your typography like this:

<h1 class="text-3xl font-bold">Article Title</h1>
<h2 class="text-2xl font-semibold mt-4">Subheading</h2>
<p class="text-base font-normal">
  Body text with normal font weight for comfortable reading.
</p>

Example 2: Landing Page

On a landing page designed to grab attention:

<h1 class="text-5xl font-black text-center">
  Welcome to Our Product!
</h1>
<p class="text-xl font-light text-center mt-2">
  Experience the difference with our innovative solutions.
</p>

By adjusting font weight, you can set the tone and guide the reader's eye.

Performance Considerations

Using lots of different font weights can increase the number of font files your site needs to load, which might impact performance.

Optimization Tips

• Limit Font Weights: Only include the weights you actually need.

• Use Variable Fonts: They can reduce the number of font files.

• Use Modern Formats: Fonts like woff2 have better compression.

• Font Loading Strategies: Use methods like font-display: swap to improve how fonts load.

Wrapping Up

Understanding font weight in Tailwind CSS lets you enhance your web design with just a few classes. Whether you're making a headline stand out or tweaking the emphasis of your text, knowing how to control font weight is key. Now that you have these tips and techniques, it's time to try them out!

Play around with different font weights, mix them with other utilities, and see how they can change the look and feel of your website. Happy styling!

FAQ

How do I change the font weight in Tailwind CSS?

Use Tailwind's font weight classes like font-bold, font-light, etc. Just add the class you want to your HTML element

Why is font-bold not working with my custom font?

Your font might not support the bold weight. Check if the font file includes that weight. You might need to import extra font files or pick a font that has more weights.

Can I add custom font weights in Tailwind CSS?

Yes! You can add custom font weights by editing the tailwind.config.js file. Add your desired weights under the theme.fontWeight section.

What are variable fonts, and can I use them with Tailwind CSS?

Variable fonts are fonts that have multiple variations in one file. You can use them with Tailwind by customizing your utility classes and using the font-variation-settings property.

Do variable fonts improve performance?

Variable fonts can help performance by reducing the number of font files you need to load. Instead of loading separate files for each weight and style, you load one file that covers them all.