Font Weight Utilities
Font weight utilities in Tailwind CSS are used to control the thickness of text.
Font weight helps create:
- headings
- emphasis
- visual hierarchy
- readable content
Different font weights make text appear:
- thin
- light
- normal
- bold
- extra bold
Font Weight Classes
Tailwind provides predefined font weight utilities.
|
Class |
Meaning |
|---|---|
|
|
Very thin text |
|
|
Extra light text |
|
|
Light text |
|
|
Normal text |
|
|
Medium thickness |
|
|
Semi-bold text |
|
|
Bold text |
|
|
Extra bold text |
|
|
Maximum boldness |
Example: Font Weights
<!DOCTYPE html>
<html>
<head>
<title>Font Weight Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 space-y-4">
<p class="font-thin">
Thin Text
</p>
<p class="font-light">
Light Text
</p>
<p class="font-normal">
Normal Text
</p>
<p class="font-medium">
Medium Text
</p>
<p class="font-bold">
Bold Text
</p>
<p class="font-extrabold">
Extra Bold Text
</p>
<p class="font-black">
Black Text
</p>
</body>
</html>Body Classes
<body class="p-6 space-y-4">
p-6
Adds padding around the webpage.
space-y-4
Adds vertical spacing between paragraphs.
Without this class:
-
all text appears too close together.
Thin Text
<p class="font-thin">
font-thin
Creates very thin text.
Used for:
-
decorative text
-
light UI designs
Light Text
<p class="font-light">
font-light
Creates light-weight text.
Used for:
-
subtitles
-
secondary content
Normal Text
<p class="font-normal">
font-normal
Default text thickness.
Used for:
-
paragraph text
- normal content
Medium Text
<p class="font-medium">
font-medium
Slightly thicker than normal text.
Used for:
-
labels
-
section headings
Bold Text
<p class="font-bold">
font-bold
Creates bold text.
Used for:
-
headings
-
buttons
-
important content
Extra Bold Text
<p class="font-extrabold">
font-extrabold
Creates very bold text.
Used for:
-
banners
-
hero sections
Black Text
<p class="font-black">
font-black
Maximum text boldness.
Used for:
-
large titles
-
attention-grabbing headings
Font Weight Comparison
| Class | Typical Usage |
|---|---|
font-thin |
Decorative text |
font-light |
Secondary text |
font-normal |
Paragraphs |
font-medium |
Labels |
font-bold |
Headings |
font-extrabold |
Hero titles |
font-black |
Large banners |
Advantages of Font Weight Utilities
- Better readability
- Improved visual hierarchy
- Easy text emphasis
- Faster typography styling
- Modern UI appearance
Summary
In this topic, we learned how font weight utilities in Tailwind CSS control text thickness and improve typography design. We explored different font weight classes and understood their usage in headings, labels, subtitles, and paragraph content. Tailwind font weight utilities help create clean, readable, and visually organized user interfaces.
Keywords
Font Weight Utilities, font-bold, font-light, font-black, Typography, Text Thickness, Tailwind Font Weight, UI Design, Headings, Text Styling, Modern Web Design, Frontend Development.
