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].