📘 ¿Cómo poner texto en negrita con CSS?

Para poner texto en negrita usando CSS, utiliza font-weight: bold;. Con la demostración y el código para copiar a continuación, cualquiera puede implementarlo fácilmente.

✅ Demostración

Este es un texto normal, y esta parte está en negrita.

📋 Código para copiar y pegar

<style>
  .bold-text {
    font-weight: bold;
  }
</style>

<p>Este es un texto normal, y <span class="bold-text">esta parte está en negrita</span>.</p>

✅ ¡Copiado!

🧠 Técnicas prácticas para utilizar el grosor de fuente

font-weight: bold es una propiedad CSS fundamental pero poderosa para crear jerarquía visual en el texto. Cuando se usa adecuadamente, permite resaltar eficazmente las partes importantes del contenido.

🎨 Variaciones de diseño

Además de bold, font-weight puede especificarse con valores numéricos del 100 al 900. Por ejemplo, font-weight: 600 se considera semi-negrita, y font-weight: 800 es extra-negrita. Es importante tener en cuenta que los grosores disponibles dependen de la familia tipográfica utilizada.

✨ Técnicas avanzadas de aplicación

Al definir fuentes personalizadas con la regla @font-face, puedes especificar font-weight para cargar correctamente diferentes grosores. Además, aplicar transition: font-weight 0.3s ease permite una transición suave al pasar el cursor sobre los elementos.

⚠️ Consideraciones de accesibilidad

Al usar texto en negrita, es importante mantener una relación de contraste de al menos 4.5:1. No dependas únicamente del grosor para transmitir información importante; combínalo con otros elementos visuales. Un uso excesivo puede dificultar la legibilidad.

El grosor de fuente debe utilizarse de manera coherente en todo el sistema de diseño. Definir previamente los grosores para títulos, textos destacados y botones ayuda a crear una apariencia visual unificada.