CSS také můžeme použít
ke změně velikosti našeho textu.

Jak můžete vidět porovnáním velikosti
nadpisů odstavců na stránce,

prohlížeč již nabízí základní styly
s rozdílnými velikostmi pro různé elementy.

Obyčejný text má nějakou velikost
a každý stupeň nadpisu má jinou velikost.

Občas chceme tyto velikosti poupravit.

A toho můžeme dosáhnout pomocí
CSS vlastnosti 'font-size'.

Například:

Co kdybychom chtěli, aby veškerý text
na naší stránce byl o trochu menší?

No, půjdeme do tagu

a přidáme CSS pravidlo pro tag .

A dovnitř přidáme vlastnost 'font-size'.

Jaká hodnota pro 'font-size'
by to měla být ?

A jak měříme velikost fontu?

To je vlastně dobrá otázka,

protože existuje nejméně
10 různých jednotek,

které CSS pro 'font-size' podporuje.

Začneme s jednotkou,
kterou jsme již potkali: pixely.

Pixely jsme použili při rozhodování,
jak velké chceme obrázky,

a v CSS je budeme také často používat.

Zkusme nastavit 11 pixelů.

Ha. Vše se zmenšilo.

Dokonce i nadpisy se zmenšily.

Proč se zmenšily i nadpisy?

Neměly by být nastavené již prohlížečem?

Ne.

Protože styl nadpisů prohlížeče není
nastavený pomocí pixelů.

Je určen jinou jednotkou,
kterou nazýváme "em".

A tato jednotka je relativní jednotkou,

což znamená, že písmo v nadpisech
bude úměrně velké běžnému písmu.

Ukážeme si, co tím myslím.

Pojďme do našeho pravidla
pro nadpisy ''

a přidejme vlastnost 'font-size'.

Tentokrát nepoužiji pixely,
musíme uvažovat relativně.

Kolikrát větší chceme mít ''
oproti zbytku těla stránky?

Možná… dvakrát?

Tím pádem napíšeme '2em'.

Ve skutečnosti si teď prohlížeč
vypočítal velikost fontu v pixelech.

Prohlížeč ví, že velikost písma
v těle je 11 pixelů.

A my jsme mu teď řekli, že ''
má být dvakrát větší.

Takže nyní všechny '' jsou
vysoké 22 pixelů.

Pokud změníme velikost písma
v těle stránky na 12 pixelů,

jak velké budou ''?

Správně, 24 pixelů.

Co když změníme velikost 'h2' na 1.5em?
(dejte pozor, v CSS píšeme desetinnou tečku místo čárky)

No, bude to 12 pixelů krát 1,5,

to je 18 pixelů.

Můžeme taky pro '' uvést velikost
v pixelech, stejně jako v '',

a bude to fungovat stejně.

Záleží to na tom,
co je pro vás jednodušší.

A jak jsem zmínila,
existuje mnoho dalších jednotek,

které můžeme použít místo pixelů nebo em.

Tyto dvě jsou nejpoužívanější,
ale pokud chcete vědět více,

navštivte dokumentaci
vlastnosti 'font-size',

nebo si najděte na internetu další tutoriály.

A teď s fontem vzhůru do oblak!