Espaçamento entre letras - CSS-Tricks

Anonim

A letter-spacingpropriedade controla a quantidade de espaço entre cada letra em um determinado elemento ou bloco de texto. Os valores suportados por letter-spacingincluem valores relativos à fonte (em, rem), valores relativos aos pais (porcentagem), valores absolutos (px) e a normalpropriedade, que redefine para o padrão da fonte.

O uso de valores relativos à fonte é recomendado, de modo que letter-spacingaumente ou diminua apropriadamente quando o tamanho da fonte é alterado, seja pelo design ou pelo comportamento do usuário.

p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )

O ponto mais importante a notar ao usar letter-spacingé que o valor especificado não altera o padrão, ele é adicionado ao espaçamento padrão que o navegador aplica (com base nas métricas da fonte). letter-spacingtambém oferece suporte a valores negativos, o que restringe a aparência do texto, em vez de afrouxá-lo.

Confira esta Caneta!

Pontos de interesse

  • Valores de subpixel: na maioria dos navegadores, especificar um valor que é calculado para menos de 1pxresultará em não letter-spacingser aplicado. Atualmente o Firefox 14+ e o IE 10 suportam layout de subpixel; Opera e WebKit, não. O patch foi implantado, então o WebKit agora suporta espaçamento entre letras de subpixel.
  • A letter-spacingpropriedade é animável com CSS Transitions.
  • Uma das maneiras de lutar contra o espaço entre os elementos do bloco embutido é definindo letter-spacing: -4px;no contêiner pai dos elementos do bloco embutido. Em seguida, você precisará redefinir letter-spacing: normal;os elementos filhos.
  • Raramente ou nunca é uma boa idéia colocar letras minúsculas no espaço de letras.

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Funciona Funciona Funciona Maioria Funciona Funciona Funciona

Uma observação sobre o suporte do navegador móvel: algumas versões do Opera Mobile, implementações WebKit não padrão e o navegador NetFront não são compatíveis letter-spacing. Os detalhes são detalhados no link QuirksMode acima.