WEBVTT

00:00:00.526 --> 00:00:03.525
Também podemos usar o CSS para mudar
o tamanho do nosso texto.

00:00:03.666 --> 00:00:06.564
Como você pode ver olhando
os títulos nessa página

00:00:06.564 --> 00:00:09.357
comparado aos parágrafos,
o navegador já providencia

00:00:09.357 --> 00:00:12.248
estilos padrões com diferentes tamanhos
para elementos diversos.

00:00:12.352 --> 00:00:13.643
Tem o tamanho da fonte do corpo.

00:00:13.643 --> 00:00:15.936
e tamanhos maiores
para cada nível de título.

00:00:16.102 --> 00:00:18.650
as vezes queremos ajustar
esses tamanhos.

00:00:18.857 --> 00:00:22.206
E podemos fazer isso com a
propriedade 'font-size' do CSS.

00:00:22.419 --> 00:00:23.853
Por exemplo:

00:00:23.853 --> 00:00:28.643
E se quisermos que todo o texto 
da página seja um pouco menor?

00:00:28.948 --> 00:00:31.062
Bem, vamos para a tag 'style',

00:00:31.102 --> 00:00:34.590
e adicionamos uma regra de CSS
para a tag 'body'.

00:00:34.889 --> 00:00:39.247
E dentro dela,
colocamos a propriedade 'font-size'.

00:00:39.477 --> 00:00:42.669
Agora, que valor deve ser atribuído
para o 'font-size'?

00:00:42.959 --> 00:00:45.654
Como medimos o 'font-size'?

00:00:45.930 --> 00:00:47.954
Essa é na verdade 
uma ótima questão.

00:00:47.954 --> 00:00:50.267
Porque existem pelo menos
dez diferentes unidades

00:00:50.267 --> 00:00:52.358
que suporta CSS para 'font-size'.

00:00:52.684 --> 00:00:55.674
iniciemos com a unidade
que você viu antes: pixels.

00:00:55.853 --> 00:00:58.623
Usamos pixels para decidir
o quão grande fazer as imagens.

00:00:58.623 --> 00:01:00.993
E continuaremos a usá-los bastante em CSS.

00:01:01.286 --> 00:01:02.985
Vamos tentar 11 pixels.

00:01:04.040 --> 00:01:06.145
Hah. Tudo ficou menor.

00:01:06.405 --> 00:01:08.510
Até os títulos ficaram menores.

00:01:08.786 --> 00:01:11.172
Por que os títulos também ficaram menores?

00:01:11.363 --> 00:01:15.316
Eles não deveriam ser do tamanho em pixels
que o navegador decidiu antes?

00:01:15.502 --> 00:01:16.288
Não.

00:01:16.432 --> 00:01:21.954
Pois o estilo padrão do navegador
para títulos não é dito em pixel.

00:01:21.962 --> 00:01:25.207
É especificado usando
uma unidade diferente, chamada "em".

00:01:25.495 --> 00:01:27.450
E ela é uma unidade relativa

00:01:27.450 --> 00:01:31.695
que faz o tamanho da fonte dos títulos
ficarem proporcionais a fonte do corpo.

00:01:32.099 --> 00:01:33.817
Deixe-me mostrar o que quer dizer.

00:01:34.055 --> 00:01:36.439
Vamos para o nosso estilo de regra 'h2'

00:01:36.574 --> 00:01:38.904
e adicionamos a propriedade 'font-size'.

00:01:39.446 --> 00:01:44.489
Dessa vez, ao invés de pensar em pixels,
eu pensarei relativamente.

00:01:44.701 --> 00:01:49.903
Quão maior, relativamente, queremos 
que '' seja, comparado ao texto?

00:01:50.173 --> 00:01:52.857
Talvez, duas vezes maior?

00:01:53.305 --> 00:01:56.763
Para isso, escrevemos '2em'.

00:01:56.992 --> 00:02:00.171
O que ocorreu na verdade foi que
o navegador calculou

00:02:00.171 --> 00:02:01.608
um tamanho de pixel para a fonte.

00:02:01.810 --> 00:02:05.048
O navegador sabe que,
o tamanho do corpo é de 11 pixels.

00:02:05.048 --> 00:02:08.055
E você disse que 'h2' deveria ser
duas vezes maior,

00:02:08.055 --> 00:02:11.574
Então todo o ''
estará a 22 pixels.

00:02:12.142 --> 00:02:16.576
Se trocarmos o tamanho da fonte
do corpo para 12 pixels,

00:02:16.576 --> 00:02:18.932
então o quão grande ficará ''?

00:02:19.267 --> 00:02:21.494
Isso mesmo, 24 pixels.

00:02:21.868 --> 00:02:26.345
E se trocarmos o tamanho do 'h2'
para 1.5em?

00:02:26.760 --> 00:02:30.805
Agora o 'h2' será
12 vezes 1.5,

00:02:31.023 --> 00:02:32.666
que é 18 pixels.

00:02:33.273 --> 00:02:37.754
Podemos também especificar um
tamanho em pixel para o 'h2' como no corpo,

00:02:37.754 --> 00:02:39.521
e funcionaria do mesmo jeito.

00:02:39.634 --> 00:02:41.502
Depende do que você acha mais fácil.

00:02:41.502 --> 00:02:45.258
E como mencionei antes, existem
várias outras unidades que podemos usar

00:02:45.258 --> 00:02:46.922
além de pixels e em.

00:02:47.224 --> 00:02:49.568
Essas são apenas
as unidades mais populares.

00:02:49.568 --> 00:02:51.016
Mas se você quer saber mais,

00:02:51.016 --> 00:02:53.193
olhe mais documentos a respeito
de 'font-size',

00:02:53.193 --> 00:02:55.402
ou procure na internet por mais tutoriais.

00:02:55.503 --> 00:02:57.967
Está na hora de deixar sua fonte incrível!

00:02:58.627 --> 00:03:02.977
Traduzido por [Alef Almeida] revisado por [Valter Bigeli].