Propiedad CSS font-weight – Valores, consejos y ejemplos

La propiedad CSS font-weight establece qué tan negrita o grueso aparecen los caracteres de una fuente. Puedes especificar el peso con una palabra clave (normal, bold), una palabra clave relativa (bolder, lighter) o un valor numérico de 100 a 900.

Una tipografía generalmente incluye varios pesos distintos como archivos de fuente separados. El navegador solo puede renderizar los pesos que la fuente realmente proporciona. Muchas fuentes incluyen solo dos — normal (400) y bold (700) — por lo que solicitar font-weight: 300 puede ajustarse al peso disponible más cercano en lugar de dibujar una variante ligera real. Las fuentes variables son la excepción: incorporan un eje de peso continuo y pueden renderizar cualquier valor sin archivos separados.

Esta página cubre los valores de palabras clave y numéricos, cómo se resuelven bolder / lighter, la animación del peso y qué esperar cuando el peso solicitado no está disponible.

Valor inicial	normal
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	Sí.
Animable	Sí.
Versión	CSS1
Sintaxis DOM	`object.style.fontWeight = "bolder";`

Sintaxis

font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;

Valores

Valor	Descripción
`normal`	Peso predeterminado. Equivalente a `400`.
`bold`	Peso negrita. Equivalente a `700`.
`bolder`	Un paso más pesado que el peso calculado del elemento padre (ver tabla a continuación).
`lighter`	Un paso más ligero que el peso calculado del elemento padre (ver tabla a continuación).
`100`–`900`	Peso numérico en pasos de 100 — del más delgado (100) al más pesado (900).
`initial`	Restablece al valor inicial de la propiedad (`normal`).
`inherit`	Hereda el peso calculado del elemento padre.

Ejemplo básico

El ejemplo a continuación aplica bolder a un párrafo para que aparezca más pesado que el texto del cuerpo circundante.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Todos los valores de palabras clave y numéricos

El ejemplo a continuación coloca cada valor principal uno al lado del otro para que puedas compararlos visualmente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Pruébalo tú mismo »

La escala de peso numérico

Los valores numéricos van de 100 (el más delgado) a 900 (el más grueso) en pasos de 100. Cada paso tiene un nombre convencional utilizado por los diseñadores tipográficos:

Valor	Nombre común
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

normal corresponde a 400 y bold corresponde a 700, por lo que esos pares de palabras clave y números siempre son intercambiables. Usa un valor numérico cuando necesites un control más fino — por ejemplo, font-weight: 500 da un encabezado "medio" que es más pesado que el texto del cuerpo pero más ligero que un encabezado completamente en negrita.

Cuando la fuente no tiene el peso solicitado

Si la fuente no proporciona el peso exacto que solicitas, el navegador recurre al peso más cercano disponible. Por eso font-weight: 100 y font-weight: 300 pueden verse idénticos cuando la fuente solo incluye 400 (Regular) y 700 (Bold). Siempre carga o declara los pesos específicos que usa tu diseño — consulta @font-face y font-display para saber cómo hacerlo eficientemente.

Cómo se resuelven bolder y lighter

bolder y lighter son relativos al peso heredado del elemento padre. No simplemente suman o restan 100. En cambio, el navegador asigna el peso calculado del padre a una escala más gruesa de tres niveles antes de aplicar el paso:

Peso heredado	`bolder` se convierte en	`lighter` se convierte en
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Esto significa que anidar dos elementos bolder no se vuelve indefinidamente más pesado — una vez que se llega a 900, se queda ahí.

<!DOCTYPE html>
<html>
  <head>
    <title>bolder resolution example</title>
    <style>
      .parent {
        font-weight: 400; /* normal */
      }
      .child {
        font-weight: bolder; /* resolves to 700 */
      }
      .grandchild {
        font-weight: bolder; /* resolves to 900, then stops */
      }
    </style>
  </head>
  <body>
    <p class="parent">
      Parent at normal (400).
      <span class="child">
        Child becomes bold (700).
        <span class="grandchild">Grandchild becomes black (900).</span>
      </span>
    </p>
  </body>
</html>

Animando font-weight

font-weight es animable, por lo que puedes hacer transiciones entre pesos de forma fluida con transiciones CSS o animaciones. La interpolación suave solo funciona con fuentes variables, porque las fuentes estáticas solo tienen archivos de peso discretos. En una fuente estática, el navegador se ajusta al peso disponible más cercano en el punto medio de la transición.

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

.heading:hover {
  font-weight: 700;
}

Para cambios de peso continuos y suaves — por ejemplo, un efecto hover que va de fino a negrita — usa una fuente variable con la propiedad font-variation-settings:

.heading {
  /* "wght" is the weight axis on variable fonts */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: "wght" 700;
}

Consejos y accesibilidad

Carga los pesos que uses. Al obtener fuentes de Google Fonts u otro servicio, solicita cada peso explícitamente en la URL o el descriptor @font-face. Si un peso no está cargado, el navegador sintetiza una negrita falsa que a menudo es de menor calidad que la variante real.
No uses el peso solo para transmitir significado. El texto en negrita es solo una señal visual. Para texto que debe transmitir importancia semántica, usa <strong> (que lleva font-weight: bold de forma predeterminada) para que las tecnologías de asistencia puedan comunicar el énfasis.
Vigila el contraste en pesos ligeros. Los pesos 100–300 reducen el grosor del trazo y pueden quedar por debajo de los umbrales de contraste WCAG, especialmente en tamaños pequeños y sobre fondos de colores. Verifica las relaciones de contraste con la herramienta de selección de color y mantén el texto del cuerpo en 400 o más pesado.
Prefiere valores numéricos en sistemas de diseño. Las palabras clave como bold son imprecisas. Usar 700 hace que la intención sea explícita y más fácil de auditar.

Propiedades relacionadas

font — abreviatura que establece font-weight junto con el estilo, tamaño y familia en una sola declaración.
font-style — controla las variantes cursiva y oblicua.
font-size — establece el tamaño del texto.
font-family — elige qué tipografía se usa.
@font-face — declara fuentes personalizadas y sus rangos de peso disponibles.
font-display — controla cómo el navegador renderiza el texto mientras se carga una fuente personalizada.

Práctica

¿Qué controla la propiedad CSS 'font-weight'?

Especifica el peso o grosor de la fuente.Especifica el estilo de la fuente.Establece cómo se dibujan los extremos de las líneas cuando las fuentes están delineadas.Determina si el texto se presenta en peso negrita o normal.Determina el ancho de las tabulaciones en el texto.

Peso heredado	`bolder` se convierte en	`lighter` se convierte en
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso heredado	`bolder` se convierte en	`lighter` se convierte en
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Peso heredado	`bolder` se convierte en	`lighter` se convierte en
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700