CSS es una poderosa herramienta para desarrolladores web. Esta te permite darle estilo y formato a tu contenido HTML de varias formas.

Una de las formas más conocidas con la que podemos colocar texto en negrita es usando la propiedad font-weight. El texto en negrita añade énfasis a información clave, crea contraste visual y mejora la legibilidad del contenido.

En este artículo, aprenderás como usar CSS para darle énfasis a texto en HTML usando la propiedad font-weight. Ya sea que seas un principiante o un desarrollador experimentado, este artículo te proporcionará una guía completa para crear texto en negrita en su HTML utilizando CSS.

Sobre la propiedad font-weight

La propiedad font-weight es una propiedad de CSS usada para definir el "peso" o grosor de una fuente. Determina el grado de negrita o luminosidad del texto, y los valores más altos indican un peso de fuente más negrita.

Esta propiedad acepta varios valores, incluyendo algunos de tipo numérico y también algunas palabras clave.

En el caso de los valores numéricos tenemos un rango de 100 a 900 con incrementos de 100 (e.g. 100, 200, 300, ..., 900) entré más alto el valor, más gruesa será la fuente. Un valor de 400 es considerado «normal», mientras que un valor de 700 se considera «en negrita». Algunas de las palabras clave que podemos usar también son bold, bolder, lighter, y normal.

Cómo crear texto en negrita usando CSS

Crear texto en negrita en HTML con CSS es un proceso sencillo que se puede lograr de varias maneras. Se puede optar por utilizar cualquier forma de estilo, como en línea (con la etiqueta style), interno (definiendo los estilos dentro de las etiquetas <style></style> o externo (importando una hoja de estilos con la etiqueta <link /> desde un archivo .css). Veamos cada una de las opciones:

Con estilos en línea

Podemos usar los estilos en línea para aplicar directamente la propiedad font-weight directamente al elemento HTML, por ejemplo:

<p style="font-weight: bold;">Este es un texto en negrita</p>

Sin embargo, los estilos en línea pueden hacer que tu código HTML luzca desordenado y difícil de mantener, especialmente cuando tenemos varios elementos que requieren los mismos estilos.

Con estilos internos

Los estilos internos te permite aplicar estilos de CSS dentro de la sección head, por ejemplo:

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Este es un texto en negrita</p>
</body>

Este método es útil cuando estamos aplicando los mismos estilos a múltiples elementos en una misma página.

Con estilos externos

Usar estilos externos requiere crear un archivo CSS aparte y referenciar desde nuestro html usando la etiqueta link, por ejemplo:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

El archivo CSS tendrá entonces todos los estilos que queramos para nuestro HTML y podremos cambiarlos sin necesidad de cambiar el código HTML.

p {
  font-weight: bold;
}

Mejores prácticas a la hora de usar texto en negrita en HTML

Ya que el texto en negrita puede ayudarnos a poner énfasis en cierta información, es esencial seguir las mejores prácticas para asegurarnos que el texto se mantiene legible y accesible.

Estas son algunas de las mejores prácticas para usar texto en negrita en tu código HTML:

Escogiendo el grosor correcto: Cuando usamos texto en negrita, es esencial escoger el grosor adecuado para asegurarnos que nuestro texto sigue siendo fácil de leer.

Mientras que una fuente con más grosor puede ser propicia para encabezados, una fuente más ligera sería apropiada para cuerpos de texto grandes. Es importante asegurarnos que el texto en negrita no se repita constantemente ya que puede ser abrumador y restar valor a otros elementos de la página.

Balanceando el texto en negrita con otros formatos: Mientras que el texto en negrita puede ser una forma provechosa de llamar la atención hacia información importante, es importante también saber balancear junto con otros estilos de formato para crear un sistema de jerarquía visual.

Usando otros estilos como cursivas, subrayado o incluso un color diferente puede darle a tu texto distintos niveles de importancia.

Evita el abuso del texto en negrita: Abusar del texto en negrita puede hacer que el contenido sea difícil de leer y reste diseño al resto de tu página.

Es importante usar el texto en negrita en proporciones escasas, sólo cuando este es realmente necesario y para enfatizar información importante. Evita usar el texto en negrita para párrafos enteros o bloques de texto, ya que esto puede dificultar la lectura a los usuarios y hace indistinguible la información importante del contenido regular.

Realiza pruebas de accesibilidad: Al momento de usar texto en negrita, es esencial asegurarnos de que este es accesible a todo los usuarios, incluyendo aquellos que poseen dificultades visuales.

Los lectores de pantalla pueden tener dificultades para leer texto con mucho estilo, por lo que es importante probar la página utilizando herramientas de accesibilidad para garantizar que el texto en negrita tenga el formato adecuado y sea accesible.

Conclusión

Para concluir, usar texto en negrita en tu contenido HTML puede ayudarte con efectividad a darle énfasis a la información importante y crear una jerarquía visual en el texto.

Escoger el grosor correcto para tu contenido y saber balancear con otros estilos de formato, evitar el sobre uso y hacer pruebas de accesibilidad son los pasos necesarios para asegurarnos que nuestro contenido a la hora de usar texto en negrita se mantenga legible y accesible para todo los usuarios.

Gracias por leer, diviértete en tu proyecto!

¡Embárcate en un viaje de aprendizaje! Explora más de 200 artículos de expertos sobre desarrollo web. Echa un vistazo a mi blog para ver más de mi fascinante contenido.