Como adicionar destaque a textos curtos
Quando você trabalha com layouts responsivos ou componentes de interface que precisam chamar atenção sem usar cores fortes, destacar algumas palavras com tags semânticas é uma das formas mais diretas de fazer isso. O problema começa quando o conteúdo a ser enfatizado precisa ter exatamente 8 letras — seja por design do cliente, restrição de tipografia ou até uma regra de acessibilidade interna. Eu já vi equipes inteiras travarem nisso. O caso mais comum é quando o texto entra em um badge, um label ou um elemento com fonte muito pequena. Letras como "w" e "m" ocupam mais espaço horizontal, enquanto "i" e "l" são estreitas. Isso significa que 8 caracteres nunca terão a mesma largura visual. Na prática, eu sempre ajusto o width do container com calc() e uma combinação de chars específicos, porque medir manualmente cada vez é inviável em escala.
Por que contar apenas letras importa
Você pode achar que colocar uma tag em volta de qualquer palavra resolve, mas existe um detalhe técnico que a maioria dos designers ignora. Fontes variáveis e fontes com widths desiguais fazem com que a palavra "destaque" (9 letras) ocupe muito mais espaço que "exemplo!" (7 letras contando pontuação). Se o seu objetivo é 8 caracteres exatos, precisa considerar tanto o tamanho da fonte quanto a família tipográfica antes de aplicar qualquer estilo. Outro ponto: espaços e pontuações contam ou não dependendo do método de contagem. Em CSS puro, se você usar pseudoelementos com content attr(), o navegador vai processar tudo — espaços, acentos, hífen. Eu encontrei um bug no Chrome 118 onde caracteres Unicode compostos (como "ç" ou "ã") eram renderizados como dois code points, quebrando a contagem de 8 letras. A solução foi normalizar o texto com JavaScript antes de injetá-lo no DOM, usando normalize("NFC").
👉 Clique no botão abaixo para saber mais sobre o assunto!
Método prático com HTML e CSS
A abordagem mais simples é envolver o trecho de 8 letras em uma tag ou e ajustar o estilo conforme necessário. Um exemplo básico funciona assim: aplique um background colorido, um padding generoso e talvez um border-radius para criar um efeito de badge. Se precisar de controle preciso sobre o tamanho, adicione display: inline-block e defina um max-width baseado em em units, já que isso escala proporcionalmente com o tamanho da fonte. Para cenários mais complexos, onde você precisa garantir exatamente 8 letras visíveis, considere usar CSS masks ou clip-path com text-overflow: ellipsis. Isso é útil quando o espaço é limitado e palavras maiores precisam ser truncadas. Eu uso bastante essa técnica em dashboards onde os labels têm largura fixa e não posso deixar que o texto transborde para outra linha.
Limitações e alternativas
O método baseado em tags semânticas tem uma desvantagem clara: ele não funciona bem quando o conteúdo é dinâmico e vem de uma API. Se o texto for gerado em runtime, você precisa de um mecanismo de validação no lado do cliente para garantir que a string tenha exatamente 8 letras. Uma alternativa é usar JavaScript com uma regex do tipo ^[A-Za-zÀ-ÖØ-öø-ÿ]{8}$ para validar antes de renderizar. Se a restrição for estritamente visual e não textual, considere usar pseudo-elementos ::before e ::after para criar um efeito de destaque sem modificar o conteúdo original. Isso preserva a acessibilidade, já que screen readers ainda conseguem ler o texto completo. O trade-off é que você perde a semântica original da tag , então avalie se o custo vale a pena para cada caso de uso.
Também é possível usar a propriedade CSS letter-spacing para ajustar a densidade visual dos 8 caracteres. Valores negativos podem comprimir o texto, enquanto valores positivos o expandem. Eu testei letter-spacing: -0.02em em uma fonte de 12px e consegui encaixar exatamente 8 letras em um container de 48px de largura, o que era impossível com o spacing padrão.
