Назад Вперед Зміст

Гумові шрифти

Щоб створити «гумовий» макет, слід використовувати лише відносні одиниці вимірювання. Наприклад, rem для розміру шрифтів.

Задамо власне співвідношення між розмірами шрифтів абзаців і заголовків. Спочатку трохи теорії.

Раніше вважалося, що потрібно використовувати гнучкі розміри шрифтів. Для досягнення цієї гнучкості застосовувалися одиниці em, які є відносними до стандартного розміру шрифту браузера (зазвичай 16 пікселів).

Проблема полягала в тому, що em відносні до шрифту батьківського елемента. Тому при кожному вкладенні елементів, наприклад із розміром 0.875em, текст ставав все меншим і меншим.

Однак з’явилася нова відносна одиниця вимірювання — rem. Вона завжди відноситься до кореневого елемента — html.

Наприклад, якщо ми хочемо, щоб розміри шрифтів h1, h2 і p відповідали співвідношенню 28:22:14, потрібно поділити бажаний розмір у пікселях на базове значення 16, щоб отримати відповідне значення в rem. Ось так виглядатиме коректне завдання розміру шрифту в CSS:

html { font-size: 100%; } /* Типове значення браузера, тобто 16px */   
h1   { font-size: 1.75rem; }     /* 28/16 = 1.75 */  
h2   { font-size: 1.375rem; }    /* 22/16 = 1.375 */   
p    { font-size: 0.875rem; }    /* 14/16 = 0.875 */

Таким чином, ми можемо легко створювати каскадні таблиці стилів із шрифтами. Якщо виникне потреба зробити шрифти більшими або меншими — достатньо змінити базове значення у селекторі html, наприклад, задати font-size: 70%.

Проте є і недолік — старі браузери не підтримують rem. Для них можна вказати значення в пікселях як запасний варіант.

З урахуванням наведеного прикладу, правильний CSS виглядатиме так:

html { font-size: 100%; } 
h1   { font-size: 28px; font-size: 1.75rem; } 
h2   { font-size: 22px; font-size: 1.375rem; }   
p    { font-size: 14px; font-size: 0.875rem; } 

Сучасні браузери зчитують значення, задані в rem, а старі використовують значення в px, ігноруючи другий рядок.

У нашому прикладі ми хочемо, щоб при базовому форматуванні заголовки мали розмір 24 пікселі, а абзаци — 14 пікселів.

Щоб отримати їхні розміри у відносних одиницях rem, слід поділити бажане значення у пікселях на 16.

Отже, для нашого прикладу розміри шрифтів у rem будуть такими:

Маємо бажані розміри:

• h1 — 24 пікселі
• p — 14 пікселів

Ділимо кожне значення на 16, щоб отримати значення в rem: