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).

Definir el grosor de letra con font-weight en CSS