¿Alguna vez ha intentado cambiar el valor de la propiedad font-weight en los estados de los enlaces? Si la respuesta es afirmativa, es posible que haya notado que el texto cambia.

En este consejo rápido, primero aprenderemos qué causa este comportamiento no deseado y luego examinaremos dos posibles soluciones.

Contenido

Identificación del problema

Como primer paso, identifiquemos el problema mirando un ejemplo simple. Considere la siguiente visualización:

Los elementos son enlaces, así que en tu CSS puedes intentar algo como esto:

a:hover {
  font-weight: bold;
}

Debido a que normalmente no definimos un ancho fijo para elementos como este, cuando el usuario pasa el ratón por encima de los enlaces, el texto cambia. Por supuesto, esto sucede porque el ancho de cada item se hace más grande al flotar. Para probarlo, asignamos la clase activa al primer enlace y añadimos esta regla CSS:

.active {
  font-weight: bold;
}

Por último, cambiamos el texto del segundo enlace para que sea igual al primero, así:

Ahora, si abrimos la consola del navegador y apuntamos a los dos primeros enlaces, notaremos que su ancho y alto es diferente.

Puede ver lo que hemos discutido anteriormente en la siguiente demostración de CodePen:

See the Pen Using the font-weight Property on Hover States by SitePoint (@SitePoint) on CodePen.

Es cierto que no es muy común añadir un efecto de negrita a un estado flotante, pero puede aparecer en algún momento. Así que veamos dos posibles soluciones para solucionar este problema.

Solución 1: Un ancho a todos los artículos

Como ya se ha mencionado, tal vez la solución más obvia sea dar a todos los elementos de la lista un ancho. Así, en nuestro ejemplo, fijamos el ancho de cada elemento de la lista en 24%.

Aquí está el resultado:

See the Pen Fixing font-weight hover states using defined widths by SitePoint (@SitePoint) on CodePen.

Aunque la solución anterior funciona, es posible que no sea la ideal porque hay casos en los que podemos evitar añadir un ancho fijo a nuestros elementos. Con eso en mente, discutamos una mejor solución.

Solución 2: Sombra de texto

Aprovechando la propiedad text-shadow, somos capaces de simular de alguna manera el comportamiento del peso de la fuente. Hacemos esto jugando con el valor de desenfoque para ajustar la sombra de acuerdo a nuestras necesidades.

Dependiendo de las fuentes utilizadas en nuestros proyectos, podemos combinar la propiedad text-shadow junto con la propiedad letter-spacing para crear algunos efectos de texto agradables.

Para demostrar este comportamiento, asignamos algunas líneas adicionales de CSS a nuestros enlaces:

a {
  letter-spacing: .1em;
  transition: text-shadow .3s;
}

a:hover {
  text-shadow: 0 0 .65px #333, 0 0 .65px #333;
  /* use the line below if you want a more intense effect */
  /* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */
}

Aquí está el demo:

See the Pen Fixing font-weight hover states with Text Shadow by SitePoint (@SitePoint) on CodePen.

Así evitamos el problema del movimiento de los elementos, y no necesitamos añadir ningún tipo de ancho a los elementos. Y como puede ver, esta solución es mucho mejor que usar font-weight porque el tamaño del texto no está cambiando en absoluto. Así que es un aspecto mucho más limpio.

Conclusión

Si necesitara resolver este problema, probablemente usaría una de las dos soluciones que acabo de describir. ¿Conoces otra forma de arreglar esto? Háganoslo saber en los comentarios.