font-weight

font-weight es la propiedad CSS que controla el grosor de los trazos de los caracteres — lo que en tipografía se llama el “peso” de la fuente. Un peso mayor produce letras más gruesas y densas; un peso menor produce letras más finas y livianas. Esta variación tipográfica es fundamental para crear jerarquía visual: los títulos suelen ir en negrita, el cuerpo de texto en peso normal, y las notas de apoyo en peso ligero.

font-weight hereda por defecto: el valor se propaga a todos los hijos hasta que alguno lo sobreescriba. Esto significa que poner font-weight: bold en un contenedor hace que todo el texto dentro de ese contenedor sea negrita, a menos que algún hijo declare otro peso.

El gotcha central de font-weight es que el efecto visual depende de qué pesos tiene disponibles la fuente. Una tipografía como Arial o Georgia solo incluye dos pesos en la mayoría de sistemas: normal (400) y bold (700). Si declarás font-weight: 300, el navegador intenta encontrar el peso más cercano disponible en la fuente — generalmente 400. El número que declarás no inventa nuevos pesos: si la fuente no los tiene, no se muestran. Las web fonts con múltiples pesos (como Inter, Roboto o Lato) expanden esta posibilidad significativamente.

Cómo funciona

El navegador recibe el valor de font-weight, lo resuelve a un número del 1 al 1000 (aunque en la práctica se usa la escala 100–900), y busca la variante de la fuente más cercana a ese número. Si la fuente tiene esa variante exacta, la usa. Si no, aplica el algoritmo de resolución de peso de CSS: para pesos menores a 400 busca primero hacia abajo y luego hacia arriba; para pesos mayores a 500 busca primero hacia arriba y luego hacia abajo.

h1 { font-weight: 700; }   /* negrita */
h2 { font-weight: 600; }   /* semi-negrita, si la fuente lo tiene */
p  { font-weight: 400; }   /* normal */
.nota { font-weight: 300; } /* liviano, si la fuente lo tiene */

Sintaxis

selector {
  font-weight: <valor>;
}

Valores

Valores numéricos — 100 a 900

La escala numérica va de 100 (más fino) a 900 (más grueso), en incrementos de 100. Los nombres tipográficos que suelen asociarse a cada paso:

.titulo-liviano { font-weight: 300; }
.cuerpo         { font-weight: 400; }
.destacado      { font-weight: 600; }
.titulo-fuerte  { font-weight: 700; }
.display        { font-weight: 900; }

Cuándo usar: cuando la fuente tiene múltiples pesos disponibles (fuentes variables o web fonts con varias variantes). Para web-safe fonts en la mayoría de sistemas, solo 400 y 700 tienen efecto real.

normal — keyword equivalente a 400

normal es el valor inicial de font-weight y equivale exactamente a 400. Es el peso del texto de cuerpo en prácticamente cualquier diseño.

p { font-weight: normal; } /* idéntico a font-weight: 400 */

Se usa explícitamente para cancelar una herencia de peso mayor. Por ejemplo, si un contenedor tiene font-weight: 700 heredado y querés que un párrafo interno sea normal:

.contenedor { font-weight: 700; }
.contenedor p { font-weight: normal; } /* cancela la herencia */

Cuándo usar: para texto de cuerpo, o para restablecer explícitamente el peso normal en elementos que lo heredan.

bold — keyword equivalente a 700

bold equivale exactamente a 700. Es el peso de la negrita clásica y el más usado para títulos y énfasis visual.

h1, h2, h3 { font-weight: bold; } /* idéntico a 700 */
strong      { font-weight: bold; } /* el navegador aplica esto por defecto */

Cuándo usar: para títulos y elementos que deben destacar. En producción, 700 y bold son intercambiables; muchos prefieren el numérico para consistencia con el resto de la escala.

lighter — un peso menos que el heredado

lighter reduce el peso un paso relativo al valor heredado del padre, usando la escala del navegador:

• Si el padre es bold (700), lighter da 400.
• Si el padre es 400, lighter da 100.

.nota-dentro-bold { font-weight: lighter; } /* si el padre es 700 → 400 */

Cuándo usar: para crear variación relativa sin conocer el peso exacto del contexto. Uso nicho; en la mayoría de casos es más claro usar un valor numérico.

bolder — un peso más que el heredado

bolder aumenta el peso un paso relativo al heredado:

• Si el padre es 400, bolder da 700.
• Si el padre es 700, bolder da 900.

.cita { font-weight: bolder; } /* un paso más que el padre */

Cuándo usar: similar a lighter, para variación contextual. Preferí valores numéricos cuando sea posible.

Cuándo usar qué

Notas, gotchas e interacción

• Si la fuente no tiene ese peso, el navegador aplica el más cercano. Con Arial o Georgia, font-weight: 300 produce el mismo resultado que 400 porque esas fuentes no tienen variante Light. No es un bug: es el comportamiento definido en la especificación. Para usar la escala completa necesitás una fuente que la tenga.
• <strong> y <b> aplican font-weight: bold por defecto. Poner font-weight: 700 en CSS y usar <strong> logran el mismo efecto visual, pero tienen diferente semántica: <strong> indica importancia al contenido; font-weight es solo estilo. Podés cancelar la negrita de <strong> con CSS si necesitás, pero no cambies su semántica HTML por eso.
• font-weight hereda — y puede sorprender dentro de formularios. Los <input> y <button> no heredan font-weight en algunos navegadores. Si querés que compartan el peso del texto circundante, usá font-weight: inherit.
• Las fuentes variables permiten cualquier valor entre 1 y 1000. Con una fuente variable que declare un eje wght, podés poner font-weight: 350 o font-weight: 450 y obtener exactamente ese grosor intermedio. Estas fuentes también se documentan en CAT-21.
• Combinar font-weight con font-style: un elemento puede tener font-weight: 700; font-style: italic; (negrita itálica). Ambas propiedades son independientes. Ver font-style.

Vigente / legacy

font-weight está vigente desde CSS1. Los valores numéricos del 100 al 900 se formalizaron en CSS2. En CSS Fonts Level 4 se amplió el rango a cualquier número entre 1 y 1000 (para fuentes variables), pero la escala 100–900 sigue siendo la forma estándar de uso.

No hay forma legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección La fuente: family, size, weight, style.