Esta es una pregunta muy antigua, pero la estoy revisando porque tuve este problema en una aplicación que estoy desarrollando y encontré todas las respuestas aquí.
(Omita este párrafo para el TL; DR ...)Estoy usando la fuente web Gotham de cloud.typography.com, y tengo botones que comienzan en forma hueca (con un borde / texto blanco y un fondo transparente) y adquieren un color de fondo al pasar el mouse. Descubrí que algunos de los colores de fondo que estaba usando no contrastaban bien con el texto blanco, así que quería cambiar el texto a negro para esos botones, pero, ya sea por un truco visual o métodos comunes de suavizado, oscuro el texto sobre un fondo claro siempre parece tener un peso más ligero que el texto blanco sobre un fondo oscuro. Descubrí que aumentar el peso de 400 a 500 para el texto oscuro mantenía casi exactamente el mismo peso "visual". Sin embargo, estaba aumentando el ancho del botón en una pequeña cantidad, una fracción de un píxel, pero fue suficiente para hacer que los botones parecieran "temblar" levemente, de lo que quería deshacerme.
Solución:
Obviamente, este es un problema realmente delicado, por lo que requería una solución delicada. En última instancia, utilicé un negativo letter-spacing
en el texto más audaz como cgTag recomendó anteriormente, pero 1px habría sido demasiado, así que calculé exactamente el ancho que necesitaría.
Al inspeccionar el botón en las herramientas de desarrollo de Chrome, encontré que el ancho predeterminado de mi botón era 165.47px y 165.69px al pasar el mouse, una diferencia de 0.22px. El botón tenía 9 caracteres, entonces:
0.22 / 9 = 0.024444px
Al convertir eso a unidades em, podría hacer que el ajuste del tamaño de fuente fuera independiente. Mi botón estaba usando un tamaño de fuente de 16px, entonces:
0.024444 / 16 = 0.001527em
Entonces, para mi fuente particular, el siguiente CSS mantiene los botones exactamente del mismo ancho al pasar el mouse:
.btn {
font-weight: 400;
}
.btn:hover {
font-weight: 500;
letter-spacing: -0.001527em;
}
Con algunas pruebas y utilizando la fórmula anterior, puede encontrar exactamente el letter-spacing
valor para su situación, y debería funcionar independientemente del tamaño de fuente.
La única advertencia es que los diferentes navegadores usan cálculos de subpíxeles ligeramente diferentes, por lo que si está apuntando a este nivel de OCD de precisión perfecta de subpíxeles, deberá repetir la prueba y establecer un valor diferente para cada navegador. Los estilos CSS orientados al navegador generalmente están mal vistos , por una buena razón, pero creo que este es un caso de uso en el que es la única opción que tiene sentido.