Blog

Muitos iniciantes ainda encontram dificuldades em aliar um bom design, com um código bem feito e semanticamente correto.

Posso dar como maior exemplo, aqueles sites com utilização de fontes bem elaboradas para a logo, título do site, das páginas, dos textos, etc. Porém, como todos sabemos, textos “puros” devem ser escritos com fontes que todos possam visualizar, ou seja, você deve planejar seu site com uma fonte em que todos possam visualizar da mesma maneira, senão o layout vai por água abaixo.
Uma boa saída é utilização de imagens ao invés de simples texto, nestes casos em que é estritamente necessária a utilização de fontes diferentes. Digo isso somente em casos extremos, nos quais o visual do site irá se prejudicar bastante, caso não seja utilizada uma fonte padrão.

Porém, muitos não sabem que a semântica e indexação nos sistemas de busca será afetada com utilização de imagens para fins de leitura. Na verdade, imagens não possuem significado de texto, no máximo podemos utilizar o atributo alt para definir uma legenda para tal imagem.

Para poder utilizar uma imagem em títulos e que ela possa ter uma semântica correta, sem afetar a indexação do conteúdo nos sistemas de busca (além da acessibilidade, etc.), podemos seguir o exemplo abaixo, caso a intenção seja utilizar uma imagem para o título de uma página:

Código HTML:

<h2>Título da Página</h2>

No CSS fica assim:

h2 { width: largura desejada; height: altura desejada; background: url(endereço da imagem) no-repeat; text-indent: -9999em; }

Este é um exemplo muito básico, mas basta para mostrar a idéia da prática. O que fizemos nada mais foi que, no código HTML, mantivemos o texto limpo, sem inserção de tags img, deixando-o limpo e acessível, tanto para pessoas como máquinas.
Agora, no CSS, definimos uma largura, altura, uma imagem de fundo e, ao final, adicionamos a propriedade text-indent, fazendo com que o texto desapareça, mantendo, somente, a imagem de fundo.

Desta maneira, seu site possuirá imagens com as fontes desejadas sem perder a semântica, acessibilidade, indexação, etc.

O único contra desta “técnica” seria a dificuldade na atualização destas imagens, pois se trata de um processo manual. Mas há técnicas de image replacement que podem ser pesquisadas, caso a intenção seja esta.