Propiedad font-weight

DefiniciónEstablece el grosor de cada letra
Valores
permitidos
Uno y sólo uno de los siguientes valores:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • inherit
Valor inicialnormal
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/fonts.html#propdef-font-weight

Ejemplos de uso

La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto. Normalmente, la propiedad font-weight se emplea para mostrar un texto en negrita (valor bold):

<p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>.

El otro uso habitual de la propiedad font-weight es el de mostrar con un estilo normal un texto que originalmente se mostraba en negrita, como por ejemplo la etiqueta <strong> de HTML:

<strong>Esta es una etiqueta <strong> con el estilo por defecto<strong>
<strong style="font-weight: normal">Esta es una etiqueta <strong> a la que se le ha quitado la negrita</strong>

Además de los valores bold y normal, la propiedad font-style define los valores relativos lighter más delgado) y bolder más grueso). La referencia que se toma para hacer la letra más o menos gruesa es el grosor heredado desde el elemento contenedor.

En el siguiente ejemplo, se muestran los diferentes resultados que producen los valores lighter y bolder en función del grosor de la letra del elemento contenedor:

<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer adipiscing elit.</span></p>.

<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer adipiscing elit.</span></p>.

<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer adipiscing elit.</span></p>.

<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer adipiscing elit.</span></p>.

En el ejemplo anterior, los navegadores determinan el grosor de la letra del elemento contenedor (en este caso, el párrafo) y aumentan (bolder) o disminuyen (lighter) su grosor en el elemento interior (en este caso, el <span>). En realidad, esto es sólo la explicación teórica de lo que deberían hacer los navegadores, ya que en la práctica los resultados son muy diferentes.

El principal problema de la propiedad font-weight es que casi ningún tipo de letra utilizado por los usuarios normales dispone de varios grosores diferentes. De hecho, la mayoría de sus fuentes sólo disponen de estilo normal (valor normal) y estilo negrita (valor bold). Por lo tanto, hasta que todos los tipos de letra no incorporen varios grosores diferentes, los valores bolder y lighter carecen de utilidad práctica.

Además, las fuentes que disponen de muchos grosores diferentes, utilizan una nomenclatura que no es estándar y que por tanto, varía de un fuente a otra. Si se toma por ejemplo un grosor que parece negrita, el nombre de ese grosor puede ser bold, regular, roman, medium, semiblod o black dependiendo del tipo de letra.

Por ese motivo, la propiedad font-weight no utiliza palabras para referirse a cada grosor, sino que define nueve valores numéricos que van desde el 100 hasta el 900. El valor normal corresponde al valor numérico 400 y el valor bold corresponde al valor numérico 700.

El estándar de CSS 2.1 explica que cada valor numérico indica que ese grosor es al menos tan grueso como el anterior valor numérico. En el siguiente ejemplo se muestran nueve párrafos con distintos grosores, aunque en la práctica los navegadores sólo muestran dos grosores diferentes:

<p style="font-weight: 100;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 200;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 300;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 500;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 600;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 700;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 800;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

<p style="font-weight: 900;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.

Cuando un tipo de letra sólo dispone del estilo normal y del estilo negrita, los valores numéricos 100, 200, 300, 400 y 500 corresponden al estilo normal y los valores numéricos 600, 700, 800 y 900 corresponden al estilo en negrita.

La correspondencia entre los grosores definidos por cada tipo de letra y los valores numéricos de la propiedad font-weight dependen de cada navegador. No obstante, se aplican algunas reglas generales como las siguientes:

  • Si la fuente define una escala numérica de grosores con los nueve valores (como por ejemplo las fuentes de tipo OpenType) se utilizan directamente esos valores.
  • Si la fuente dispone de un tipo de letra llamado Medium y otro tipo llamado Book, Regular, Roman o Normal, el estilo Medium se asigna al valor numérico 500.
  • El estilo Bold normalmente corresponde al valor numérico 700.
  • Si la fuente tiene menos de nueve grosores diferentes, se asignan los valores numéricos que faltan siguiendo el algoritmo que se explica a continuación:
    • Si el valor 500 no se ha asignado, se asigna al mismo estilo que el valor 400
    • Si los valores 600, 700, 800 y 900 no se han asignado, se asignan al siguiente grosor disponible (normalmente equivalente al valor bold). Si no se dispone de ningún otro grosor, se asignan al estilo correspondiente al grosor anterior (normalmente equivalente al valor normal).
    • Si los valores 100, 200 y 300 no se han asignado, se asignan al anterior grosor disponible. Si no se dispone de un grosor anterior, se asignan al grosor siguiente.

Si por ejemplo se dispone de un tipo de letra con cuatro grosores:

Tipo de letra Tamaño asignado Tamaños adicionales asignados
NombreDeTipoLetra Regular 400 100, 200, 300
NombreDeTipoLetra Medium 500 -
NombreDeTipoLetra Bold 700 600
NombreDeTipoLetra Heavy 800 900

Si por ejemplo se dispone de un tipo de letra con seis grosores:

Tipo de letra Tamaño asignado Tamaños adicionales asignados
NombreDeTipoLetra Book 400 100, 200, 300
NombreDeTipoLetra Medium 500 -
NombreDeTipoLetra Bold 700 600
NombreDeTipoLetra Heavy 800 -
NombreDeTipoLetra Black 900 -
NombreDeTipoLetra ExtraBlack - -

La propiedad font-weight es una de las propiedades más infrautilizadas de CSS. Las limitaciones de los navegadores y de las fuentes que utilizan los usuarios normales, impiden un correcto funcionamiento más allá de los valores normal y bold.