Trabalhar com texto inclui, por exemplo, espaçamento entre palavras e letras, mas também decoração ou alinhamento do texto. Para o design do texto, as seguintes propriedades são fornecidas: letter-spacing,line-height, text-align, text-decoration, text-indent, text-transform, vertical-align entre outros que trataremos aqui
A propriedade descreve o espaço entre duas letras. A palavra normal pode ser definida como o valor. Isso indica que o espaçamento entre as letras deve corresponder ao espaçamento normal definido na fonte. A distância também pode ser definida como comprimento. Isso indica a distância exata entre as duas letras. Exemplo:
p { letter-spacing: 2px; }
A altura das linhas é definida com a propriedade line-height. Indica, seja como medida de comprimento, número ou porcentagem, a distância entre as duas linhas de base vizinhas. O valor também pode ser informado como normal. Isso indica que a altura da linha deve ser igual à definida pela fonte. Exemplo:
p.fruta { line-height: 2; }
p.carro { line-height: 200%; }
p.transporte { line-height: 2em; }
text-align
A propriedade descreve o alinhamento do texto. Os seguintes valores são possíveis:
left - o texto é alinhado à esquerda.
right - o texto é alinhado do lado direito.
center - o texto é centralizado (no meio).
justify - o texto é justificado (uso da linha inteira).
text-decoration
O text-decoration texto pode ser “decorado” com essa propriedade. Os seguintes valores são possíveis:
none - sem decoração
underline - O texto está sublinhado
overline - O texto está sublinhado (linha acima do texto)