font-weight

Font-weight controls text thickness from thin to bold. Use numeric values (100-900) or named keywords (normal, bold). Different weights convey hierarchy and emphasis.

Font Weight Values

Value	Name	Use
100	Thin	Decorative, light text
400	Normal	Body text (default)
500	Medium	Emphasis
700	Bold	Emphasis, headings
900	Black	Strong emphasis

CSS

/* Named weights */
.normal {
  font-weight: normal;  /* 400 */
}

.bold {
  font-weight: bold;    /* 700 */
}

/* Numeric weights */
.thin {
  font-weight: 100;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.semibold {
  font-weight: 600;
}

.black {
  font-weight: 900;
}

Typography Hierarchy

CSS

/* Heading hierarchy with weight */
h1 {
  font-size: 2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Emphasis in body */
body {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* Button weight */
button {
  font-weight: 600;
}

Note

Font-weight conveys hierarchy and emphasis. Use 400 for body text, 700 for headings, and intermediate weights for nuance.

Line height: [line-height](/css/line-height).