Tamanho da fonte em CSS

Também podemos usar o CSS para mudar
o tamanho do nosso texto.

Como você pode ver olhando
os títulos nessa página

comparado aos parágrafos,
o navegador já providencia

estilos padrões com diferentes tamanhos
para elementos diversos.

Tem o tamanho da fonte do corpo.

e tamanhos maiores
para cada nível de título.

as vezes queremos ajustar
esses tamanhos.

E podemos fazer isso com a
propriedade 'font-size' do CSS.

Por exemplo:

E se quisermos que todo o texto
da página seja um pouco menor?

Bem, vamos para a tag 'style',

e adicionamos uma regra de CSS
para a tag 'body'.

E dentro dela,
colocamos a propriedade 'font-size'.

Agora, que valor deve ser atribuído
para o 'font-size'?

Como medimos o 'font-size'?

Essa é na verdade
uma ótima questão.

Porque existem pelo menos
dez diferentes unidades

que suporta CSS para 'font-size'.

iniciemos com a unidade
que você viu antes: pixels.

Usamos pixels para decidir
o quão grande fazer as imagens.

E continuaremos a usá-los bastante em CSS.

Vamos tentar 11 pixels.

Hah. Tudo ficou menor.

Até os títulos ficaram menores.

Por que os títulos também ficaram menores?

Eles não deveriam ser do tamanho em pixels
que o navegador decidiu antes?

Não.

Pois o estilo padrão do navegador
para títulos não é dito em pixel.

É especificado usando
uma unidade diferente, chamada "em".

E ela é uma unidade relativa

que faz o tamanho da fonte dos títulos
ficarem proporcionais a fonte do corpo.

Deixe-me mostrar o que quer dizer.

Vamos para o nosso estilo de regra 'h2'

e adicionamos a propriedade 'font-size'.

Dessa vez, ao invés de pensar em pixels,
eu pensarei relativamente.

Quão maior, relativamente, queremos
que '' seja, comparado ao texto?

Talvez, duas vezes maior?

Para isso, escrevemos '2em'.

O que ocorreu na verdade foi que
o navegador calculou

um tamanho de pixel para a fonte.

O navegador sabe que,
o tamanho do corpo é de 11 pixels.

E você disse que 'h2' deveria ser
duas vezes maior,

Então todo o ''
estará a 22 pixels.

Se trocarmos o tamanho da fonte
do corpo para 12 pixels,

então o quão grande ficará ''?

Isso mesmo, 24 pixels.

E se trocarmos o tamanho do 'h2'
para 1.5em?

Agora o 'h2' será
12 vezes 1.5,

que é 18 pixels.

Podemos também especificar um
tamanho em pixel para o 'h2' como no corpo,

e funcionaria do mesmo jeito.

Depende do que você acha mais fácil.

E como mencionei antes, existem
várias outras unidades que podemos usar

além de pixels e em.

Essas são apenas
as unidades mais populares.

Mas se você quer saber mais,

olhe mais documentos a respeito
de 'font-size',

ou procure na internet por mais tutoriais.

Está na hora de deixar sua fonte incrível!

Traduzido por [Alef Almeida] revisado por [Valter Bigeli].