Propiedad 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):

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:

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:

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:

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:

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

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.