¿Qué controla la propiedad 'font-weight' en CSS?

Controlando el grosor de la fuente con la propiedad 'font-weight' en CSS

La propiedad 'font-weight' en CSS se utiliza para controlar el grosor de la fuente de un elemento de texto específico en una página web. Esta propiedad puede tomar numerosos valores, que van desde 'normal' y 'bold' hasta valores numéricos específicos que oscilan entre 100 y 900, con 100 siendo el grosor más delgado y 900 el más grueso.

Por ejemplo, si quisiéramos darle a un elemento de texto un grosor de fuente especialmente grueso, podríamos hacerlo con el siguiente código en CSS:

h1 {
  font-weight: 900;
}

Este código le dará a todos los elementos <h1> en la página web un aspecto muy grueso y prominente. Esto podría ser útil para los encabezados de secciones que deseamos destacar.

Es valioso mencionar que el efecto de 'font-weight' puede variar ligeramente dependiendo de la fuente que se esté usando. No todas las fuentes tienen todos los pesos de la propiedad 'font-weight', por lo que algunos valores pueden no tener ningún efecto si la fuente no los soporta.

Es una mejor práctica usar pesos más altos con moderación para destacar elementos específicos que requieren atención extra, como títulos, subtítulos o puntos clave. Un uso excesivo de pesos de fuentes altos puede hacer que la página web parezca abarrotada o difíciles de leer.

Finalmente, otro consejo útil sería usar el valor 'bolder' o 'lighter'. 'bolder' aumenta el peso de la fuente relativo al peso del padre, mientras que 'lighter' hace lo opuesto. Estos valores pueden ser útiles cuando se está tratando de ajustar el peso de la fuente relativo a otros elementos en la página.

¿Te resulta útil?