Tipografía: Grosor (o anchura) de letra (font-weight)

Una vez indicado el tipo y el tamaño de letra, es habitual modificar otras características como su grosor (texto en negrita) y su estilo (texto en cursiva). La propiedad que controla la anchura de la letra es font-weight.

Dicha propiedad puede tomar valores numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900) o palabras clave (normal, bold, bolder, lighter)

Los valores que normalmente se utilizan son "normal" (el valor por defecto) y bold para los textos en negrita.

El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.

Sirva el siguiente ejemplo para estudiar el comportamiento de la propiedad font-weight y cómo es tratada por los navegadores:

Por defecto, los navegadores muestran el texto de los elementos <em> en cursiva y el texto de los elementos <strong> en negrita. El código siguiente muestra como se altera ese aspecto mediante font-weight; <em> se mostrará como cursiva en negrita y <strong> dejará de ser negrita y se le aplicará un fondo amarillo:

#especial em {
font-weight: bold;
}
#especial strong {
font-weight: normal;
background-color: #FFFF66;
padding: 2px;

}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut in
purus ac <em>libero nonummy vestibulum</em>. Nullam molestie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</strong>, quis hendrerit
libero lorem vitae nunc.</p> <p id="especial">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut in purus ac <em>libero nonummy vestibulum</em>. Nullam molestie, nunc id
nonummy laoreet, <strong>tortor diam mollis elit</strong>, quis hendrerit
libero lorem vitae nunc.</p>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO