Russ Weakley
03-May-03
This is a Portugese translation of Ideal line length for content.
Parafraseando uma passagem do "Web Style Guide - Basic design principles for creating web sites".
O tamanho ideal para uma linha de texto é baseado no filosofia do olho humano. A uma distância normal o arco do campo visual é somente algumas polegadas - cerca do tamanho de uma coluna de texto bem criada, ou cerca de 12 palavras por linha. Pesquisas mostram que a velocidade de leitura e a taxa de retenção cai quando o tamanho da linha excede o tamanho ideal, porque o leitor então precisa usar os musculos dos olhos e do pescoço para seguir do fim de uma linha para o começo da próxima. Se o olho precisa cruzar grandes distâncias em uma página, o leitor perdesse facilmente e deve procurar pelo começo da próxima linha. Estudos quantitativos mostram que o tamanho moderado de uma linha de texto siguinificativamente aumenta a legibilidade do texto.
Web Style Guide - Basic Design Principles for Creating Website
Patrick J. Lynch and Sarah Horton
2nd edition, page 97.
Eu gostaria de criar um site que use um tamanho de line otimisado. Eu tambem quero que o tamanho da linha fique dentro da faixa de tamanhos não importa qual o tamanho padrão da fonte que o usuário utiliza em seu browser. Isso é possível?
A maioria dos websites usam fixed-width (configurado para medida absoluta) ou flexible-width (configurado com uma porcentagem da tela, conteúdo redimenciona de acordo com o tamanho da tela). Ambos os metodos tem problems, onde o tamanho da linha e a diferença do tamanho da fonte padrão são uma preocupação.
As colunas do Fixed-width layout podem ser usadas para configurar a largura ideal se o usuário usa a fonte padrão do browser. Um exemplo seria a coluna configurada para 420 pixels. Este é quase um tamanho ideal de linha para usuários que tenham sua fonte em torno de 14-16px - fonte padrão normal do browser, mas esse não é o tamanho ideal para usuários que tenham sua fonte configurada para tamanhos maiores ou menores. Pixels são um valor absoluto de medida que não levam em conta o tamanho da fonte.
As colunas do Flexible-width tambem tem problemas. Você não pode controlar a janela do usuário, então a largura das colunas irão variar muito de usuário para usuário. Esta é frequentemente a solução ideal, como usuários tem controle sobre a largura da janela dos seus browsers e podem decidir por eles mesmos o tamanho confortavel para o tamanho da linha. Existem dois problemas.
O primeiro problema é ter que redimencionar a janela do seu browser toda vez que você muda de site para site - embora isso parece trivial, isto pode tornar-se inconviniente, e porque o usuário tem de mudar o tamanho da janela para ver o site?
O segundo problema é colocar a responsabilidade no usuário. Alguns usuários não sabem que eles podem redimencionar seus browsers e assumem que devem ler linhas de conteúdo muito largas. Isto realmente não é o ideal
A solução talvez seja configurar a largura usando em.
Para entender porque em pode criar uma largura de linha ideial nós primeiro precisamos estabelecer o que exatamente é um em...
Em um estilo tradicional de texto, um em é definido como a largura de uma M maiúsculo na face atual e tamanho de ponto. Um em-dash
era tradicionalmente a largura de um M maiúsculo, um en-dash
era metade da largura de um M maiúsculo e um em quad, a unidade de espaçamento geralmente usada para identação de parágrafos, era o quadrado de um M maiúsculo.
Em respresentação visual, um em é mais propriamente definido como simplesmente o tamanho de ponto atual. Por exemplo, em um tipo de ponto tamanho 12, um em é a distância dos 12 pontos. Um em quad é sempre o quadrado do tamanho que ele pertence. Então, um em quad do tipo 12pt é 12pt de altura x 12pt largura.
Em CSS, um em é uma medida relativa de tamanho que herda informações de tamanho de um elemento pai. Se o elemento pai é BODY Então o tamanho do elemente é na verdade determinado pelas configurações do tamanho de fonte do browser do usuário. Em uma instalação padrão do internet explorer (onde o tamanho padrão de fonte é 16px), 1em será 16px.
Usando um pedaço de texto qualquer, por exemplo "Lorem ipsum...", um comprimento ideal em em é em torno de 30-35ems. Isto é expresso pela regra:
width: 30em;
A beleza de disto é que esta medida relacionasse ao tamanho de fonte do usuário. Se você vai a um site com uma fonte menor ou maior que o tamanho padrão, a largura da coluna estará sempre dentro da faixa de tamanho.
Aqui está um exemplo de uma coluna definida com EM. Se você mudar as configurações de fonte do seu browser (ou clicar no links do lado esquerdo), a coluna automaticamente redimencionará com o tamanho da fonte
Eu não sugiro utilizar isto para blocos de navegação ou layouts detalhados, mas para layouts onde o conteúdo é importante, esta solução poderia ser considerada ideal.
Para tomar este passo adiante, a ultima flexibilidade seria especificar a largura da coluna dentro de uma faixa de tamanho. Isto permite ao usuário um grau de controle sobre o comprimento da linha, mas nunca deixa exceder um comprimento confortavel para leitura.
Isto poderia ser definido com a seguinte regra:
min-width: 25em;
max-width: 33em;
Aqui está um exemplo de uma coluna definida com EM com um minimo e um máximo. Claro, esta caracteristica não é suportada e por alguns browsers modernos (Internet Explorer para Mac/Windows) mas em um futuro próximo isto irá se tornar uma caracteristica padrão suportada. Se você não pode esperar pelo Internet Explorer, Svend Tofte escreveu um excelente artigo sobre como fazer o IE emular o comportamento do max-width.
O que você acha? Concorda ou discorda? Envie nos uma mensagem.
© 2012 Gruden All rights reserved.
Privacy Policy