IvoGomes.com

Voltar ao início

O tamanho importa

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.

Alterar o tamanho do texto no IEO 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

Texto no Windows XP

Mac OS X

Texto no 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?


28 Comentários

Comente este artigo!

  1. Mário Lopes

    O meu método é sugerir às pessoas que usem um browser de jeito.

    Acho que a preocupação com a usabilidade e acessibilidade é uma matéria crucial, mas deve ser bidireccional: tanto dos programadores como dos utilizadores — que se devem consciencializar a usar um browser de jeito.

    P.S. – Bonito design!

  2. Walmar Andrade

    Esse problema me atormenta desde que li o livro do Zeldman, lá no começo da aprendizagem sobre web standards. Um capítulo inteiro somente para discutir isso.

    Até recentemente usei os tamanhos relativos, principalmente por conta de tudo que li sobre acessibilidade. Hoje em dia, contudo, acredito que a melhor opção é mesmo usar pixels e, por enquanto, colocar os botões na interface para que o usuário aumente e diminua o texto.

    Acredito que o Internet Explorer 7 deva corrigir esse problema de não redimensionar textos em pixels, portanto teremos um problema a menos. Quem usar do IE6 para trás poderá ficar com os botões na própria interface do site.

    À medida em que os navegadores forem evoluindo e o IE6 for bastante antigo, poderemos usar os pixels sem peso na consciência por conta da acessibilidade.

  3. A.

    Geralmente uso um “font-size: small” para o body e EMs para tudo o resto.

  4. andr3

    Ainda há uma outra forma… Não é que eu a recomende, mas há. Usando o CSS SSC (Cascading Style Sheets Server Side Constants) do Shaun Inman é possível definir variáveis server-side com o tamanho do texto e através da manipulação de argumentos do PHP ir variando o tamanho de cada elemento.

    Creio que usar palavras-chave (xx-small, etc) faz sentido no caso de não haver uma necessidade extrema de exatidão nas dimensões do texto. De resto, usar em em vez de px é o método que eu costumo usar. Mas sim, é preciso ter cuidado. ;)

  5. Bruno Dulcetti

    E ae rapaz… Muito interessante… Ainda não tinha visto uma abordagem boa como essa desse assunto.

    Bom, eu utilizo o tamanho com em atualmente. Logicamente q eu tomo cuidado da implementação de cada código, para que não fique pequeno ou grande demais em específica tag…

    Naum creio que px ou pt seja a melhor opção… ;)

    aquele abraço.

  6. Dextro

    Bem agora devo dizer: I TOLD YOU SO! LOOL :lol: JK ;)

    Mas a serio fontes relativas são importantes e eu tenho fé que o IE7.0 venha a dar-me razão :)

  7. Gustavo Pimenta

    Parabéns pelo novo design, sem dúvida alguma o que gosto mais desde que sigo o teu blog.

  8. Ivo Gomes

    @Mário Lopes: Essa seria a solução ideal se toda a gente actualiza-se os seus browsers. No entanto isso não acontece. Mesmo em empresas grandes ainda se usa o IE5.0! Já tive oportunidade de trabalhar numa empresa enorme (aquela cuja produção representa 2% do PIB e 10% das exportações nacionais :) ) e lá ainda se usava o IE5. Agora podes ver a quantidade de pessoas que ainda usam browsers antiquados. Além disso, a regra número 1 da ergonomia: não é o Homem que tem que se adaptar ao sistema, é o sistema que tem que se adaptar ao Homem. Desta forma temos que adaptar os nossos sistemas a funcionar em qualquer circunstância para não colocarmos ninguém de parte só porque usa algo diferente.

    @andr3: Isso é muito à frente!! No entanto é mais uma solução a ter em conta.

    @dextro: Yes you did :)

  9. Walmar Andrade

    O problema é que usando em ou % você não vai ter a garantia que o texto será legível. O padrão é 16 pixels na maioria dos navegadores, mas se o usuário define para 14 pixels e vc diz no código que a fonte terá 70% disso, provavelmente ficará pequena demais.

  10. João Craveiro

    Uma pequena sugestão de correcção; em vez de

    font-size: 100%;

    usar um aparentemente absurdo

    font-size: 100.01%;

    ( Eis o porquê.)

    P.S.: Ou a live preview ’tá marada, ou o teu blog não é muito amigo de links nos comentários; transforma a aspa de fecho do atributo href (") numa aspa tipograficamente correcta (”) — por isso, o HTML do meu comentário vai estar errado.

  11. João Craveiro

  12. Ivo Gomes

    Eu consigo inserir links normalmente: <a href="teste">teste</a>
    Não será o teu browser que corrige as aspas automaticamente?

    PS: Boa dica essa dos 100.01%. Ainda não conhecia…

  13. João Craveiro

    Eu acabei por não pôr a aspa final, a ver se passava; agora experimentei, e já vi que não acontece sempre: é só quando o endereço do link acaba num dígito (experimenta compor os 2 tipos de links e ir à preview ver os endereços de um e do outro) — problema na expressão regular? ;)

  14. Margarida

    por acaso isso é bom dos em’s e pt’s, mas nunca me habituei e sempre usei pixeis mesmo definidos por mim… bom uma vez usei a cena do javascript com o extra small, small, etc. É bem porreiro, mas hen, javascript e eu… eu e javascript :X lol fico-me pelos pixeis :)
    gostei do teu post :D bem bacano

  15. Ivo Gomes

    @João Craveiro: Tens razão. Quando o link termina num algarismo ele não interpreta a tag … Não fui eu que fiz o script e nem tenho conhecimentos técnicos para o alterar por isso acho que o vou deixar assim :)

  16. Felipe Lima

    Olá Ivo, ótimo site e artigo excelente este. Mas veja, este formulário que você está usando, apresenta instruções d e preenchimento dos campos… Usando IE 7.0 Beta, em 1024×768, fica IMPOSS?VEL ler o que está escrito. Outra dúvida: Não entendi a dica do font-size: 100,01% devo utilizá-lo no body {} ? Quais as vantagens disso? Será que uma possibilidade, como já dito aqui, não seria usar como padrão, o xx-small, e ir colocando o resto em EM, em relação a ele? Todo o restante do texto seria em torno de 1.8em … É válido?
    Abraços e ótimo trabalho!

  17. Ivo Gomes

    Obrigado Felipe pela informação. Assim que tiver acesso a uma máquina Windows vou testar no IE7…

    Em relação ao tamanho do texto, a melhor opção é usar só EM. O facto de ter usado o tamanho 100.01% foi devido a um texto que li e sinceramente já não me lembro a razão. No entanto esta semana li este artigo (How to size text using ems) que explica uma forma ainda melhor e mais simples de usar EMs.

    Ainda não tive tempo de testar, mas assim que puder vou tentar aplicar aqui e ver como fica ;)

  18. Dextro

    Aqui está tudo bem, não tenho problemas nenhuns no IE7 :?

  19. Wlad

    Quantas pessoas afinal ainda estão presas ao IE 5, na beira da saída do 7 ?

  20. José Luís Agapito

    Embora sendo um “maçarico” nesta andanças, sempre achei, do ponto de vista do designer, a determinação do tamanho da fonte em pixeis mais maleável.

    Lógico que isso coloca problemas para o utilizador, mas tal como o Mário Lopes disse, é uma questão dos utilizadores estarem mais atentos à forma como personalizam as definições do browser e configuram o tamanho de letra.

    Por muito nos que tentemos moldar ao cliente / utilizador, acho que tem que haver uma certa plasticidade do mesmo para se adaptar a práticas que nunca serão 100% “à medida”. No fundo, treinar a adaptabilidade, ao passo que o webdesigner pratica a acessibilidade… chegar-se-á a uma solução de compromisso mais… equilibrada.

  21. Robson Waterkemper

    Ivo, escrvo do Brasil, e gostei muito do seu website. Acompanho sempre aqui novidades sobre Usabilidade, CSS, Standards, etc.

    Lendo o seu artigo sobre tamanho de texto, me lembrei da dificuldade que tive para fazer o meu website. Uso Mac e quis usar a fonte Lucida do Mac OS X tb no meu site, e deixei a opcao da Trebuchet MS para os usuarios Windows. Mas vi que o tamanho base dessas duas fontes e’ bem diferente. Existe alguma solucao para que o usuario Mac veja a fonte de um jeito e o usuario PC de outro. Sei que posso fazer isso usando javascript de deteccao de browser, mas gostaria de saber se ha’ outra forma. Nao estaria disposto a manter duas folhas de estilo.

  22. Ivo Gomes

    Ola Robson!

    Desconheço que haja alguma técnica para enviar fontes diferentes consoante o sistema operativo, no entanto recomendo que dê uma vista de olhos por esta tabela comparativa de fontes em Mac e Windows para ter uma ideia de como aparecem as fontes nos dosi sistemas e quais as fontes alternativas.

  23. andr3

    Podes também usar o line-height para garantir que lá por usarem fonts diferentes da default nao te “estragam” o layout… assim a linha, paragrafo, etc. fica com a mesma altura, mesmo que o texto seja menor. (convem dar um intervalo pequeno para haver margem de manobra.. testando com todas as fonts que definist no css, por exemplo)

    Não soluciona o caso em todas as situações, mas pode ajudar noutras. ;)

  24. Kiki

    Não sei como calcular o ems… Tipo 12 pixels eu sei o que é, qd vou para o ems fico copiando daqui e dali e não consigo calcular. Há uma maneira para novatos entenderem?

  25. Flavio Mendes

    Excelente artigo!

    Parabéns também aos comentários que tanto acrescentam.

Blogs que "linkam" para aqui

  1. ivogomes.com » Novamente sobre o tamanho do texto
    11 de Maio de 2006, 16:24
  2. MUF #25: Avaliação heurística da interface do Café Colombo – Fator.WS
    2 de Setembro de 2014, 17:55
  3. MUF #25: Avaliação heurística da interface do Café Colombo
    11 de Janeiro de 2017, 20:47

Comente!

* Campo obrigatório, de modo a aparecer o seu nome como autor do comentário

* Campo obrigatório, mas não será mostrado no site

* Campo obrigatório, convém escrever alguma coisa ;)

São permitidas algumas tags HTML, como
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>