Definir el grosor de letra con font-weight en CSS

En ocasiones necesitamos definir diferentes grosores de letra (con font-weight CSS) para hacer efectos más vistosos. Dependiendo del navegador en el que estemos, puede que no veamos la diferencia, ya que algunos navegadores sólo permiten usar únicamente 3 tipos de negrita.

font-weight css para definir escala de grosor de letra:

Definir diferentes grosores de letra, puede ser algo sumamente útil para resaltar diferentes niveles de títulos, negritas… Desgraciadamente en muchos tipos de letra, no se aprecia la diferencia.

Los valores que se pueden indicar son:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

  • normal
    Es el grosor por defecto, se corresponde con el valor 400.
  • bold
    Negrita, se corresponde con el valor 700.
  • bolder
    Es más grueso que bold.
  •  lighter
    Es la versión más delgada.
  • 100 – 900
    Los valores que se pueden indicar van desde 100 (más delgado) a 900 (más grueso)
  • inherit
    El elemento al que se aplica hereda el mismo font-weight que su padre, es decir hereda el font-weight.

Ejemplo:

<h1 style="font-weight:900;">CSS Grosor de 900 en título 1</h1>

<h1 style="font-weight:500;">CSS Grosor de 500 en título 1</h1>

<h1 style="font-weight:100;">CSS Grosor de 100 en título 1</h1>

<p style="font-weight: 900;">Párrafo (weight 900).</p>
<p style="font-weight: 500;">Párrafo (weight 500).</p>
<p style="font-weight: 300;">Párrafo (weight 300).</p>

Resultado:

CSS Grosor de 900 en título 1

CSS Grosor de 500 en título 1

CSS Grosor de 100 en título 1

Párrafo (weight 900).

Párrafo (weight 500).

Párrafo (weight 300).