🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS font-weight

Control the thickness of your typography. Learn keywords, numeric values, and variable font weights.

style.css
.heading {
font-weight: bold;
}
.caption {
font-weight: 100;
}
Bold
Thin
font-weight.html
1 / 8
⚖️

Tutor:The `font-weight` property sets how thick or thin characters in text should be displayed. It's crucial for visual hierarchy.


Typography Mastery

Unlock nodes by mastering font weights and values.

Concept 1: Keywords

CSS provides standard keywords like normal and bold. These map to numeric values 400 and 700 respectively.

System Check

Which keyword typically maps to a weight of 700?

Community Holo-Net

Share Font Pairs

Found a perfect heading/body weight combo? Share your findings.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Font Weight

Author

Pascual Vila

Frontend Instructor.

The font-weight property controls the thickness or boldness of the font. It accepts both keywords and numeric values to define how characters are displayed.

Keywords vs Numbers

You can use keywords like normal (400) and bold (700). However, for more precision, numeric values from 100 to 900 are available, assuming the font family supports them.

Common Values

  • 100: Thin / Hairline
  • 300: Light
  • 400: Normal (Default)
  • 700: Bold
  • 900: Black / Heavy

Variable Fonts

With modern variable fonts, font-weight isn't limited to steps of 100. You can set values like 550 or 125 for granular control over the typography weight.

Accessibility

While increasing weight helps emphasis, ensure that lighter weights (like 100 or 200) maintain enough contrast against the background to be readable.

Typography Glossary

font-weight
CSS property that sets the weight (or boldness) of the font.
Normal
The default weight of a font, numerically mapped to 400.
Bold
A heavier weight used for emphasis, numerically mapped to 700.
Variable Font
A font file format that stores a continuous range of design variants, allowing for arbitrary weight values.