font-size

CSS-властивість font-size (укр. — “розмір шрифта”) використовується для визначення розміру шрифта тексту в елементі. Вона дозволяє змінювати розмір шрифтів для заголовків, параграфів, кнопок, посилань та інших текстових елементів. Задання відповідного розміру шрифта є важливим для забезпечення комфортного читання та оптимального відображення тексту на веб-сторінці.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

font-size: <length> | <percentage> | <keyword>;

Значення

  • <length> — конкретне значення розміру шрифта, задане в одиницях виміру, таких як:
    • px (пікселі) — одиниця, яка задає розмір шрифта в пікселях. Наприклад, font-size: 16px;.
    • em — одиниця, яка залежить від розміру шрифта батьківського елемента. Наприклад, font-size: 2em; означає подвоєння розміру шрифта порівняно з батьківським елементом.
    • rem — одиниця, яка базується на розмірі шрифта кореневого елемента (звичайно, <html>). Наприклад, font-size: 1.5rem; означає 1.5 рази розмір шрифта кореневого елемента.
  • <percentage> — відсоткове значення відносно розміру шрифта батьківського елемента. Наприклад, font-size: 120%; збільшує розмір шрифта на 20% від розміру шрифта батьківського елемента.
  • <keyword>: xx-small, x-small, small, medium, large, x-large, xx-large — ключові слова для визначення відносного розміру шрифта. Наприклад, font-size: large; задає великий шрифт.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • font-size є основним способом визначення розміру тексту на веб-сторінці, і зазвичай комбінується з іншими властивостями шрифтів, такими як font-family, font-weight, line-height для досягнення бажаного стилю тексту.
  • Використання em і rem дозволяє створювати адаптивні веб-сторінки, де розмір шрифта залежить від розміру шрифта батьківського або кореневого елемента, що корисно для забезпечення кращої доступності та масштабованості.
  • px зазвичай використовують для фіксованих, точних розмірів шрифтів, однак для адаптивних дизайнів рекомендується використовувати em або rem.
  • Рекомендується уникати надто великих або надто малих розмірів шрифтів для основного тексту, оскільки це може ускладнити читання та знизити загальний комфорт користування веб-сторінкою.
  • Властивість підтримується всіма сучасними браузерами.