Гнучка типографіка за допомогою :root

34

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

p {
font-size: 1em;
}
@media screen and (max-width: 45em) {
p {
font-size: 1.25 em;
}
}

Розмір шрифту не змінюється до тих пір, поки не буде перетнута межа розміру вікна браузера.

Використання :root

Мені подобається робити шрифт більш гнучким. Для цього я вираховую розмір шрифту на основі висоти і ширини вікна браузера за допомогою селектора :root:

:root {
font-size: calc(1vw + 1vh + .5vmin);
}

Тепер можна використовувати одиниці виміру em, які спираються на значення, обчислене в :root:

body {
font: 1rem/1.6 sans-serif;
}

Одиниці виміру viewport

Ви помітили, що функція calc() передає значення в viewport одиницях? Давайте швиденько розберемося, що це таке, щоб зрозуміти, як обчислюється значення розміру шрифту в селекторі root.

1vw = 1% від ширини вікна

1vh = 1% від висоти вікна

1vmin = 1vw або 1vh, вибирається менше

1vmax = 1vw або 1vh, вибирається більше

Якщо застосувати це до розмірів вікна iPhone 7, яке становить 375х667, обчислене значення :root буде:

:root {
font-size: calc(3.75 px + 6.67 px + 1.875 px); /* 1vw + 1vh + .5min */
}

Адаптивну типографіку завжди можна буде створювати різними способами. Кожен спосіб необхідно оцінювати з точки зору тих проблем, які ми хочемо вирішити, і це не просто адаптивність. Мені здається, спосіб з :root самий гнучкий.