Quase desde o início do DreamsInCode que tenho tido uma luta com a tipografia do mesmo. Convém lembrar que eu sou mais programador do que designer, e que demoro eternidades até ficar satisfeito com cores, fontes, tamanhos, ícones…

A regra número um para fontes de leitura em monitores de computador é usar fontes sem serifas. As opções para a web ainda são algumas, como as mais clássicas Verdana (em uso neste momento) e Arial, assim como algumas mais específicas, como Tahoma (em uso anteriormente) ou Trebuchet MS. Estas três fontes comportam-se da seguinte maneira:

Arial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit eget dui ultrices pretium. Donec augue augue, consectetur quis ultricies nec, tincidunt sit amet felis. In ac nunc diam, sit amet scelerisque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pretium tellus vitae nisl vulputate dapibus. Cras ut ornare dui. Morbi lacinia pharetra lectus vitae pellentesque. In suscipit, mauris et laoreet vehicula, est velit pharetra mauris, at venenatis tellus odio imperdiet nunc.

Tahoma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit eget dui ultrices pretium. Donec augue augue, consectetur quis ultricies nec, tincidunt sit amet felis. In ac nunc diam, sit amet scelerisque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pretium tellus vitae nisl vulputate dapibus. Cras ut ornare dui. Morbi lacinia pharetra lectus vitae pellentesque. In suscipit, mauris et laoreet vehicula, est velit pharetra mauris, at venenatis tellus odio imperdiet nunc.

Trebuchet MS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit eget dui ultrices pretium. Donec augue augue, consectetur quis ultricies nec, tincidunt sit amet felis. In ac nunc diam, sit amet scelerisque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pretium tellus vitae nisl vulputate dapibus. Cras ut ornare dui. Morbi lacinia pharetra lectus vitae pellentesque. In suscipit, mauris et laoreet vehicula, est velit pharetra mauris, at venenatis tellus odio imperdiet nunc.

Como podemos ver, com o tamanho de fonte actual (11 pixels para texto corrido), qualquer uma destas fontes é menos legível que a Verdana. Isto tem uma razão: a fonte Verdana foi comissionada pela Microsoft em meados da década de 90 especificamente para facilitar a leitura em ecrãs de computador em tamanhos mais pequenos. Alguns designers não aconselham o seu uso precisamente por causa disso, visto que, para o mesmo tamanho, a fonte Verdana é sempre maior, sendo notório, sobretudo, quando se mistura com fontes serifadas, como Times New Roman.

Mas voltando aqui ao DreamsInCode. Desde o início quis usar a Tahoma ou a Trebuchet. Gosto do perfil mais fino, da elegância da letra, como, aliás, qualquer fonte na classificação humanist. A Trebuchet MS apresentava algumas incompatibilidades com sistemas Apple, e ainda a usei durante alguns dias no início, mas acabei por me fixar na Tahoma (e Geneva, para compatibilidade), com tamanho 12 e altura de linha 18. Recordando:

Tahoma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit eget dui ultrices pretium. Donec augue augue, consectetur quis ultricies nec, tincidunt sit amet felis. In ac nunc diam, sit amet scelerisque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pretium tellus vitae nisl vulputate dapibus. Cras ut ornare dui. Morbi lacinia pharetra lectus vitae pellentesque. In suscipit, mauris et laoreet vehicula, est velit pharetra mauris, at venenatis tellus odio imperdiet nunc.

Neste momento, vamos fazer aqui uma pausa nos tipos de fonte, e vamos à altura da linha e espaçamentos verticais.

Para uma mancha de texto ser agradável à leitura, é preciso fazer uma escolha inicial quanto ao tamanho da linha. No caso, a escolha foi de 18 pixels, ou 150% do tamanho da fonte. Quando se faz esta escolha, ela tem que ser cumprida sempre e em todo o lado. Por exemplo, se tivêssemos um título de 18 pixels, e ficando a altura de linha de 18 pixels insuficiente, a altura de linha para esse título teria de ser de 36 pixels, de modo a que uma linha de título ocupasse tanto como duas linhas de texto. Em alternativa, a altura de linha poderia ser de 24 pixels, e os 12 pixels restantes serem distribuídos pelas margens superior e inferior (6+6 para centrar, ou qualquer outra combinação).

O que esta combinação de Tahoma a 12 pixels com altura de linha a 18 pixels me fazia à página principal é que não me agradava nem um bocadinho. Devido ao enorme espaçamento vertical, a página ficava muito esticada e muito conteúdo ficava para lá da altura normal de um browser. Depois de alguns meses neste formato, resolvi que era tempo de morder o cabedal e reduzir o tamanho de letra.

A minha primeira experiência foi reduzir apenas o tamanho e altura de linha e manter a família mas, como vimos atrás no primeiro exemplo da Tahoma, seria sacrificar a legibilidade duma forma impensável. Não tinha hipótese: tinha mesmo que converter à Verdana. E é como está. A fonte passou para 11 pixels e a altura de linha para os 16 (cerca de 145%). Se alguém achar que precisa de uma lupa para ler este texto, ou se tiver uma ideia melhor, by all means, estejam à vontade para mandar o vosso palpite.

Uma última palavra sobre a tipografia e imagens: as imagens devem ter uma altura que encaixe na altura de linha, sob pena de partirem o fluxo do texto. Neste caso, todas as imagens deveriam ter uma altura múltipla de 16 pixels – e, sim, eu sei que ainda há por aí algumas que não o têm, mas estou a trabalhar nisso.