Одиниці розмірів шрифта у CSS

Ви добре знайомі з CSS, впевнені що знаєте всі наявні на сьогоднішній день одиниці розмірів шрифта? Чи знаєте, що вони означають? Ось відповіді на ці запитання ми сьогодні і дамо. 🙂

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

Абсолютні величини

Розмір у px

Пікселі – px – це найпоширеніша абсолютна величина розміру шрифта. Звісно, ще є різні там pt, pc, in і ін., але хто б ними користувався, вірно (див. врізку)? 🙂 Вказувати розмір шрифта у пікселях зручно, адже ви завжди точно знатимете його величину взагалі і у порівнянні з іншими елементами.

pc – це pica, де 1pc дорівнює 12pt; в свою чергу pt – це point, де 1pt прийнято вважати 1/72 inch (дюйма); in – це inch (дюйм), Вікіпедія підказує нам, що 1 дюйм дорівнює приблизно 2,54 см (або довжині нігтьової фаланги великого пальця – на випадок якщо захочете поміряти діагональ свого монітору доступним способом 😉 ); cm – сантиметри; mm – міліметри. Імхо, ці величини надто складні для їх ефективного використання.

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

Відносні величини

Розмір у em

Найпоширенішими відносними величинами є em та %. Ці два позначення розміру є фактично ідентичні. Приміром, 50% це те саме, що 0.5em, а 1em це є 100%.

І em і % означають наскільки більшим або меншим буде шрифт вказаного елемента до розміру базового шрифта. Розмір базового шрифта як правило дорівнює 16px – це, на думку браузера, найкращий розмір для читання. Тому, для спрощення, з допомогою стилів розмір базового шрифта зменшують до 10px і тоді стає зручно розраховувати розмір шрифта інших елементів відносні вказаного базового.

body { font-size:62.5%; } /* встановлюємо розмір базового шрифта у еквів. 10px */
h1 { font-size: 2.4em; } /* дорівнює 24px */
p  { font-size: 1.4em; } /* дорівнює 14px */
li  { font-size: 1.4em; } /* дорівнює 14px */

Але й em є недоліки. Річ у тім, що встановлені значення наслідуються. І, наприклад, розмір шрифта елемента li li (список у списку) вже становитиме 20px (тобто 14px X 1.4). Тому пишучи стилі потрібно передбачити всі такі нюанси і прописати розмір шрифта для li li, li li li чи li li p і т.д. величиною у 1em.

CSS3: розмір у rem

rem це “root em”. Як же воно працює? Величина em є відносною до базового або батьківського елемента, у той час як rem є відносною лише до кореневого html елемента. Отже, стилі із попереднього прикладу варто прописати ось так:

html { font-size:62.5%; } /* встановлюємо розмір базового шрифта у еквів. 10px */
body { font-size: 2.4rem; } /* дорівнює 24px */
h1  { font-size: 1.4rem; } /* дорівнює 14px */
li  { font-size: 1.4rem; } /* дорівнює 14px */

Щодо підтримки браузерами нової відносної величини, то rem підтримують Safari 5, Chrome 6, Firefox 3.6+ та IE 9. Цього разу підкачав браузер Opera – до версії 11.50 включно (якщо вірити цій таблиці) він не підтримує rem. Тим не менше, застосовувати rem можна вже. Лише потрібно у стилях зазначати спочатку розмір у пікселях, а потім одразу у rem. Тож браузери, що не “розуміють” rem просто пропустять дану декларацію.