En el desarrollo web, en realidad hay varias formas de poner tus fuentes en negrita. Pero, ¿cuáles son las mejores formas y qué código CSS debería usar?
La realidad es que diferentes enfoques son adecuados para diferentes situaciones, y en realidad hay mucha confusión en torno a las diversas etiquetas HTML y propiedades CSS disponibles para envalentonar sus fuentes.
Pero no te preocupes: al final de esta publicación, ¡sabrás todo lo que necesitas saber! Vamos a empezar…
La semántica del texto en negrita HTML
Antes de sumergirnos en el CSS, debemos dar un pequeño rodeo por el mundo de la semántica HTML. Después de todo, debes aplicar tu código CSS a algo.
Al poner las fuentes en negrita, hay dos elementos especializados disponibles: y . Tienen usos ligeramente diferentes:
- se utiliza para indicar el estilo visual. Usas para llamar la atención de los lectores sobre algo que no tiene mayor importancia que el resto del texto que lo rodea. Por ejemplo, para resaltar nombres de productos o personas en un artículo. Otro ejemplo serían esos sitios que siempre ponen la primera oración de un artículo en negrita; ese sería otro uso para b.
- se utiliza para indicar significado. Usas para resaltar parte del texto que tiene mayor importancia o urgencia que el resto. Esto podría ser una advertencia o una parte crucial de un mensaje.
Aquí hay un ejemplo. Toma el siguiente mensaje:
Los nombres “Han Solo” y “Luke Skywalker” serían buenos candidatos para la etiqueta b. Cualquier Stormtrooper que escanee este mensaje podría elegir los nombres de sus objetivos rápida y fácilmente.
La oración final, sin embargo, sería un caso de fuerte, fuerte: es importante que los Stormtroopers presten atención a esta advertencia.
Su marcado final podría verse así:
Una cosa importante para recordar aquí es que, si bien estas dos etiquetas hacen que el texto esté en negrita de manera predeterminada, fuerte no tiene que estar en negrita. Puede indicar la importancia de cualquier manera, solo que poner el texto en negrita suele ser la mejor manera.
¿Por qué estos dos enfoques para poner las fuentes en negrita?
La razón principal es la accesibilidad. Las personas con discapacidad visual a menudo usan lectores de pantalla para leer contenido en la web. Si nunca has visto a alguien usar uno de estos, mira esto:
Al usar fuerte le dices al lector de pantalla que esta parte del texto es importante. La idea es que el lector de pantalla pueda indicar esta importancia de forma auditiva, tal vez leyéndolo en un tono diferente oa una velocidad diferente.
Por lo que puedo decir usando mi Google Fu, los lectores de pantalla aún no lo hacen bien o de manera consistente. Muchos de ellos simplemente leen b y secciones fuertes como cualquier otro texto. Sin embargo, la tecnología es cada vez mejor.
Bien, ahora que sabe qué etiquetas usar y las mejores formas de usarlas, pasemos al lado CSS de la ecuación.
Poner tus fuentes en negrita en CSS
La propiedad CSS que usa es font-weight, que acepta los siguientes valores:
- atrevido
- normal
- más audaz
- encendedor
: veremos qué números puede usar a continuación
El valor predeterminado es normal, que es el peso de fuente del texto que está leyendo en este momento. Si desea poner su fuente en negrita en CSS, simplemente le da a font-weight un valor de negrita:
.keyword {
font-weight: bold;
}En muchos casos, eso es todo lo que necesitará. De hecho, si está usando b o strong, ni siquiera tendrá que hacer eso, porque ambos tienen el peso de fuente: ¡negrita aplicado de forma predeterminada!
Sin embargo, como puede imaginar, tiene un poco más de flexibilidad que eso. En lugar de negrita y normal, puede proporcionar un número y controlar con mayor precisión el nivel de negrita que muestra el texto.
Con la mayoría de las fuentes, tiene entre 1 y 9 pesos diferentes para jugar, que están etiquetados en incrementos de 100, de 100 a 900. Estos se asignan al De tipo abierto especificaciones desarrolladas por Microsoft y Adobe; es posible que esté familiarizado con algunos de estos términos:
Como puede ver aquí, font-weight: 400; es lo mismo que font-weight: normal; y font-weight: 700; es lo mismo que font-weight: bold;.
Tenga en cuenta también la línea @import en la parte superior:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');Cada uno de estos diferentes pesos de fuente es técnicamente una fuente separada, y deberá importarlos por separado, ya sea desde un servicio como Google Fonts (como lo he hecho aquí), o descargando los archivos de fuente y sirviéndolos directamente desde su propio sitio.
Retrasos en el peso de la fuente
Pero quizás se pregunte, ¿qué sucederá si configura el peso de la fuente en un valor que no ha importado? ¿Romperá su sitio o producirá un error?
No, el navegador simplemente recurrirá al peso de fuente que usted tenga. Muchas fuentes no tienen pesos que cubran todo el rango de 100 a 900. Digamos que está usando Arial, por ejemplo, que por defecto solo tiene 400 (normal) y 700 (negrita). Esto es lo que sucede con estos pesos de fuente:
El navegador simplemente se mueve al peso disponible más cercano.
Pesos de fuente relativos en CSS
Además de establecer un peso explícito para la fuente, puede establecer un peso de fuente relativo al padre del elemento:
.bolder {
font-weight: bolder;
}
.lighter {
font-weight: lighter;
}Solo se consideran 4 valores cuando se aplica un peso relativo: 100, 400, 700 y 900. Esto es lo que obtienes cuando aplicas más claro y más audaz a diferentes pesos de fuentes principales:
| 100 | 100 | 400 |
| 200 | 100 | 400 |
| 300 | 100 | 400 |
| 400 | 100 | 700 |
| 500 | 100 | 700 |
| 600 | 400 | 900 |
| 700 | 400 | 900 |
| 800 | 700 | 900 |
| 900 | 700 | 900 |
Entonces, si tiene 100 en su elemento principal, alcanzará la negrita máxima en solo tres elementos secundarios anidados. Esto es algo a lo que debe estar atento si tiene elementos anidados que se generan automáticamente, como comentarios de blog o publicaciones en foros.
¿Qué es mejor: un peso de fuente explícito o un peso relativo?
En mi experiencia, todavía no he encontrado un caso de uso para más audaces y ligeros. Siempre me las he arreglado perfectamente bien eligiendo el peso que creo que se ve mejor.
Algunas personas piensan que más audaz es una opción más segura. Por ejemplo, imagine que tiene el peso de fuente p establecido en 400 y su b establecido en peso de fuente: 700;. ¿Qué sucede si aparece otro desarrollador y cambia el peso de la fuente p a, digamos, 600? Ahora no verá mucha diferencia entre su texto normal y en negrita. Sin embargo, si hubiera establecido b en font-weight: bolder;, su texto en negrita se subiría automáticamente a font-weight: 900;.
Si bien esto es técnicamente cierto, no lo encuentro un argumento sólido. Si cambia el peso de la fuente de manera tan drástica, se espera que también realice algunas comprobaciones visuales en el sitio y vea cómo ese cambio afecta a los elementos circundantes.
¿Alguna vez ha encontrado un gran caso de uso para más audaz y más ligero? ¿O puedes pensar en uno? Si es así, házmelo saber, porque tengo curiosidad por saberlo. Hasta entonces, le recomiendo que experimente con pesos de fuente específicos y elija los que se vean mejor, en lugar de usar más negrita y más claro.
Pesos de fuente variables en CSS
Algunos de ustedes pueden estar pensando: “Oye, 9 pesos de fuente diferentes no son suficientes para mí. ¡Quiero 1000!”
¡Pues estás de suerte, amigo mío! Un tipo especial de fuentes, conocidas como fuentes variables, en realidad admiten pesos entre 1 y 1000. Por lo tanto, podría hacer algo como esto:
font-weight: 371;
Asique, como trabajan? Bueno, las fuentes variables se generan mediante programación, de manera similar a las imágenes SVG. Esto significa que se pueden escalar hacia arriba o hacia abajo en peso sin perder calidad, al menos cuando se encuentran dentro de los rangos de peso admitidos por la fuente.
Además de brindarle un control más detallado sobre el peso, las fuentes variables también le permiten personalizar otros aspectos del estilo, como el ancho y la inclinación, aunque gran parte de esto se encuentra en etapas experimentales mientras escribo esto.
La principal ventaja de esto es que solo puede importar un archivo de fuente en lugar de uno separado para cada peso que necesite. La desventaja clave (en el momento de escribir este artículo) es que no todas las fuentes son variables. La selección es más limitada. Si vas a Fuentes de Googlehay una casilla de verificación que puede usar para mostrar solo las fuentes variables.
Otra desventaja es que el tamaño del archivo de las fuentes variables también es mucho más grande, pero si desea usar más de 3 pesos de fuente, generalmente será más pequeño que importar tres fuentes separadas. Si solo usa 2 o 3 pesos de fuente, generalmente obtendrá archivos de fuente más pequeños (y, por lo tanto, un sitio más rápido) simplemente importando los específicos que necesita.
Además, tenga en cuenta que las fuentes variables no son totalmente compatibles con todos los navegadores y sistemas operativos; sin embargo, son bastante bien sustentado..
¿Cuál es la mejor manera de elegir un peso de fuente?
Siempre que diseñe un sitio, piense en el impacto que desea tener. ¿Qué valores, principios, emociones, impresiones o vibraciones clave desea transmitir? Luego, cada vez que tenga que tomar una decisión de diseño, puede preguntarse, ¿cuál de mis opciones lo hace mejor?
Por ejemplo, mire este ejemplo con Montserrat (el texto es solo un relleno de JeffSum, no significa nada). Esto usa 400 y 700, los valores predeterminados:
Texto en negrita bastante estándar. Ahora mira lo que sucede si cambiamos esto a ‘100’ y ‘800’, una diferencia más extrema:
El primero es completamente convencional, se parece a la mayoría de los textos que verás en la vida normal. ¿Qué transmite eso? Tal vez la tradición, seguir las reglas, ajustarse a las normas acordadas, cosas así. Si está diseñando un sitio para un bufete de abogados, esa es probablemente la vibra que está buscando. No hay necesidad de nada demasiado creativo o escandaloso.
El segundo transmite que solo hay un par de puntos clave para aprender aquí, y todo lo demás es mucho menos importante. Si estuviera diseñando la portada de una revista o una página de destino, podría valer la pena considerar esto.
Tenga en cuenta también que los pesos de las fuentes no son equivalentes de una fuente a otra. Usar 400 para normal y 700 para negrita puede verse muy bien en una fuente, pero terrible en otra. Si cambia una fuente, compruebe también cómo se ve el texto en negrita.
Finalmente, asegúrese de verificar los pesos de sus fuentes en varios navegadores, especialmente si está usando una fuente menos común o un peso diferente a los valores estándar de 400 y 700, ya que a veces no se muestran exactamente de la misma manera.
Accesibilidad
Como desarrollador concienzudo, estoy seguro de que intentará usar las etiquetas b y strong como se describe anteriormente para ayudar a las personas con discapacidad visual. Pero aquí hay otra cosa que puede hacer para ayudar: tenga cuidado con las fuentes muy delgadas. Los pesos de fuente de 100 y 200 pueden ser difíciles de leer para algunas personas con problemas de visión y, en términos generales, es mejor evitarlos. Si desea utilizarlos, asegúrese de tener al menos un fuerte contraste entre el color de la fuente y el color de fondo (este Comprobador de contraste te puede ayudar con eso).
¡Ahora eres un maestro de las fuentes en negrita CSS!
Wow, apuesto a que no sabías que había tanto involucrado en hacer que las fuentes fueran en negrita, ¿verdad? Es cierto que hay mucho que tener en cuenta, pero comprender estos matices es lo que separa lo bueno de lo excelente, ¡así que buen trabajo para dar el siguiente paso en su viaje de aprendizaje!
Aún así, hay momentos en que su cliente necesita un sitio web que esté pulido por expertos, perfectamente funcional y ultrarrápido (y, como siempre, ¡lo quieren para ayer!). Para eso, querrá considerar usar fullpage.js.
fullPage es una biblioteca JS que convierte su sitio en un sitio de página completa elegante y totalmente funcional que funciona a la perfección con bibliotecas JS como React y CMS como WordPress. Obtiene una gran cantidad de efectos increíbles para usar (soy un gran fanático del efecto de agua), y es realmente fácil de configurar y hacer funcionar. ¡Echa un vistazo y mira lo que piensas!
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
