8 Maneiras Simples de Melhorar as Técnicas de Tipografia

Muitas pessoas, incluindo designers, acham que tipografia consiste em seleccionar apenas um tipo de letra, um tamanho de fonte e se é regular ou em negrito.

Para a maioria dos utilizadores, tipografia fica por ai. Mas há muito mais para

atingir a mensagem desejada, ou seja, até escolher a melhor letra a usar. Normalmente os detalhes dos tipos de

letra são ignorados por grande parte das pessoas.

Estes pormenores dão ao designer um total controlo sobre o tipo de letra, permitindo assim criar belas composições gráficas.

Sabemos que os tipos de letra podem ser utilizados em muitos tipos de média mas neste artigo vai-se centrar as atenções para a Web, ou seja, web design utilizando Css.

Seguem então 8 maneiras de melhorar a tipografia que normalmente é utilizada nos projectos criados hoje em dia.

1. Medida

A medida é o comprimento de uma linha de tex

to. Para o olho do leitor, linhas de texto curtas ou longas podem cansar e distrair a leitura. Um texto escrito de maneira longa perturba o ritmo de leitura porque o leitor perde tempo em localizar a proxima linha de texto. A unica maneira de a medida de texto ser aceitavel é com uma pequena quantidade de texto.

Para a melhor legibilidade a medida ideal é entre 40 a 80 caracteres, incluindo os espaços. Para uma única coluna de texto 65 cara

cteres é considerado o ideal.

Uma maneira simples de calcular a medida é utilizando o método que Robert Bringhurst deu a conhecer ao mundo, ou seja, Multiplicar o tamanho do tipo de letra por 30.

Assim, se o tamanho é 10px, multiplicando-se por 30 dá-lhe uma medida de 300px ou cerca de 65 caracteres por linha.

O código ficaria algo parecido com isto:

p (

font-size: 10px;

max-width: 300px;

)

__________________________

2. Espaçamento

Espaçamento é o espaço entre as linhas do texto que desempenha um grande papel na legibilidade.

Se as linhas estiverem correctamente espaçadas tornam mais fácil para o leitor acompanhar o texto e melhora a aparência geral da escrita. Espaçamento também pode modificar a cor da tipografia, cor esta que representa é a densidade ou tom de uma composição.

Muitos fatores afectam o espaçamento: tipo de letra, tamanho, largura, forma, medida, espaço entre caracteres, etc..

Quanto maior é a medida, mais espaçamento é necessária. Além disso, quanto maior o tipo de letra, menos necessário é o espaçamento. Uma boa regra é definir o espaçamento 2 a 5 pts maiores que o tamanho de letra dependendo do tipo de letra que se está a usar. Portanto, se definir o tamanho do tipo de letra para 12pt, um espaçamento de 15pt ou 16pt funcionará bem na web.

Isso leva algum tempo até obter o espaçamento ideal mas abaixo está um exemplo de como o código poderia ser

body (
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;

)

__________________________

3. Aspas

As aspas na margem do corpo do texto.

Por não fazer uma aspa alinhada com o texto irá interromper a margem esquerda e perturbar o ritmo do leitor.

As aspas devem manter intacto o alinhamento à esquerda, e assim aumenta-se a legibilidade.

É super facil definir isto em CSS usando um espaço de retrocesso.

blockquote {

text-indent: -0.8em;

font-size: 12px;

}

O indentamento negativo varia consoante o tipo de letra, o tamanho e as margens.

__________________________

4. Ritmo Vertical

Uma linha de base é o alicerce para a grelha tipográfica de ritmo consistente numa página. Essa linha permite que os leitores de maneira fácil sigam o fluxo do texto, que, por sua vez, aumenta a legibilidade. Um ritmo contínuo no espaço vertical mantém todo o texto numa rede coerente de modo a que proporção e equilíbrio são mantidas em toda a página, não importa o tipo de tamanho, espaçamento ou medida.

Para fazer este alinhamento vertical em CSS, queremos que o espaço entre os elementos e o espaçamento entre caracteres seja igual ao tamanho da linha base.

Por exemplo, vamos imaginar que estamos a usar uma linha base de 15 pixels, ou seja, há 15 px entre cada linha. O espaço entre cada paragrafo será tambem de 15 px.

Aqui está um exemplo:
body (
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
)

p (
margin-bottom: 15px;
)
Isto permite que cada parágrafo se alinhe com a grelha, mantendo o ritmo vertical do texto.

___________________________

5. Viúvas e Orfãos

Uma viuva é uma linha curta ou uma palavra solta no fim de um parafrafo. Um orfão é a palavra ou a linha no inicio ou no fim de uma coluna que é separada do resto do paragrafo. Este tipo de elementos perturbam a leitura. Podem ser evitados ajustando o tipo de letra, o tamanho, o espaçamento, a medida, entre outros ou simplesmente introduzindo quebras de linha manualmente.

Infelizmente não há uma maneira facil de prevenir estes acontecimentos com CSS. Uma maneira de os eliminar é a que foi referida em cima. Existem plug-ins para a web que permitem a correcção destes elementos acrescentando um espaço sem quebra entre as duas ultimas palavras do elemento.

6. Ênfase

Dar ênfase a uma palavra sem perturbar a leitura é importante. O modo Itálico é considerado o ideal para dar ênfase a palavras. Outros tipos de ênfase são: Negrito, Sublinhado, Maiúsculas, tamanho cor entre outros... Não importa o que se utiliza, deve-se limitar á utilização de apenas um. Combinações normalmente não são muito aconselhadas.

Aqui ficam alguns exemplo de maneiras diferentes de criar ênfase em CSS

span {

font-style: italic;

}

h1 {

font-weight: bold;

}

h2 {

text-transform: uppercase;

}

b {

font-variant: small-caps;

}

É bom relebrar quenem todos os tipos de letra suportam itálico, negrito, etc.

_________________________________

7. Escala

Deve-se compor sempre com uma escala definida, mesmo que seja uma escala criada "há séculos" ou uma escala de um tipo de letra criado pelo utilizador. Uma escala é importante porque estabelece uma hierarquia que melhora a leitura e cria harmonia no texto.

__________________________

8. Justificação de Texto

Quando se defini um bloo de texto injustificado com alinhamento á esquerda ou direita deve.se verificar se não há um buraco grande demais no final das linhas de texto. Um buraco muito grande distrai o leitor e perturba a leitura. Desorganiza o aspecto do texto bem como foge a outras regras de boa estrutura.

Não há maneira de controlar este factor em CSS, portanto, para contornar esta situação devem ser feitos ajustes individuais e manualmente no bloco de texto.

A utilização de hifen pode tambem ajudar a evitar estes buracos grandes entre linhas e no final das mesmas. Talvez no futuro CSS3 poderemos encontrar funcionalidades que contornem estes problemas. Actualmente já existem algumas soluções para evita estes problemas.