Novamente sobre o tamanho do texto
Quinta-feira, 11 de Maio de 2006
Depois de alguma discussão sobre qual a melhor forma de definir o tamanho do texto num website, hoje encontrei uma possível solução para o problema e que funciona em qualquer browser/plataforma.
O Yahoo! Developer Network disponibilizou na sua User Interface Library uma solução que permite normalizar o tamanho do texto em todos os browsers, de forma muito simples. Através da inclusão de um ficheiro CSS, define-se o tamanho de texto para um valor fixo em pixeis. Isto fará com que o tamanho base do texto seja igual em todos os browsers.
Depois, quando se quiser definir o tamanho do texto em alguma parte do site, usam-se percentagens para conseguir o tamanho pretendido, assim:
<style>blockquote p {font-size:77%;}strong {font-size:122%;}</style>
Os valores das percentagens correspondem a um valor em pixels. Sendo assim, pode usar-se a seguinte tabela para definir o tamanho do texto:
| Se queremos este tamanho em pixels (px) | Declaramos esta percentagem (%) |
|---|---|
| 10 | 77 |
| 11 | 85 |
| 12 | 92 |
| 13 | 100 |
| 14 | 107 |
| 15 | 114 |
| 16 | 122 |
| 17 | 129 |
| 18 | 136 |
| 19 | 144 |
| 20 | 152 |
| 21 | 159 |
| 22 | 167 |
| 23 | 174 |
| 24 | 182 |
| 25 | 189 |
| 26 | 197 |
Nada mais simples.
Podem fazer download do código fonte aqui.
Ivo Gomes tem 29 anos e é licenciado em
Rui Moura
11 de Maio de 2006, 16:58
Estes amigos da Yahoo estão a ser porreiros. Têm mandado cá para fora umas coisas interessantes, e esta é uma delas.
Abilio Santos
11 de Maio de 2006, 17:12
Esse sistema tem o problema de, para utilizadores que definem um tamanho de letra no browser, por defeito e não por pagina, esse default não vai ser respeitado.
E para o bem ou para o mal o utilizador tem o direito, que devemos respeitar, de definir os seus defaults.
Por exemplo: um utilizador com pouca acuidade visual que defina o tamanho de letra no seu browser para x-large no IE ou pra 26px no firefox para conseguir ver o texto vai reclamar com esse site…
Ivo Gomes
11 de Maio de 2006, 17:19
Se conceberes um site definindo o tamanho do texto em pixels também te acontece a mesma coisa… E a maior parte dos sites têm o tamanho do texto definido dessa maneira, impedindo que os utilizadores (do Internet Explorer) consigam aumentar ou reduzir o tamanho do texto.
Em qualquer outro browser podes alterar o tamanho do texto usando a combinação de teclas CTRL+ e CTRL-.
O uso de percentagens permite que os utilizadores do IE também possam fazer o mesmo, no entanto nem todos os browsers usam a mesma escala, por isso um texto definido a 120% no IE é diferente de um texto definido a 120% no Firefox.
O que esta técnica faz é normalizar estes valores para que 120% seja igual em todos os browsers.
Abilio Santos
11 de Maio de 2006, 17:20
É essencialmente por isso que, normalmente, tento não mexer no tamanho default da letra e defino estilos relativamente a esse default via %.
Os únicos prejudicados são os utilizadores que não sabem trabalhar com o browser e os demasiado preguiçosos para o fazer (tipo eu).
Tem a enorme vantagem, na minha pesrspectiva, de que aqueles utilizadores que se importaram o suficiente (ou precisam de se importar) com o default do tamanho da fonte não sairem defraudados.
Abilio Santos
11 de Maio de 2006, 17:26
Quer dizer… A não ser que o cliente tenha outra opinião… Ele normalmente tem razão.
Claudio Franco
11 de Maio de 2006, 17:53
Posso estar errado, mas usando “em” o texto continua a ficar escalável.
Penso eu de que…
Ivo Gomes
11 de Maio de 2006, 18:00
Só usando “px” é que o texto não é escalável.
andr3
12 de Maio de 2006, 15:54
A grande utilidade deste pacote é que remove as incoerências de tamanho entre browsers. Bom trabalho, yahoo-folks.
Acho é que falta aí nessa tabela a resolução.
“Se quiser tamanho de 10px [numa resolução 800x600] …” para ter uma referência. Não?
E o mesmo pode ser aplicado por ems. 1em não é igual a 100%, pergunto eu?
Claudio Franco
12 de Maio de 2006, 16:04
Os “em” são valores que trabalham acima de uma base, tipo %… se é que me fiz entender
Mateus Neves
12 de Maio de 2006, 17:27
Uma ótima solução, não imaginava que fosse simples assim. Obrigado pela dica.
Jonathan Aantos
17 de Maio de 2006, 15:47
Eu gosto de usar body { font-size: 62.5%; } que vi no Typetester’s base font size através do Typetester – Compare fonts for the screen – Compare fonts for the screen.
Jorge Laranjo
19 de Maio de 2006, 03:01
Eu continuo a usar `em´ porque px não deixam o texto escalável…
Onde está a acessibilidade? Acessibilidade não é também uma forma de usabilidade ?
Ivo Gomes
19 de Maio de 2006, 07:56
Eu também costumo usar ‘em’ ou ‘%’. Com esta técnica do Yahoo! também se usam ‘%’ por isso o texto é sempre escalável.
A grande diferença é que tens uma tabela base em que podes definir com bastante exactidão que um texto com 152% de tamanho fica exactamente do mesmo tamanho que um texto definido para 20px. Com a diferença que é escalável enquanto que o ‘px’ não é (só no Internet Explorer é que não é).
Acessibilidade não significa usabilidade, nem usabilidade significa acessibilidade. Podes ter um site 100% acessível e pouco ou nada usável, e vice-versa.