CSS: Aplicando estilos a elementos de texto

Neste artigo aprenderemos a customizar a cor, tamanho e fonte, bem como diversas outras características de um texto, por meio das propriedades de font e text no CSS.

Fique por dentro
Apesar de alguns sites serem mais dependentes de elementos de texto do que outros para se comunicarem com o usuário, tais elementos estão em todo lugar. Nesse artigo veremos quais propriedades podem ser usadas para que um texto tenha a sua aparência customizada em uma página.

O CSS dispõe de diversas propriedades para alterar a aparência de elementos de texto. Com elas podemos customizar a cor, tamanho e fonte, bem como diversas outras características desses elementos.

A maior parte dessas propriedades estão agrupadas em font e, portanto, começaremos por elas.

Negrito

A propriedade font-weight é utilizada para aplicar ou remover negrito de um elemento de texto.

O valor de font-weight pode ser numérico ou uma palavra. Ambos correspondem a quão espessa será a fonte.

Os valores numéricos são 100, 200, 300, 400, 500, 600, 700, 800 e 900. Dentre eles, 400 corresponde a aparência padrão da maioria das fontes e 700 ao negrito.

No Código 1 vemos o exemplo de uma regra que utiliza font-weight.

p { font-weight: 400; }
Código 1. Regra utilizando font-weight

Quando aplicados a elementos esses valores podem produzir o efeito observado na Figura 1.

Figura 1. Aplicação dos valores de 100 a 900 em elementos p

Como podemos observar, os valores de 100 a 500 não produzem efeitos diferentes na fonte padrão do navegador. Podemos dizer o mesmo dos valores de 600 a 900. Portanto, algumas fontes podem não demonstrar alteração em sua aparência por não possuírem uma versão correspondente ao valor utilizado.

A fonte Roboto, distribuída pela Google, suporta todos essas variações de peso e alguns outros estilos. Demonstramos isso na "

[...] continue lendo...

Artigos relacionados