Глобальний розмір шрифту за допомогою rem; локальний розмір шрифту за допомогою em

17

Від автора: у Richard Rutter є досить цікаве керівництво по налаштуванню font-size: він стверджує, що необхідно використовувати як rem, так і em одиниці виміру залежно від відносин елементів на сторінці.

«Візьмемо в якості прикладу помітну цитату, що складається з двох параграфів. Відстань між параграфами буде залежати від розміру самих параграфів, тобто це відстань цілком можна задати через rem чи em. Якщо в процесі проектування ви вирішили збільшити розмір цитати, то й відстань між параграфами має бути збільшено. Тобто відстань між параграфами безпосередньо залежить від розміру тексту самих параграфів, і, отже, вважається локальним всередині компонента. Отже, в даному випадку необхідно використовувати em.»

Даний підхід доповнює описаний кілька років тому Крісом метод:

«Моя ідея в наступному: на рівні документа зберігається запис розмірів в пікселях px, тому ви можете легко і ефективно змінювати розміри. Але тоді всім модулям на сторінці font-size повинен бути в rem. Текстові елементи (h1, h2, p, li тощо) задаються в em (якщо ви взагалі ставите їм розмір), а, отже, вони відносяться до модулю.»

Розберемо, що сказано вище: спочатку ми поставили font-size елементів документа у пікселях:

html {
font-size: 16px;
@media screen and (min-width: 900px) {
font-size: 18px;
}
@media screen and (min-width: 1200 px) {
font-size: 20px;
}
}

Потім ми стилізуємо всі текстові елементи, такі як абзаци, заголовки та цитати, з допомогою em, так як вони ставляться до інших елементів:

h2 {
font-size: 2em;
}
pre {
font-size: 0.8 em;
}

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

.module {
font-size: 1.1 rem;
}
.another-module {
font-size: 1.3 rem;
}

… на практиці ми отримуємо щось на зразок цього:

Що це нам дає? Чому не використовувати лише rem чи em, щоб не ускладнювати процес? У цьому методі всі модулі стають незалежними, що в майбутньому полегшить їх стилізацію. Також ми можемо швидко задати font-size будь-якого модуля без зміни величезних частин коду. Якщо ми захочемо збільшити font-size для всього сайту, нам потрібно буде змінити лише одне значення.

Одиниці виміру em і rem використовуються для досягнення різних цілей. Якщо використовувати їх за призначенням, проект стане трохи більш гнучким, і з ним буде легше працювати.