Використання різних властивостей розміру шрифту в CSS-стилях

В CSS є маса різних властивостей, які дозволяють впливати на розмір шрифту. Крім цього розмаїття, у даних властивостей фактична величина їх значення часто обчислюється браузерами по-різному. Все це обумовлено історично та в міру розвитку технологій. Одні властивості застарівають, а інші з’являються і стають популярними. Наприклад, сьогодні деякі властивості вже вважаються застарілими (ex, pt, pc та ін.), а інші навпаки стають все більш популярними (vh, vw, vmin і vmax). Останні властивості завоювали любов веб-дизайнерів завдяки своїй відносності: вони дозволяють вказувати розмір шрифту на основі ширини або висоти вікна перегляду (іншими словами – на основі розміру пристрою).

Як же розібратися в цих властивостях та які використовувати? Вам в допомогу сьогоднішня стаття, з якої ви дізнаєтеся про різні одиниці виміру і про те, як вони впливають на розмір шрифту елементів, до яких застосовуються.

 

 

Розмір шрифту в пікселях (px)

Пікселі – це одиниці фіксованого розміру. Раніше піксель прирівнювався до однієї точки на екрані користувача. Тепер же, оскільки пристрої можуть мати різну щільність пікселів, має місце інше визначення. Сьогодні розмір пікселя вираховується з урахуванням опорного пікселя. Опорний піксель визначається як кут зору одного пікселя на пристрої зі щільністю пікселів 96dpi на середній відстані в 28 дюйма (71,12см). Це робить розмір пікселя рівним приблизно 0,26 мм.

Давайте подивимося, як розмір шрифту, встановлений в пікселях, впливає на обчислене значення розміру шрифту для різних елементів. Для прикладу будемо використовувати таку розмітку:

<div class="container">
  Текст всередині батьківського елементу <code>div</code>.
  <p>Перший абзац нашого контейнера.</p>
  <p>Другий абзац містить посилання на <a href="https://sebweo.com/">SebWeo</a>.</p>
  <p>Посилання на Вікіпедію в якості прямого дочірнього <code>div</code> елементу.</p>
  <a href="https://uk.wikipedia.org">Посилання на Вікіпедію.</a>
</div>

 

В CSS-стилях встановимо властивість font-size для всіх елементів в пікселях:

div.container {font-size: 18px;}
code {font-size: 15px;}
p, a {font-size: 20px;}

 

Незважаючи на те, що ми встановили для кожного елемента своє значення розміру шрифту, тут не буде спрацьовувати правило вкладеності елементів. Наприклад, розмір шрифту посилань буде однаковим – 20px. Хоча посилання всередині безпосередньо тега div повинна мати розмір 18px.

Одним словом, використання пікселів при налаштуванні розміру шрифту елемента не матиме потрібної нам гнучкості.

 

 

Розмір шрифту в em

Використання em для розміру шрифту допоможе уникнути будь-яких проблем, пов’язаних з перевизначенням користувацьких налаштувань. Значення в 1em буде залежати від значення розміру шрифту за замовчуванням у браузері. Якщо це не змінено вами в стилях або користувачем в налаштуваннях браузера, за замовчуванням це значення буде рівним 16px.

Значення властивості для елементу буде визначатися обчисленим розміром шрифту, успадкованим цим елементом. Це означає, що якщо елемент успадковує розмір шрифту 25px, значення 2em для цього елемента буде обчислюватися як 50px.

Наступні CSS-стилі встановлюють розмір шрифту всіх елементів з нашого попереднього прикладу в em одиницях:

div.container {font-size: 1.2em;}
code {font-size: 0.9em;}
p, a {font-size: 1em;}

 

З цими налаштуваннями стилів, якщо ми вкладемо в тег div інший елемент div, тоді розмір шрифту всіх елементів в ньому буде більше в 1,2 рази за перший.

Якщо вам буде потрібно змінити розмір шрифту для всіх елементів в бік збільшення (або зменшення), з цим підходом вам потрібно буде змінити тільки значення в самих верхніх елементах DOM (html і body). Потім розмір шрифту всіх інших елементів буде масштабуватися відповідним чином.

Оскільки значення цієї властивості залежить від успадкованого розміру шрифту для даного елемента, даний підхід буде ефективним для визначення розмірів шрифту пов’язаних елементів всередині незалежних розділів сайту (наприклад, елементів сайдбару).

 

 

Розмір шрифту в rem

Єдина проблема з em-одиницями полягає в тому, що іноді потрібно, щоб розмір шрифту дочірніх елементів не масштабувався в залежності від розміру шрифту своїх батьків. Це успадкування розміру шрифту може зробити процес обчислення правильного значення em досить складним.

Цю проблему можна вирішити за допомогою одиниць виміру rem. Значення 1rem завжди дорівнює значенню розміру шрифту для кореневого елемента. Таким чином, ви не зіткнетеся з будь-якою проблемою накладення розміру шрифту.

Нижче ми встановимо розмір шрифту для контейнера в одиницях rem. Інші елементи як і раніше будуть мати розмір шрифту в одиницях em:

div.container {font-size: 1.2rem;}
code {font-size: 0.9em;}
p, a {font-size: 1em;}

 

Встановлення розміру шрифту контейнера в одиницях rem допоможе нам уникнути проблеми з успадкованим розміром шрифту. У цьому випадку розмір шрифту всіх елементів всередині контейнера буде заснований на батьківському елементі, і в той же час не буде залежати від інших контейнерів і блоків.

 

 

Розмір шрифту у відсотках (%)

Відсотки поводяться як em одиниці. Вони зазвичай використовуються для встановлення розміру шрифту для кореневих елементів за допомогою медіа-запитів, щоб спростити розрахунки для адаптивного веб-дизайну. Наприклад:

html {font-size: 100%;}
div.container {font-size: 1rem;}
code {font-size: 0.7em;}
p, a {font-size: 0.9em;}

 

Оскільки значення за замовчуванням для розміру шрифту в браузерах становить 16 пікселів, встановлення розміру шрифту для елемента html, рівного 100%, буде становити рівно 16 пікселів. Це спрощує розрахунок розмірів шрифтів для всіх інших елементів. Наприклад, тепер ви можете просто встановити розмір шрифту елемента в 2rem, щоб зробити його розмір рівним 32px і так далі.

 

 

Розмір шрифту в одиницях перегляду viewport (vw, vh, vmin, vmax)

Одиниці перегляду vw, vh, vmin і vmax з’явилися відносно недавно і відразу завоювали популярність серед веб-дизайнерів. Вони дозволяють встановлювати розмір шрифту для різних елементів в залежності від розмірів вікна перегляду (на підставі значення viewport). Коли все зробити правильно, цей підхід може усунути необхідність встановлення різних значень розміру шрифту на кількох контрольних точках (з використанням медіа-запитів). Це пов’язано з тим, що значення цих одиниць буде постійно змінюватися в залежності від ширини або висоти вікна перегляду. Наприклад, 1vw буде рівним 5px, коли область перегляду має ширину 500 пікселів і буде дорівнює 12px, коли область перегляду має ширину 1200 пікселів.

Єдина проблема з цими властивостями полягає в тому, що обчислений розмір шрифту може зробити текст складним для читання при дуже малих і дуже великих розмірах екранів. Хитрість вирішення цієї проблеми полягає в тому, щоб використовувати ці властивості в комбінації з іншими одиницями виміру.

Тут ви зможете прочитати більш докладніше про те, що таке одиниці перегляду vw, vh, vmin і vmax в CSS.

 

 

 

Короткий висновок

У цій статті ми обговорили різні одиниці вимірювання в CSS і те, як вони впливають на розмір шрифта елемента. Найкраще, звичайно ж, використовувати по-максимуму відносні одиниці. Але перш ніж приймати рішення про використання будь-якого з цих властивостей, вам також потрібно переконатися в його підтримці цільовими браузерами. Абсолютні одиниці, такі як px, pt, pc, in, cm і mm, підтримуються у всіх браузерах. Відносні одиниці em підтримуються у всіх основних браузерах, включаючи більш старі версії IE. Проте, rem одиниці не підтримуються в IE8 і нижче. У IE9 і IE10 також немає підтримки rem у псевдоелементів. З усіх одиниць, обговорюваних у цій статті, одиниці перегляду мають мінімальну підтримку браузерами, хоча вони і мають найбільшу ефективність у веб-дизайні.