O tamanho importa

Quarta-feira, 25 de Janeiro de 2006

Durante o desenvolvimento de uma aplicação web, chega uma altura em que é necessário definir o tamanho do texto. O grande problema é que nem todos os browsers mostram o texto com o tamanho certo, por isso, grande parte dos designers usa “pixels” para definir o seu tamanho. 1 pixel é sempre 1 pixel em qualquer browser, por isso os sites concebidos desta forma ficam bastante iguais nos diferentes browsers, o que é bom para os designers.

Um texto com o tamanho de 12 pixels terá sempre 12 pixels de altura tanto no Internet Explorer como no Firefox ou no Opera.

O problema aqui é que há pessoas que podem não conseguir ler o texto com esse tamanho e usam o browser para aumentar gradualmente o tamanho do texto, e no Internet Explorer não é possível aumentar o texto (View -> Text Size -> Larger) se usarmos pixels.

Desta forma privamos os utilizadores deste browser de poderem controlar a forma como visualizam o website. Em qualquer outro browser basta pressionar [CTRL] + ou [CTRL] – para aumentar ou diminuir o texto.

Sendo assim, temos de usar uma unidade relativa para que os utilizadores do IE também consigam escalar o texto. Para isso existem várias soluções:

Usando palavras-chave

Usando a propriendade font-size do CSS podemos definir o tamanho do texto usando as seguintes palavras-chave: xx-small, x-small, small, medium, large, x-large, xx-large.

Isto seria perfeito se, uma vez mais, o Internet Explorer não interpretasse estas instruções de forma totalmente errada. Normalmente os browsers usamo o tamanho medium como base, no entanto, no IE5 o valor base usado foi small fazendo com que o texto neste browser apareça um tamanho acima daquilo que era esperado.

Existem alguns “hacks” para corrigir este comportamento, mas eu sou da opinião que não devemos usar “hacks” sem ter encontrado uma outra solução para o mesmo problema.

Usando uma combinação de percentagens e “ems”

O texto definido em percentagem é escalável em qualquer browser. Esta poderá ser a solução ideal, no entanto há alguns pormenores a ter em conta.
O valor standard do texto normal nos browsers é de 16 pixels. Se definirmos o texto para 100%, o tamanho base será de 16 pixels, o que poderá ser um bocado grande demais para qualquer layout. Dessa forma podemos combinar usar o tamanho 100% no body e 0.8em num contentor global:

1. body {
2. font-size: 100%;
3. }
4. #global {
5. font-size: 0.8em;
6. }

O problema é que estes valores são sempre relativos ao contentor em que está o conteúdo. Assim, se tivermos o seguinte código:

1. p {
2. font-size: 0.8em;
3. }
4. strong {
5. font-size: 0.8em;
6. }

E no HTML tivermos:

1. <p>O tamanho do texto é <strong>relativo</strong></p>

Então o texto dentro da tag <strong> terá 0.8 do tamanho do texto da tag <p> que por sua será 0.8 do tamanho do texto no body. Por isso é preciso ter cuidado quando se usam unidades relativas para definir o tamanho do texto.

Este é o método que que tenho usado ultimamente para fazer com que o texto seja escalável, no entanto isso não significa que este seja o melhor método e até agora ainda não foi identificado nenhum método 100% seguro. Há sempre pontos fortes e pontos fracos em todos os métodos existentes.

Usando JavaScript

Através do uso de JavaScript podemos usar o tamanho do texto em pixels e criar 3 folhas de estilos diferentes: normal, média e enorme. Cada uma delas com o tamanho do texto ligeiramente maior do que a anterior. Depois, através de JavaScript podemos criar um link para alternar entre as folas de estilo fazendo com que o texto mude de tamanho instantaneamente.

Este era o método que eu usava aqui no site até há bem pouco tempo, no entanto, uma vez que o JavaScript pode ser desactivado pelo utilizador, qualquer sistema que funcione desta maneira deixa de ter utilidade se a funcionalidade do JavaScript estiver desactivada no browser. Além disso, o utilizador deixa de poder ter controlo do tamanho do texto através do browser (aumentar/diminuir o texto ou usar uma folha de estilos própria) uam vez que para alterar o tamanho do texto tem que clicar num link dentro do site (link esse que pode não ser fácil de encontrar).

A mesma fonte em sistemas diferentes

Além da dificuldade que é escolher e definir o tamanho do texto, ainda existe mais uma variável: o tipo de letra.
O mesmo tipo de letra pode ser diferente em vários sistemas. Aqui já não falamos de browsers uma vez que eles usam os tipos de letra existentes no sistema operativo. Sendo assim, se compararmos este site com o mesmo tipo de letra num computador com Windows XP e noutro com Mac OS X, os resultados são bastante diferentes:

Windows XP

Mac OS X

As maiores diferenças notam-se principalmente na largura do menu e do título do artigo. No Mac OS X o menu fica perfeitamente alinhado com a linha que separa a barra lateral enquanto que no Windows XP a linha fica a meio do link para a página inicial.

Qual o método que usam?

Uma vez que há vários métodos para controlar o tamanho do texto, gostava de saber quais os métodos que costumam usar e quais os que acham mais adequados e acessíveis?