Застосування атрибуту font-size для масштабування тексту є одним з найбільш складних аспектів стильового оформлення в CSS. CSS пропонує чотири одиниці для вимірювання розміру тексту, відображуваного в веб-браузері. Яка з цих чотирьох одиниць найбільш підходить для веб-документів? Це питання викликало безліч обговорень і суперечок. Дати однозначну відповідь на таке питання складно.
Знайомимося з одиницями
Ем (em): em це масштабована одиниця, яка використовується для веб-документів. Один em дорівнює поточному розміру шрифту. Наприклад, якщо розмір шрифту документа 12pt. то 1em дорівнює 12pt. Оскільки em масштабується, то 2em дорівнює 24pt. 5em дорівнює 6pt і т.д. Завдяки своїй масштабованості і високої сумісності з мобільними пристроями, em все частіше використовується в веб-документах.
Пікселі (px): пікселі це одиниці фіксованого розміру, які використовуються для всього, що Новомосковскется на комп'ютерному екрані. Один піксель дорівнює одній точці на комп'ютерному екрані (це найменше розподіл дозволу вашого екрану). Багато веб-дизайнери використовують в веб-документах пікселі, щоб при відображенні в браузері вебсайт виглядав ідеально з точки зору пікселів. Єдина проблема полягає в тому, що пікселі можна збільшити для зручності Новомосковсктелей зі слабким зором або зменшити для зручності читання на мобільних пристроях.
Точки (pt): Точки традиційно використовуються в друкованих виданнях (тобто для всього, що друкується на папері). Одна точка дорівнює 1/72 дюйма. Точки дуже схожі на пікселі тим, що вони мають фіксований розмір і їх не можна збільшити / зменшити.
У чому ж відмінність?
Різницю між цими одиницями легко зрозуміти на конкретних прикладах. Ось як вони співвідносяться один з одним: 1em = 12pt = 16px = 100%. Давайте подивимося, що станеться, коли ми збільшимо основний розмір шрифту (використовуючи CSS-селектор body) з 100% до 120%.
Як бачите, Ем і Відсоток збільшуються у міру збільшення основного розміру шрифту, а Пікселі та Точки - немає. Легко використовувати абсолютний розмір для вашого тексту, але набагато легше використовувати масштабований текст, який відображається на будь-якому пристрої. Тому для тексту веб-документа краще використовувати одиниці Ем і Відсотки.
EM або Відсоток?
Ми з'ясували що Точка і Піксель не найкращі одиниці для веб-документів. Отже, у нас залишилися Ем і Відсоток. Теоретично, Ем і Відсоток - однакові одиниці, але на практиці між ними є дрібні відмінності, які не можна не враховувати.
У наведеному вище прикладі ми використовували одиницю Відсоток як базового розміру шрифту (для тега body). Якщо ви зміните базовий розмір шрифту з Відсотків на Ем (тобто body
Коли розмір тексту в браузері клієнта встановлений на «середній» (medium), між Ем і Відсотком відмінностей не спостерігається. Але якщо цей параметр змінити, то різниця стане цілком помітною. При налаштуванні «Найменший» (Smallest) Ем виявляються набагато дрібніше, ніж Відсотки. А при налаштуванні «Найбільший» (Largest) все навпаки - Ем набагато більше, ніж Відсотки. Можна сказати, що одиниці Ем масштабируются, як їм і належить робити, але на практиці такий текст масштабується занадто різко, і на деяких пристроях найдрібніший текст стає нечитабельним.
В теорії одиниця Ем є новим стандартом для розмірів шрифтів веб-документів, але на практиці виявляється, що одиниця Відсоток більш зручна для користувачів. При зміні клієнтських налаштувань текст, для якого використовується одиниця Відсоток, масштабується належним чином, дозволяючи дизайнерам підтримувати Новомосковскемость, доступність і візуальний дизайн.
Переможець: відсоток (%).
Зазвичай коли я створюю новий дизайн, то для елемента body я використовую відсотки (body
За останні кілька років така практика стала дуже поширеною в веб-дизайні.
Пікселі зараз використовуються в якості допустимих одиниць розміру шрифту (для читання дрібного тексту користувачі можуть використовувати функцію браузера «зум»). Однак використання пікселів стає проблематичним через мобільних пристроїв з екранами з дуже високою щільністю пікселів (деякі пристрої Android і iPhone мають щільність в 200-300 пікселів на дюйм, в зв'язку з чим шрифти в 11 і 12-пікселів стають погано помітними). Отже, я продовжую використовувати Відсоток в якості основного розміру шрифту для веб-документів.