Dec162006
Melhorando a legibilidade com espaço em branco
Pensemos na seguinte hipótese: e se quando nossa escrita foi criada ela tivesse todas as palavras juntas? Seriademasiadodifícilentendercadafraseescrita1. Pensemos na salada de letras que resultaria ao se utilizar quebras de página, pontos, vírgulas e parágrafos. Um completo desastre!
1 – Para quem não entendeu, a frase diz: “seria demasiado difícil entender cada frase escrita”.
Pois é, assim como nossos antepassados pensaram inteligentemente ao desenvolver nossa grafia com espaçamento entre as palavras, nós, designers, também precisamos pensar inteligentemente ao dispor texto em um design. A dica aqui não vale só para o webdesign: qualquer forma de design com elementos textuais pode se valer dessa prática.
Espaço em branco como elemento do design
Um estudo realizado em 2004 mostra o quão importante é a correta utilização dos espaços em branco. No estudo, foram realizados testes de performace de leitura por usuários levando em conta quatro tipos de layout compostos de texto. De todos os layouts, o que compunha uma melhor definição tipográfica (margens e espaço entre linhas) foi, indiscutivelmente, a melhor solução de disposição de texto em performace de leitura e em capacidade de compreensão pelos leitores. Para os textos sem margens (aqueles que ficam colados nas laterais da viewport do browser, por exemplo), a peformace de leitura caiu substancialmente.
Espaço em branco, na realidade, é uma alusão aos espaços sem preenchimento textual e/ ou de imagem – que não compõe o design – que podem ser utilizados para melhor organizar a área ativa do site, ou seja, é toda área que é parte do design (seja em branco ou não) que não influe na interação com o usuário.
Usar espaço em branco não necessariamente é ter falta de conteúdo
É notório que quanto menos conteúdo, mais fácil se torna organizar os componentes de um layout. Conseqüentemente, mais fácil se torna, também, separar estes componentes em toda a área do layout. Acredito que esta realidade acaba por contaminar o pensamento que alguns webdesigners têm sobre layouts de muito conteúdo, fazendo com que sites do gênero sejam criados com dados enfileirados e empilhados, sem a preocupação com a segmentação e, principalmente, a separação destes. É importante lembrar que, quanto mais conteúdo se têm a diagramar, mais cuidado se deve tomar com a separação deste no layout. Nestes casos, os espaços em branco passam de parte meramente decorativa do layout, para parte imprescindível na construção de uma boa usabilidade e acessibilidade do mesmo. ;)
Atualização 2007/01/09: Mark Boulton acada de postar um artigo sobre espaços em branco no A List Apart. Vale a pena dar uma conferida.

Demétrios - 28/09/07 às 10:38 am
Gostei muito do seu post sobre espaço em branco, encontrei seu site a procura de um post como este, tenho um patrão que tudo pra ele tem que ser grande e ocupar os espaços em branco, tenho sempre que respirar fundo e contar até 10…rs..
parabéns pelo site que está bem clean e organizado.
Como sugestão queria ver mais post seus!
Até mais.
Daniele Viana - Blog» » Tipografia organização dos elementos - 2/11/07 às 10:53 pm
[...] Uma das coisas mais importantes quando falamos de tipografia é a quantidade de espaço em branco. No caso do MPM, ainda que a página seja longa e com muita informação, ela não parece sobrecarregada, isso acontece devido aos espaços que separam cada bloco de conteúdo, e também os tÃtulos. Quando os espaços estão bem definidos tudo parece estar no lugar certo e a tipografia é utilizada para determinar a hierarquia, dando destaque as informações mais relevantes. Veja mais aqui. [...]
Espaço em branco. Use-o! | Design Coletivo - 6/11/07 às 1:07 pm
[...] informações: http://www.alistapart.com/articles/whitespace http://ramonpage.com/2006/12/16/melhorando-a-legibilidade-com-espaco-em-branco/ [...]
Tutorial Iniciante de CSS: Texto « Codando - 7/03/08 às 8:01 pm
[...] mais importate dela, compensa demorar um pouco mais nele. A primeira é o texto do Ramon Page sobre melhorar a legibilidade com espaços em branco. [...]
legibilidade.net - RamonPage.com . Web na ponta do lápis » Melhorando a legibilidade … - 2/02/09 às 9:54 am
[...] performace de leitura por usuários levando em conta quatro tipos de … Veja o post completo clicando aqui. Post indexado de: [...]
RamonPage.com . Web na ponta do lápis » 6 comparações entre interfaces de websites e sistemas web - 8/02/09 às 12:02 pm
[...] precisam receber maior cuidado na separação dos textos (veja este meu artigo que trata um pouco [...]
Danielevsilva» » Tipografia organização dos elementos - 23/06/09 às 12:15 pm
[...] Uma das coisas mais importantes quando falamos de tipografia é a quantidade de espaço em branco. No caso do MPM, ainda que a página seja longa e com muita informação, ela não parece sobrecarregada, isso acontece devido aos espaços que separam cada bloco de conteúdo, e também os tÃtulos. Quando os espaços estão bem definidos tudo parece estar no lugar certo e a tipografia é utilizada para determinar a hierarquia, dando destaque as informações mais relevantes. Veja mais aqui. [...]