Docs ejecutables de CSS: Font-weight

Q: ¿Cómo pongo texto en negrita con CSS?

Usa font-weight: bold; o el número equivalente font-weight: 700; en el elemento. Para quitar la negrita de un título o de un , define font-weight: normal; (400).

Q: ¿font-weight bold es lo mismo que 700?

Sí. bold se calcula como 700 y normal como 400, así que las dos formas se ven exactamente igual.

Q: ¿Uso font-weight en CSS o la etiqueta ?

Usa cuando las palabras son importantes, para texto que solo tiene un estilo distinto y font-weight para el diseño visual, como botones, etiquetas y títulos. Las etiquetas tienen significado; la propiedad es solo apariencia.

Cómo poner texto en negrita con CSS

font-weight define qué tan gruesas son las letras. bold (lo mismo que 700) pone el texto en negrita, y normal (lo mismo que 400) es el texto regular.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Los títulos, <th>,  y  están en negrita por defecto por la hoja de estilo propia del navegador, así que font-weight: normal es la forma de quitar la negrita. Para saber cuándo usar  o  en el propio HTML, consulta negrita en HTML.

La escala numérica: de 100 a 900

Los números tienen nombres estándar que siguen las familias tipográficas:

Valor	Nombre habitual
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Cualquier número del 1 al 1000 es válido, así que 450 y 650 también están permitidos. Que veas una diferencia depende de la fuente: el navegador solo puede dibujar los pesos que la fuente realmente tiene.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui es la fuente de la interfaz del sistema operativo, que suele incluir muchos pesos. Si todas las líneas de arriba se ven como uno de dos pesos, la fuente de tu sistema solo tiene regular y bold.

Por qué un peso no muestra ningún cambio

Una fuente es un conjunto de archivos, a menudo uno por peso. Cuando falta el peso exacto, el navegador elige el más cercano que tiene:

Para 500, prueba 500, luego pesos más finos y luego más gruesos.
Para 600 y más, prueba primero pesos más gruesos y luego más finos.
Si no hay ningún archivo en negrita, la mayoría de los navegadores la simulan engrosando las letras regulares (negrita sintética).

Compara una fuente con muchos pesos con serif, que en la mayoría de los sistemas solo tiene regular y bold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

En la columna serif, 300 y 500 suelen caer en la versión regular y 600 en la negrita. Esa es la respuesta a la mayoría de las preguntas de "font-weight no funciona": el CSS está bien, a la fuente le falta el peso. Una fuente variable (un solo archivo con un eje de peso) dibuja con suavidad cualquier valor dentro de su rango de pesos.

bolder y lighter

bolder y lighter son relativos al peso que hereda el elemento. Saltan al siguiente grupo de pesos en lugar de sumar una cantidad fija:

Peso del padre	`bolder` da	`lighter` da
100 a 349	400	100
350 a 549	700	100
550 a 749	900	400
750 a 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Patrón real: una escala de pesos en variables

Elige tres o cuatro pesos para todo el sitio y ponles nombre, en lugar de repartir números:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Errores comunes

Esperar que cada número se vea distinto. Solo se distinguen los pesos que contiene la fuente.
Usar  para el texto de un botón. Da estilo al botón con font-weight; deja  y  para el texto.
Poner el número entre comillas. font-weight: "700" es inválido y se ignora. Escribe font-weight: 700.
Negrita para enfatizar en todas partes. Cuando todo está en negrita, nada destaca. Deja el texto del cuerpo en 400.
Pesos finos para texto pequeño. De 100 a 300 en tamaños pequeños es difícil de leer, sobre todo con fondos de poco contraste.

Preguntas frecuentes

¿Cómo pongo texto en negrita con CSS?

Usa font-weight: bold; o el número equivalente font-weight: 700; en el elemento. Para quitar la negrita de un título o de un , define font-weight: normal; (400).

¿Cuáles son los valores de font-weight?

Números del 1 al 1000, normalmente escritos en centenas: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. Las palabras clave normal y bold son 400 y 700, y bolder y lighter son relativas al padre.

¿font-weight bold es lo mismo que 700?

Sí. bold se calcula como 700 y normal como 400, así que las dos formas se ven exactamente igual.

¿Por qué font-weight 500 o 600 se ven igual que normal o bold?

La fuente no tiene ese peso. Cuando una fuente solo incluye 400 y 700, el navegador elige el archivo disponible más cercano, así que 500 se ve como 400 y 600 como 700. Carga una fuente con más pesos o una fuente variable.

¿Uso font-weight en CSS o la etiqueta ?

Usa  cuando las palabras son importantes,  para texto que solo tiene un estilo distinto y font-weight para el diseño visual, como botones, etiquetas y títulos. Las etiquetas tienen significado; la propiedad es solo apariencia.

Conceptos relacionados