<!-- .slide: data-state="c-slide-inter" -->

# Velikost textu

----

# Ukázka jednotek <!-- .element: class="c-sr-only" -->

<pre class="c-text-xl fragment" contenteditable><code class="lang-css stretch" data-noescape>
<span class="fragment">font-size: 20px;</span>
<span class="fragment">font-size: 150%;</span>

</code></pre>

>>>
* px = pixely (obrazovka)
* % = dle velikosti rodiče => opět dědičná vlastnost

----

<!-- .slide: data-state="c-slide-task" -->

# Měníme velikosti písma

<!-- .slide: data-state="c-slide-inter" -->

# Velikost textu

----

# Ukázka jednotek <!-- .element: class="c-sr-only" -->

<pre class="c-text-xl fragment" contenteditable><code class="lang-css stretch" data-noescape>
<span class="fragment">font-size: 1.5rem;</span>
<span class="fragment">font-size: 150%;</span>
<span class="fragment">font-size: 20px;</span>

</code></pre>

>>>
* rem ~ výchozí velikost písma dokumentu (velikost písma prvku `<html>`)
* px = pixely (obrazovka)
* % = dle velikosti rodiče => opět dědičná vlastnost
* tyto jednotky lze nastavit všem vlastnostem, kde to dává smysl (šířka, odsazení, tloušťka rámečku atp.), budeme se o nich bavit později

----

<!-- .slide: data-state="c-slide-task" -->

# Měníme velikosti písma

Add REM to `font-size` units
Add REM to `font-size` units

