Example:

.normal-text {
  font-weight: normal;
}

Example:

.bold-text {
  font-weight: bold;
}

Example:

.parent {
  font-weight: 400;
}

.bolder-child {
  font-weight: bolder; /* Becomes 700 */
}

.lighter-child {
  font-weight: lighter; /* Becomes 300 */
}

Font-Weight Scale Demonstration:

Practical Example:

.thin-text { font-weight: 300; }
.normal-text { font-weight: 400; }
.medium-text { font-weight: 500; }
.bold-text { font-weight: 700; }
.extra-bold { font-weight: 800; }

Try Different Font Weights:

Font Family Comparison:

.arial-font {
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.georgia-font {
  font-family: Georgia, serif;
  font-weight: 700;
}

.system-font {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
}

Variable Font Example:

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

.variable-font {
  font-family: 'Inter', sans-serif;
  font-weight: 350; /* Any value between 100-900 */
}

Browser Behavior:

• If a specific numeric weight isn’t available, browsers use the closest available weight
• Values 100-500 generally map to normal (400) if unavailable
• Values 600-900 typically map to bold (700) if unavailable
• Always provide fallback font stacks for consistent rendering

Hierarchical Design Example:

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 500; }
p { font-weight: 400; }
.subtitle { font-weight: 300; }

Accessibility Tips:

• Avoid using only font-weight to convey important information
• Test font-weight combinations with screen readers
• Ensure sufficient color contrast with lighter font weights
• Consider users who may have difficulty distinguishing subtle weight differences

Navigation Example:

.nav-link {
  font-weight: 500;
  transition: font-weight 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  font-weight: 700;
}

Button Weight Examples:

.btn-primary { font-weight: 600; }
.btn-secondary { font-weight: 400; }
.btn-outline { font-weight: 500; }

Performance Tips:

• Load only the font weights you actually use
• Use font-display: swap for better loading performance
• Consider system fonts for better performance
• Preload critical font files
• Use variable fonts when you need multiple weights

Dynamic Font Weights:

:root {
  --heading-weight: 700;
  --body-weight: 400;
  --accent-weight: 600;
}

.heading { font-weight: var(--heading-weight); }
.body { font-weight: var(--body-weight); }
.accent { font-weight: var(--accent-weight); }

@media (max-width: 768px) {
  :root {
    --heading-weight: 600;
    --accent-weight: 500;
  }
}

Animated Font Weight:

.animated-text {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.animated-text:hover {
  font-weight: 700;
}

Font Weight Not Working?

• Check font availability: Ensure the font family supports the desired weight
• Verify font loading: Make sure web fonts are properly loaded
• Browser rendering: Some browsers may not support all numeric values
• CSS specificity: Check if other styles are overriding your font-weight

Key Takeaways:

• Use numeric values (100-900) for precise control
• Keyword values (normal, bold) work across all browsers
• Variable fonts offer unlimited weight possibilities
• Always consider performance and accessibility
• Test font-weight across different devices and browsers