Como dimensionar texto com CSS

Em mais um artigo da revista A List Apart (edição 249) traduzido por mim, o diretor de produção da Clearleft, Richard Rutter, ensina como dimensionar textos corretamente usando CSS. Aprenda a seguir e adote como uma boa prática.

Tem havido um bem-vindo ressurgimento de interesse em tipografia para web durante o último ano ou quase, com muitos artigos e palestras em conferências oferecendo técnicas e teoria. Freqüentemente, é reafirmada a noção de que boa tipografia requer controle apurado do tamanho da fonte e da altura da linha. Mas esta é a web: uma mídia especial onde o leitor pode ter tanto controle quanto o designer – isto implica em que o texto na web, embora se incline à vontade do designer, também deve ser redimensionável de forma confiável através dos navegadores e plataformas.

Neste artigo, nós vamos reconciliar a necessidade de precisão do designer com a necessidade de redimensionar o texto de imediato do usuário, chegando a uma boa prática que satisfaça designers e usuários e que funcione através dos navegadores e plataformas.

Nós vamos alcançar nosso destino pelo método tradicional de tentativa e erro. Mais do que aprovando o trabalho pioneiro de 2002 de Owen Brigg, eu criei um caso base com seis iterações e 161 capturas de tela. Siga-me, você não vem?

A suíte de teste

O conteúdo usado para testes foi um layout de duas colunas com o corpo principal à esquerda e uma barra lateral à direita. O texto foi configurado com Arial para adicionar consistência através dos sistemas operacionais e plataformas.

Os navegadores usados para teste foram Safari 2, Firefox 2 e Opera 9.5α rodando no Mac OS x Tiger, juntamente com o Internet Explorer 6 (IE6) e o Internet Explorer 7 (IE7) rodando no Windows XP com o Cleartype ativado. É óbvio que essa não é uma lista completa de navegadores, sistemas operacionais, ou mecanismos de renderização, mas cobre a maioria dos usuários por aí hoje.

Cada sistema operacional e navegador foram rodados usando suas configurações padrões. Toda iteração foi testada para ver como cada navegador renderizava o texto nos tamanhos pequeno, médio, grande e muito grande, junto com níveis de zoom de página de 90%, 100%, 110% e 120%, onde aplicável.

Caso base

Primeiro era necessário certificar que os navegadores proporcionassem uma linha de base consistente a partir de onde iniciar. O caso base mostra que em cada navegador, o tamanho padrão do texto é de 16px quando nenhum estilo foi aplicado (outro além dos padrões do navegador), e o texto é escalonado razoavelmente de forma consistente através do quadro.

Tamanho do texto em pixels – iteração 1

O tamanho padrão do texto do caso base é um bom lugar para começar, mas para a maioria das pessoas (designers, clientes, e seus clientes) 16px é muito grande para o texto principal. Em nosso exemplo, o texto principal foi reduzido para 14px, com o texto da barra lateral configurado em 12px. Essa primeira iteração somente faz isso, configurando as fontes em pixels:

.bodytext p {
font-size:14px;
}
.sidenote {
font-size:12px;
}

O resultado é que o Safari e o Firefox ainda redimensionam o texto, enquanto que o IE6 e o IE7 não. O texto pode ser redimensionado no Opera e no IE7 usando-se a ferramenta de zoom da página, que amplia o layout da página, com os textos e imagens dentro.

Tamanho do texto em ems – iteração 2

Embora a fatia de mercado de navegadores se diferencie de site para site, e as estatísticas de fatia de navegadores são desenhadas na areia, é seguro afirmar que o IE6 é ainda usado por muitas pessoas. Portanto, configurar os textos em pixels impediria que muitas pessoas o redimensionassem. Também há um argumento que diz que os usuários do IE7 deveriam ser capazes de redimensionarem o texto sem serem forçadas a usar o controle de zoom.

A próxima unidade a se tentar para dimensionamento de texto são os ems. O em é uma unidade tipográfica verdadeira, recomendada pelo W3C, e proporciona a ausência de keywords de precisão. Trabalhando a partir do padrão de 16px, os seguintes estilos deveriam proporcionar os tamanhos de textos desejados:

.bodytext p {
font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
font-size:0.75em; /* 16x0.75=12 */
}

Os resultados mostram que, através de todos os navegadores, o texto na configuração média do navegador é renderizada de forma idêntica aos textos configurados em pixels. Eles também demonstram que os textos dimensionados em ems podem ser redimensionados através de todos os navegadores. Porém o IE6 e o IE7 inaceitavelmente exageram os tamanhos pequeno e grande dos textos redimensionados

O body dimensionado em porcentagens – iteração 3

Uma forma de se consertar o redimensionado exagerado do texto no IE6 e no IE7 é dimensionar o body usando-se porcentagem. Portanto, mantendo-se os sem em nosso conteúdo, os seguintes estilos foram testados:

body {
font-size:100%;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}

Os resultados mostram que a diferença entre as configurações para maior e menor no IE6 e no IE7 não é mais exagerada, significando que agora nós temos todos os navegadores renderizando os textos num tamanho idêntico em sua configuração média e redimensionando o texto de forma consistente.

Configurando a altura da linha em pixels – iteração 4

Artigos recentes sobre tipografia, tais como “Configurando texto na Web para um grid base” (A List Apart, abril 2007), enfatizam que boa tipografia requer um grid vertical, isso quer dizer um ritmo vertical sólido conseguido com uma altura de linha calculada consistente. A principal implicação é que a altura da linha deve ser a mesma, não importando o tamanho do texto (para que a altura da linha, ou o grid vertical permaneçam consistentes, não importando o tamanho da fonte).

Para nosso exemplo, uma altura de linha adequada é de 18px, logo, isso é adicionado ao body assim:

body {
font-size:100%;
line-height:18px;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}

Os resultados mostram que a altura de linha de 18px é herdada por todo o texto na página – note como o texto da barra lateral possui o mesmo ritmo regular que o corpo principal. Especificando-se uma unidade (neste caso, px) ao configurar a altura da linha permite que o valor seja herdado em toda página. Se uma altura de linha sem unidade fosse especificada, o multiplicador seria herdado, resultando em alturas de linha renderizadas proporcionalmente ao tamanho do texto, portanto quebrando o ritmo vertical.

Infelizmente, os resultados mostram que a altura de 18px não é escalonada pelo IE6 e IE7 quando o texto é redimensionado, significando que as configurações maiores parecem achatar o texto.

Configurando a altura da linha em ems – iteração 5

Quando os pixels falharam antes, nós nos voltamos para os ems. Repetindo a lógica nos proporciona os seguintes estilos:

body {
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}

Os resultados agora mostram redimensionamento preciso e consistente do texto e da altura da linha através de todos os navegadores. Perfeito. Ou quase.

O problema de monoespaço do Safari – iteração 6

Os observadores entre vocês devem ter percebido uma pequena falha nas capturas de tela do Safari: a fonte monoespaçada incluída no texto do body é renderizada de forma inconsistente. Para textos configurados em pixels, o Safari renderiza a fonte monoespaçada no mesmo tamanho que o texto de largura proporcional ao seu redor. Quando o texto é configurado em ems, porém, o Safari renderiza o texto monoespaçado muito menor que o texto ao redor. A inconsistência parece se originar nos tamanhos de texto padrões do Safari, que são 16px para “fontes padrões” e 13px para “fontes de largura fixa”. O Safari 3α em OS X não parece sofrer esse problema.

Você poderia decidir que texto monoespaçado subdimensionado no Safari é algo com que você e seus leitores podem viver, e como o Safari 3 é incluído no OS X Leopard e na última atualização do Tiger, não será muito longe o dia que o problema provavelmente desaparecerá. Para os controladores nervosos que não podem esperar, uma forma de contornar esse problema é enviar textos dimensionados em pixels para o Safari.

O seguinte código anexa um comentário condicional revelador de nível anterior para os nossos estilos, para que os pixels sejam enviados para todos os navegadores, exceto IE6 e IE7 (note a sintaxe [if !IE], instruindo o IE/Win a ignorar o código a seguir).

<style type="text/css">
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->

Os resultados mostram o texto e a altura da linha redimensionados de forma consistente através de todos os navegadores, incluindo o texto monoespaçado do Safari 2.

Os comentários condicionais são controversos, com muitos delatores e defensores, mas eu acredito que a abordagem é apropriada nesse caso, já que estamos usando uma função do navegador (comentários condicionais) para contornar um comportamento do navegador (não redimensionamento de pixels). Também se deve notar que, para maior clareza, o código listado acima apresenta as regras de CSS dentro dos elementos style; a boa prática, porém recomenda o uso de folhas de estilo inseridas com a tag link no seu lugar.

Conclusão

A nossa tarefa era encontrar uma forma de dimensionar o texto que permita aos designers manter o controle apurado da tipografia, sem sacrificar a capacidade do usuário ajustar o seu ambiente de leitura. Nós testamos várias unidades através de navegadores comuns. Foi mostrado que dimensionar o texto e a altura da linha em ems, com uma porcentagem especificada para o body (e uma condição opcional para o Safari 2), proporciona textos apurados e redimensionáveis através de todos os navegadores em uso hoje em dia. Essa é uma técnica que você pode colocar na sua bolsa de kits e usar como uma boa prática que satisfaz designers e leitores para dimensionar texto no CSS .

Adendo

Ems podem ser difíceis de trabalhar, especialmente quando se aninham muitos elementos dentro de outros elementos, pois pode ser difícil acompanhar a matemática. Porém, comentar bem suas folhas de estilo e aplicar os estilos aos elementos a partir do body para dentro, pode manter as coisas fáceis de seguir. Esse exemplo mais complexo e sua folha de estilo demonstram como dimensionar elementos aninhados usando o body como ponto de partida.