Ми можемо використовувати CSS також
для того, щоб змінити розмір шрифту.

Як ви можете побачити, порівнявши
заголовки цієї сторінки з абзацами,

браузер за замовчуванням надає

різним елементам стилів 
різні розміри.

Існує розмір шрифту основного тексту

і більші розміри для кожного
рівня заголовків.

Однак інколи ми хочемо трохи
змінити ці розміри.

І ми можемо це зробити за допомогою
властивості CSS "font-size" (розмір шрифту).

Наприклад:

Як зробити так, щоб весь шрифт 
на сторінці був трохи меншим?

Що ж, ми перейдемо до тега

і додамо правило CSS до тега .

І потім всередині додамо властивість
"font-size".

Яким має бути значення 
для властивості "font-size"?

Як ми вимірюємо розмір шрифту?

Це насправді дуже добре запитання,

тому що існує щонайменше 
10 різних одиниць виміру,

які надає CSS для розміру шрифтів.

Почнімо з одиниць, які ви
вже бачили раніше: пікселі.

Ми використовували пікселі, щоб
змінити розмір наших зображень,

і ми ще багато де будемо їх 
використовувати в CSS.

Спробуймо 11 пікселів.

Все стало меншим.

Навіть заголовки зменшились.

Чому заголовки також зменшились?

Хіба б вони не мали бути такого розміру, 
який встановив для них браузер раніше?

Ні.

Тому що значення за замовчуванням 
для заголовків встановлене не в пікселях.

Воно встановлене в інших одиницях
виміру: "em".

І ця одиниця виміру є відносною,

і тому змінює розмір шрифту заголовків
пропорційно до шрифту основного тексту.

Дозвольте я вам покажу, 
що я маю на увазі.

Перейдімо до правила стилю "h2"

і додаймо властивість "font-size".

Цього разу, замість того щоб вказати
значення в пікселях, я його задам відносно.

Наскільки більшим має бути заголовок "h2",
в порівнянні з текстом основної частини?

Можливо, вдвічі?

Для цього ми напишемо "2em".

Що зараз насправді робить браузер — 
це обчислює

розмір шрифту в пікселях.

Браузер знає, що розмір шрифту тексту 
був 11 пікселів,

а ви сказали, що заголовок "h2"
має бути вдвічі більшим.

Тому зараз усі заголовки "h2" 
мають 22 пікселі.

Якщо ми змінимо розмір шрифту 
тексту на 12 пікселів,

тоді яким буде розмір заголовків "h2"?

Правильно, 24 пікселі.

А якщо ми змінимо розмір шрифту 
заголовків на "1,5em"?

Тепер заголовки будуть 
12 * 1,5,

що дорівнює 18 пікселів.

Ми можемо також визначити розмір пікселів
для заголовків, так само як ми це робили

для тексту, і це працюватиме так само.

Все залежить від того, як вам простіше.

І як я вже казала раніше, існує багато
інших одиниць виміру, які ми можемо

використовувати замість пікселів та "em".

Пікселі та "em" — це просто найпоширеніші
одиниці виміру.

Але якщо вам хочеться більшого,

прогляньте документацію щодо
розміру шрифтів

або пошукайте більше інформації
в Інтернеті.

Настав час зробити чудовими розміри
ваших шрифтів!

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "magneticOne.org"