Grosor de fuente: font-weight.

font-weight es la propiedad de CSS que permite cambiar el grosor de la letra y sus valores son de tipo numérico o de cadena (texto).

Es importante tener en cuenta que el valor en números no lleva ningún tipo de unidad de medida y que normalmente es 100, 200, 300, 400, 500, 600, 700, 800 y 900.

El siguiente es un ejemplo sencillo del uso de la propiedad font-weight en CSS:

<html>

   <head>

       <style type="text/css">

            .miLetra {

                font-weight: 700;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miLetra">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miLetra (<p class="miLetra">) y un CSS que apunta a este con la propiedad font-weight y el valor 700 que se ve tipo negrilla.

Para que esto funcione es necesario que el tipo de letra que se utilice tenga esta propiedad, es decir, un tipo de letra que no tiene un estilo 100, 200 o 300 se va a ver igual aunque pongamos estos 3 valores.

En el siguiente ejemplo aplicaremos la propiedad font-weight a 4 parrafos distintos con 4 grosores distintos:

<html>

   <head>

       <style type="text/css">

            .parrafo1 {

                font-weight: 100;

            }

            .parrafo2 {

                font-weight: 300;

            }

            .parrafo3 {

                font-weight: 500;

            }

            .parrafo4 {

                font-weight: 700;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="parrafo1">Mi parrafo 1</p>

                <p class="parrafo2">Mi parrafo 2</p>

                <p class="parrafo3">Mi parrafo 3</p>

                <p class="parrafo4">Mi parrafo 4</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Mi parrafo 1

Mi parrafo 2

Mi parrafo 3

Mi parrafo 4

Como se puede ver, a pesar de tener varios grosores de letra en el CSS (100, 300, 500 y 700) la letra se hace negrilla sólo cuando se marca con 700 y eso se debe a que este tipo de letra no posee los otro niveles (100, 300 y 500).

Tambien tenemos un valor de tipo cadena que se puede aplicar con los siguientes valores:

  • lighter
  • normal
  • bold
  • bolder

El siguiente es un ejemplo sencillo del uso de la propiedad font-weight con valor de cadena:

<html>

   <head>

       <style type="text/css">

            .miLetra {

                font-weight: bold;

            }

        </style>

   </head>

   <body>

        <section>

                <p class="miLetra">Texto de muestra</p>

        <section>

   </body>

</html>

El resultado es el siguiente:

Texto de muestra

Como se puede ver en las zonas resaltadas tenemos un parrafo con la clase miLetra (<p class="miLetra">) y un CSS que apunta a este con la propiedad font-weight y el valor bold que se ve tipo negrilla.

Conclusiones:

  • No todos los valores posibles para font-weight tienen un impacto en el tipo de letra.
  • Es preferible utilizar font-weight en vez de la etiqueta <strong> ya que el CSS puede modificarse según el dispositivo mientras que la etiqueta no.