:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 4 - Mais estilização de texto

Antes de prosseguirmos com formatação de textos será interessante familiarizá-lo com alguns termos básicos de tipografia.

Quando dizemos, tamanho de fonte ou em CSS font-size, estamos nos referindo à distância que vai desde o topo de uma letra maiúscula tal como o 'A' até a base de uma letra que se estende o mais baixo possível (letra descendente) tal como o 'p' ou 'y'. Existe ainda um espaço extra abaixo das letras, chamado de 'leading'. Este nome vem do fato de as impressoras usarem este espaço como faixas para colocação de uma guia ('lead') metálica com a finalidade de definir as entre linhas.

Figura ilustra com letras  as distâncias descritas

Hoje não usamos mais a 'lead', nós simplesmente determinamos o espaço total entre a base de uma linha e a da linha seguinte. O espaçamento entre linhas em consequência vem a ser a altura da fonte mais o espaço extra da 'lead'. Em CSS, dizemos line-height: 180%; com o valor especificado em percentagem, ems ou pixels (px). Saiba mais sobre espaçamento de linhas, adiante.

Figura ilustra line height

Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra, mas esta prática é bastante específica e usada em fórmulas matemáticas e não nos aprofundaremos muito nesta propriedade agora. Para o exemplo mostrado abaixo eu poderia ter usado a marcação com as tags <sup>2</sup> porém com CSS eu tenho muito mais controle.

E=MC2

 

CSS também possibilita o controle sobre o espaçamento horizontal entre as letras e as palavras.

Figura ilustra três diferentes espaçamentos de letras

 

Isto é apropriado para obter efeitos visuais em títulos.

TÍTULO ESPAÇADO

letter-spacing: 0.5em; word-spacing: 0.5em

Projetando legibilidade.

Em épocas passadas em que os navegadores não ofereciam um bom suporte para as CSS um aspecto de vital importância para formatação de textos, disponível até mesmo em máquinas de escrever mais modestas, era impossível de se conseguir com a marcação HTML - trata-se do espaçamento entre as linhas do texto, 'line spacing'. Quando o espaçamento entre as linhas de um texto é nulo ou muito reduzido, a leitura torna-se difícil. Quanto mais longas forem as linhas tanto maior será a dificuldade de leitura.

Linhas muito curtas provocam interrupções constantes na maneira natural de leitura da esquerda para a direita.

Linhas mais longas que um tamanho considerado ideal são também de leitura cansativa e tornam difícil a localização do início da próxima linha.

Para uma leitura confortável as linhas devem ter um comprimento entre uma vez e meia e duas vezes o comprimento ocupado por todas as letras (minúsculas) do alfabeto - isto significa de 40 a 60 caracteres ou de oito a dez palavras.

Se as linhas são mais longas, o aumento do espaço entre as linhas ajudará na legibilidade. Muitas das antigas páginas web apresentam textos estendendo-se da esquerda para a direita, ocupando toda a largura da tela, independente do tamanho do monitor. Alguns sites ainda adotam esta prática - e hoje em dia as telas tornaram-se bem maiores.

Por padrão, há um espaçamento entre as linhas de um texto. Este espaçamento padrão é de aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja, desde o topo de uma letra maiúscula até a base de uma letra descendente - ver figura no primeiro título deste tutorial) . Com CSS você poderá definir o espaçamento que desejar para as entre linhas. Se você está usando tamanhos de fontes relativos, você poderá definir o espaçamento entre linhas como uma percentagem do tamanho da fonte - font-size: 1em; line-height: 1.5em (o mesmo que 150%). Se você está usando tamanhos absolutos você poderá definir o espaçamento entre linhas assim: font-size: 11px; line-height: 16px.

As especificações para este parágrafo são: font-size: small; line-height: 180% o que vem a ser equivalente a uma vez e meia o espaçamento entre linhas de um processador de texto antigo.

Para uma demonstração, veja este exemplo onde o primeiro bloco de texto construido, não possui margens e nem uma line-height (espaçamento entre linhas). As estilizações gerais para o body definem somente o tamanho, família e cor das fontes, bem como a cor do fundo...


 body {
  color: #5d665b;
  font-size: small;
  font-family: Verdana, Geneva, Arial, sans-serif;
  background-color: #e8eae8;
  }

O bloco de texto logo a seguir está dentro de um par de tags <div>...</div>, e é como se fosse uma página dentro da página. Tem uma margem esquerda de 250px e direita de 200px e o espaçamento entre linhas foi definido em 180%. Estes estilos foram acresentados ao corpo da página por um processo conhecido como herança ('inheritance'). Exatamente como uma criança herda as características de seus pais, as quais serão passadas para seus filhos, em CSS, este processo de "cascata" também acontece, com elementos herdando os estilos definidos para elementos que os contém.

  <div style="margin-left: 250px; margin-right: 200px; 
  line-height: 180%">...</div>

As 'divs' contidas nas páginas são uma parte muito importante das folhas de estilo em cascata e veremos mais detalhes sobre elas, adiante neste tutorial.
 

Contraste

Diferentemente de uma página impressa que você lê por reflexão de luz, uma página em uma tela monitor tem sua luminosidade própria. As diferenças de brilho entre um texto preto e um fundo branco tem magnitude muito maior em uma tela do que em uma página impressa.

Porções grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol intenso sem uso de óculos escuro. Em casos extremos você apertaria os olhos para diminuir o efeito da claridade e muito provavelmente no geral iria se sentir desconfortável e até mesmo sem saber bem porque.

Diminuir o contraste numa página Web, faz com que ela se torne mais confortável e menos estressante para leitura. Mas por outro lado, se você exagerar acabará dificultando a leitura para pessoas com restrições visuais.

Em um artigo como este, onde há uma considerável quantidade de texto para leitura, onde o usuário terá que passar um período longo de tempo em frente a tela do monitor, é importante tornar a tarefa o mais confortável possível.

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

Criado em: 2005-04-11