PXtoEM.com

Em uma de minhas conversas com meu amigo Renan, ele me perguntou se eu já usei a unidade de medida “EM” para textos em meu CSS. Respondi que ultimamente tenho usado a unidade sim.
O “EM” é uma unidade derivada da porcentagem, ou seja, se você definir um tamanho em uma determinada região do código poderá fazer com que os textos que descendem dela tenham tamanhos relativos a uma determinada percentagem do valor definido nela.
Algumas pessoas costumam dizer que é uma medida de acessibilidade, conforme o próprio Renan me informou. Mas particularmente não vejo utilidade para o usuário pois cada browser trata isso da forma que acha melhor. Mas em nível de desenvolvimento com certeza é uma mão na roda pois os textos manterão sempre a mesma proporção, consequentemente o programador só precisará mudar um valor: O valor-base, que serve como base para os cálculos de proporção.
Particularmente costumo definir apenas o font-size da tag body, assim quando tiver que alterar os tamanhos da página inteira só preciso mexer no tamanho do body.
Para me ajudar nessa missão descobri um site bastante útil: PXtoEM.com. O site é totalmente auto-explicativo e ainda traz toda a teoria sobre as medidas e como usá-las. Como se não bastasse ainda traz um CSS Text Reset baseado na base que você escolher.























Achei muito bom o site, estou utilizando a ferramenta que ele disponibiliza. Sobre a questão de usabilidade, acho que depende do público (usuário) que vai utilizar o site, no meu caso: 97% usam o internet explorer, ele tem a ferramenta que muitos usuários leigos e geralmente com alguma dificuldade de leitura costumam utilizar no navegador: exibir > tamanho da fonte. Observei usuários e vi que realmente tem pessoas que utilizam. Aí entramos em outra questão que é a Acessibilidade. Se em seu público tiver incluso pessoas de idade eu aconselho se procupar.
Mais uma vez parabéns pelo post
Então Renan. Como a gente havia discutido no dia, são poucos os usuário (principalmente idosos) que têm conhecimento de que podem acessar o menu: Exibir > Tamanho de Fonte …
No IE7 então, pra melhorar um pouco mais, esse menu fica escondido… E mesmo que você consiga achar esse menu ele não tem ação nem pra fontes setadas em ‘PX’ nem pra ‘EM’. Faça o teste. Usando as hotkeys CTRL+’+’ e CTRL+’-’ também não tem efeito nenhum, segundo meus testes aqui… Se você se preocupa com acessibilidade, usabilidade e esses bixos da mesma raça, a melhor solução é o velho menuzinho do tamanho da fonte, conforme vemos no G1 logo acima do início do texto: http://g1.globo.com/Noticias/Economia_Negocios/0,,MUL978624-9356,00-JAPAO+PRODUCAO+INDUSTRIAL+TEM+QUEDA+RECORDE+DE.html . E como você, mais do que eu, sabe que o usuário não gosta de pensar, essas coisas têm que estar ao alcance de seus olhos sempre.
Valeu pelo comentário!
Esse recurso da Globo.com acho interessante também, mas pensa no usuário que tem problemas e toda vez que entrar para ler alguma notícia ter que ir lá do lado direito clicar várias vezes até chegar a fonte do tamanho desejado. O recurso de tamanho de fonte em “EM” de acordo com meus testes aqui funcionaram (quando eu coloco o tamanho da fonte em “EM” e vou lá no navegador e coloco fonte tamanho: Muito Grande, a fonte fica muito grande ). Já o recurso do Internet Explorer, ele realmente fica escondido, mas é utilizado por usuários com alguma deficiência que são acostumados a navegar.
Pois é… mas o erro tá aí… Você asssume que o usuário já conhece ou está acostumado a navegar… Só que uma pessoa de mais idade não sabe que precisa apertar o ALT pro maldito IE7 mostrar o menu… Bom, você mesmo me disse que comprou o livro “Não me faça pensar”, só me admira que você ainda tenha um pensamento desse tipo…
O que eu quis dizer é que o usuário que é acostumado a navegar PODE fazer o uso desse recurso do IE7, e não que todos usam ou devem usá-lo (e tem usuário que utiliza), caso seja utilizado a fonte em “EM”. Quem não é acostumado a navegar utiliza o botão igual da Globo.
Achei um artigo interessante: Dez testes rápidos para checar a acessibilidade ao seu web site
http://www.maujor.com/tutorial/acessibilidade/tentest.php
No ítem 5 fala exatamente o que estamos discutindo aqui.
Ok… vc achou UM artigo sobre o que você tá denfendendo… Não estou dizendo que a coisa é inútil… só me surpreendo pq vc diz que lê Steve Krug e Jakob Nielsen e deve estar cansado de saber que tudo que você quer que seja encontrado não deve ficar escondido, ainda relute em confiar no recurso oferecido pelo browser. Observe seus usuários… peça que eles aumentem o texto da página via browser… e jogue esses dados aqui pra nós.
De acordo com JAKOB NIELSEN:
Um site acessível é aquele que remove os obstáculos do caminho das pessoas; remover o obstáculo faz com que a deficiência seja superada. Por exemplo, permitir que pessoas com deficiências visuais redimensionem o texto resulta em melhor legibilidade, eliminando essa deficiência mesmo que a visão dessas pessoas continue a mesma.
Especificações relativas: Recomendamos configurar o tamanho do texto utilizando um esquema de tamanho relativo (como porcentagem e valores “EM”) em vez de tamanhos de texto fixo. Por exemplo, não especifique que um título deve aparecer em texto em 14 pontos. Diga que ele deve ser 140% do tamanho do corpo do texto. Se os usuários aumentarem o texto , o título continuará a aparecer maior que o restante do texto.
Criar layouts com um tamanho perfeito em pixels é fútil. Defina qual deve ser o padrão, mas deixe que as pessoas sobrescrevam sua interface predefinida. Manter o controle significa abrir mão da parte dele.
Um design líquido permite que um texto seja redimensionado em relação às configurações de navegador.
Livro: Usabilidade na Web – Projetando websites com qualidade,2007, de Jakob Nielsen e Hoa Loranger, página 227
Você não tá entendendo… não disse que isso é errado… só disse que deveria ser mostrado… se você tivesse prestado mais atenção ao invés de se preocupar em estar certo teria percebido… Só acho que esse tipo de recurso não deveria estar escondido debaixo do menu do IE…
Até qdo vai esse “trico”? uhauahuah
Mas acho isso mto massa, uma hora discutimos sobre figurinhas, depois sobre games; o tempo vai passando, agnt vai crescendo, e tornamos profissionais, mas sede de crescer e melhorarmos não para, mesmo tendo visões diferentes.
Parabéns ao dois ai pelo trabalho e o profissionalismo!!!
UAEHUAHaeU
bonito esse amor de vcs cara
ô vine! deixa pra quem manja… hehehe