Retour au cours

Lesson 29: Font Weight and Style (font-weight, font-style)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

29. Font Weight and Style

These properties control the boldness and italicization of text.

Font Weight (font-weight)

This property defines how thick or thin characters in the text should be displayed. It can take keywords or numerical values.

Keywords:

  • normal (usually equivalent to 400)
  • bold (usually equivalent to 700)
  • lighter (relative to parent)
  • bolder (relative to parent)

Numerical Values (100 to 900):

Font families typically support the following standard weights:

ValueWeight Name
100Thin/Hairline
400Normal/Regular
700Bold
900Black/Heavy

css .main-heading { font-weight: 700; }

.thin-text { font-weight: 200; /* Only works if the font file includes this weight! */ }

Critical Note: The numerical weight you set will only work if the corresponding font file for that weight was loaded via @font-face or Google Fonts. If you request 200 but only loaded 400 and 700, the browser might default to 400.

Font Style (font-style)

This property sets the style of the font, usually for italic text.

  • normal
  • italic (uses the specialized italic version of the font, if available)
  • oblique (browser artificially slants the regular font)

css blockquote { font-style: italic; }