Currently Empty: ₹0.00
CSS Font Weight
CSS CODES & EXAMPLES
CSS Font Weight
Learn how to control the thickness and emphasis of text using
the CSS font-weight property.
01
What is font-weight?
Control the thickness of text
The CSS font-weight property controls how thick or
thin characters appear on a webpage.
Syntax:
font-weight: value;
02
Normal Font Weight
Regular text thickness
The normal value normally corresponds to a font weight
of 400.
normal.css
p {
font-weight: normal;
}This is normal weight text.
03
Bold Font Weight
Strong and emphasized text
The bold value normally corresponds to a font weight
of 700.
bold.css
p {
font-weight: bold;
}This is bold text.
04
Numeric Font Weight
Use values from 100 to 900
CSS also allows numeric font weights. Common values include
100, 300, 400,
500, 600, 700,
800 and 900.
numeric-weight.css
.light {
font-weight: 300;
}
.medium {
font-weight: 500;
}
.semibold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
05
Font Weight Scale
See different levels of thickness
100
Computer Education
200
Computer Education
300
Computer Education
400
Computer Education
500
Computer Education
600
Computer Education
700
Computer Education
800
Computer Education
900
Computer Education
Important:
The exact appearance of a numeric weight depends on the font.
If a font does not provide a particular weight, the browser may
use a nearby available weight.
06
Font Weight with Headings
Create a clear visual hierarchy
heading-weight.css
h1 {
font-weight: 800;
}
h2 {
font-weight: 700;
}
p {
font-weight: 400;
}
07
Font Weight with Classes
Reusable typography styles
classes.css
.text-light {
font-weight: 300;
}
.text-normal {
font-weight: 400;
}
.text-medium {
font-weight: 500;
}
.text-semibold {
font-weight: 600;
}
.text-bold {
font-weight: 700;
}Light Text — 300
Normal Text — 400
Medium Text — 500
Semi Bold Text — 600
Bold Text — 700
08
Font Weight with Buttons
Improve button emphasis
button-weight.css
button {
font-weight: 600;
}
.primary-button {
font-weight: 700;
}
09
Font Weight with Cards
Practical website design exampleDiploma in Computer Application
Build practical computer skills for education and career growth.
Learn More →Certificate in Tally
Learn accounting fundamentals and practical Tally skills.
Learn More →
10
Font Weight on Hover
Interactive typography
hover-weight.css
.hover-text {
font-weight: 400;
transition: 0.2s;
}
.hover-text:hover {
font-weight: 700;
}Move your mouse over this text.
11
Font Weight with Font Style
Combine typography properties
font-style-weight.css
.important-text {
font-style: italic;
font-weight: 700;
}Important information for students.
12
Font Weight with Text Color
Use weight and color together
Primary
Important Heading
Secondary
Supporting Information
Regular
Normal Paragraph
13
Font Weight with Navigation
Make menu items easier to scan
navigation.css
nav a {
font-weight: 600;
}
nav a:hover {
font-weight: 700;
}
14
Font Weight with CSS Variable
Reusable design-system value
variable.css
:root {
--heading-weight: 700;
--body-weight: 400;
}
h1 {
font-weight: var(--heading-weight);
}
p {
font-weight: var(--body-weight);
}
15
Common Font Weight Values
Quick reference100
Thin300
Light400
Normal500
Medium600
Semi Bold700
Bold800
Extra Bold900
Black / Heavy
16
Practice Task
Test your CSS skills🎯 Your Challenge
Create a course card using different font weights.
- Use
800for the main heading. - Use
600for the course title. - Use
400for the description. - Use
700for the button. - Add a hover effect that increases the text weight.
17
CSS Font Weight Live Runner
Experiment with font-weight values
LIVE PREVIEW