Балансування тексту в адаптивному дизайні

2

Від автора: в минулому році на сайті 24 ways я закликав вас робити шрифти виразними. Я задав дуже великий розмір тексту, чим привернув вашу увагу і пояснив свою точку зору. Великий текст потрібно розглядати нарівні з банерами. Банер – це така велика картинка, створює потрібну атмосферу і привертає увагу до певної області макета.

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

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

Знайомство з viewport одиницями вимірювання

CSS3 приніс нам нові одиниці вимірювання, що пов’язані з дозволом екрану. Нові одиниці вимірювання можна використовувати, де тільки можна, в інших випадках можна використовувати одиниці вимірювання довжини, наприклад, пікселі, ems і відсотки. Існує чотири viewport одиниці виміру, у всіх них значення 1 дорівнює 1% від ширини або висоти дозволу, як зазначено в опорних точках:

vw – ширина вікна браузера,

vh – висота вікна браузера,

vmin – ширина чи висота вікна браузера, вибирається менше

vmax — ширина чи висота вікна браузера, вибирається більше

Одним рухом ви можете задати заголовок так, щоб він був пропорційний ширині екрану або вікна браузера, замість того, щоб вибирати розмір за допомогою медіа запитів. Код нижче змінює розмір заголовка так, щоб той становив 13% від ширини вікна браузера:

h1 {
font-size: 13 vw;
}

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

Балансировка текста в адаптивном дизайне

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

Проблема з одиницями вимірювання vw полягає в блокових пропорціях між портретними і альбомными пристроями. Розмір шрифту заснований на ширині вікна, тому текст в альбомному режимі набагато більше, ніж на пристрої з портретним режимом.

Балансировка текста в адаптивном дизайне

З одиницями vw текст в альбомному режимі набагато більше, ніж в портретному

Пропорції тексту так сильно відрізняються, що всі орієнтації мають свій власний характер. Втрачається сталість і той дизайн, який ви проектували, думаючи вразити користувачів.

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

h1 {
font-size: 13vmin;
}

Балансировка текста в адаптивном дизайне

З одиницями vmin текст однаковий як в портретному, так і в альбомному режимі

Якщо порівнювати зображення на vw і vmin на різних екранах, можна помітити, як vmin зменшує розмір тексту до зручного для читання:

Балансировка текста в адаптивном дизайне

Гібридний розмір шрифту

Для завдання розміру тексту добре підходять вертикальні медіа запити, з допомогою яких можна задати пряме співвідношення розміру тексту з розмірами екрану. Однак цей підхід погано працює з підзаголовками, які не повинні збільшуватися в такій же пропорції, як і основний текст. Наприклад, розмір підзаголовків можна задавати через vmin таким чином, щоб він починався з 16px на самих маленьких екранах і збільшувався так само, як і головний заголовок:

h1 {
font-size: 13vmin;
}
h2 {
font-size: 5vmin;
}

Балансировка текста в адаптивном дизайне

Використовуємо vmin для швидкого масштабування допоміжного тексту

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

Тут нам допоможе гібридний метод встановлення розміру текста2. За допомогою функції calc() можна одночасно обчислювати розмір тексту під rems і viewport одиниці. Наприклад:

h2 {
font-size: calc(0.5 rem + 2.5 vmin);
}

На екрані шириною 320px текст буде 16px. Обчислення: (0.5 × 16) + (320 × 0.025) = 8 + 8 = 16px

На екрані шириною 768px текст буде 27px: (0.5 × 16) + (768 × 0.025) = 8 + 19 = 27px

Так підзаголовки виглядають більш збалансовано і не відволікають від основного заголовка:

Балансировка текста в адаптивном дизайне

Щоб ви зрозуміли, в чому полягає ефект гібридного підходу, нижче я представив вам порівняння гібридного методу і методу на viewport одиницях в реальних розмірах:

Балансировка текста в адаптивном дизайне

Зверху: calc() гібридний метод; знизу: тільки vmin

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

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

Більш складні приклади використання гібридного розміру тексту можна подивитися в роботі Майка Рифмюллера.