Esta é uma pergunta muito antiga, mas estou revisando-a porque tive esse problema em um aplicativo que estou desenvolvendo e achei todas as respostas aqui insuficientes.
(Pule este parágrafo para o TL; DR ...)Estou usando a webfont Gotham de cloud.typography.com e tenho botões que começam vazios (com uma borda / texto em branco e um fundo transparente) e adquirem uma cor de fundo ao passar o mouse. Descobri que algumas das cores de fundo que estava usando não contrastavam bem com o texto branco, então eu queria mudar o texto para preto para esses botões, mas - seja por causa de um truque visual ou métodos comuns de suavização - escuro o texto em um fundo claro sempre parece ser mais leve do que o texto branco em um fundo escuro. Descobri que aumentar o peso de 400 para 500 para o texto escuro mantinha quase exatamente o mesmo peso "visual". No entanto, estava aumentando a largura do botão em uma pequena quantidade - uma fração de pixel - mas foi o suficiente para fazer os botões parecerem "tremer" um pouco, do qual eu queria me livrar.
Solução:
Obviamente, este é um problema muito exigente, por isso exigiu uma solução delicada. No final letter-spacing
das contas, usei um negativo no texto mais em negrito, conforme cgTag recomendado acima, mas 1px seria um exagero, então calculei exatamente a largura de que precisaria.
Ao inspecionar o botão no Chrome devtools, descobri que a largura padrão do meu botão era 165,47 px e 165,69 px ao passar o mouse, uma diferença de 0,22 px. O botão tinha 9 caracteres, então:
0,22 / 9 = 0,024444 px
Ao converter isso em unidades em, eu poderia tornar o ajuste do tamanho da fonte agnóstico. Meu botão estava usando um tamanho de fonte de 16 px, então:
0,024444 / 16 = 0,001527em
Portanto, para minha fonte específica, o seguinte CSS mantém os botões exatamente com a mesma largura ao passar o mouse:
.btn {
font-weight: 400;
}
.btn:hover {
font-weight: 500;
letter-spacing: -0.001527em;
}
Com alguns testes e usando a fórmula acima, você pode encontrar exatamente o letter-spacing
valor certo para a sua situação, e deve funcionar independentemente do tamanho da fonte.
A única ressalva é que navegadores diferentes usam cálculos de subpixel ligeiramente diferentes, portanto, se você deseja esse nível de OCD de precisão perfeita de subpixel, será necessário repetir o teste e definir um valor diferente para cada navegador. Os estilos CSS direcionados a navegadores geralmente são malvistos , por um bom motivo, mas acho que este é um caso de uso em que é a única opção que faz sentido.