Tamanhos de fonte e entrelinha
Ao definir o tamanho da fonte e da entrelinha o maior problema é escolher que tipo de medida vai ser utilizado. Abaixo temos a lista das possíveis medidas no CSS:
px | pixels, uso recomendado |
em | Ems. Unidade relativa de tamanho ao que o elemento pai tem estabelecido. Embora inicialmente seja um pouco confuso ao trabalhar com em é possível alterar apenas um tamanho de fonte para alterar todos os demais tamanhos permitindo uma maior acessibilidade. |
rem | Rems. Similar ao em porém é relativo ao tamanho estabelecido no root do documento (geralmente na tag html) e não ao seu pai, tornando a sua implementação mais simples. |
% | porcentagem |
cm | centímetros, unidade de impressão, uso não recomendado |
mm | milimetros, unidade de impressão, uso não recomendado |
in | polegadas, unidade de impressão, uso não recomendado |
pt | Points (1/72 in), unidade de impressão, uso não recomendado |
pc | Paica (12 points), unidade de impressão, uso não recomendado |
O uso mais recomendado é o pixels pois é o que tem menor variação entre sistemas operacionais e, embora seja uma medida absoluta, é possível para o usuário aumentar o tamanho da fonte nos navegadores mais modernos.
As unidades relativas, em e rem, tem sua medida relativa ao tamanho padrão definido pelo usuário. Ou seja, na configuração do navegador tem a fonte padrão e seu tamanho (por exemplo: Times New Roman com 12px) e caso seja utilizado o valor 1em ou 2ex a sua fonte vai aparecer no mesmo tamanho que a fonte padrão no navegador (em nosso exemplo 12px). Essas unidades só devem ser utilizadas quando o tamanho padrão é definido por outra definição de CSS, por exemplo, você define o tamanho da fonte para 12px e a altura da linha para 1.5em.
Agora que já foi esclarecido os principais pontos em relação a definição de tamanhos vamos ver a definição de tipo de fonte, tamanho da fonte, entrelinha, variante, peso, cor, estilo e decoração no CSS:
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
line-height: 2em;
font-weight: bold;
font-variant: small-caps;
text-transform: lowercase;
color: #003399;
text-decoration: overline;
text-indent: 15px;
vertical-align: -5px;
letter-spacing: -1px;
word-spacing: -2px;
white-space: nowarp;
}
Sendo que:
font-family | define o tipo de fonte a ser utilizado |
font-size | define o tamanho da fonte |
font-style | define o estilo da fonte (inclinado ou normal) |
line-height | define a altura da linha (entrelinha) |
font-weight | define o peso da fonte (normal ou negrito) |
font-variant | define a variação da fonte (normal ou small-caps) |
text-transform | estabelece uma transformação para o texto (para minúsculo, maiúsculo ou capitalizado) |
color | define a cor do texto |
text-decoration | estabelece que tipo de decoração vai ter o texto (o link tem por padrão o underline) |
text-indent | define o recuo da primeira linha do bloco de texto |
vertical-align | alinhamento vertical do texto que pode ser um valor definido ou: baseline, sub, super, top, superior, text-top, middle, bottom, text-bottom |
letter-spacing | distância entre as letras |
word-spacing | distância entre as palavras |
white-space | controla os espaços em branco: |