Правильний вибір розміру шрифту визначає, чи зможе користувач швидко зчитати інформацію з екрана, чи втомиться і закриє сторінку за кілька секунд. У вебдизайні та розробці інтерфейсів типографіка підпорядковується чітким технічним правилам і перевіреним пропорціям. Нижче зібрані готові значення кеглів для сайтів і мобільних додатків, які допоможуть налаштувати зручну ієрархію без довгих експериментів.
Базові стандарти розмірів шрифту для сайту на десктопі
Для основного тексту на десктопних сайтах базовим стандартом вважається кегль 16–18 px. Значення 16 px встановлено за замовчуванням у більшості сучасних браузерів: воно гарантує комфортне читання з відстані монітора. Якщо ви створюєте блог, медіаресурс чи лонгрід з великим обсягом суцільного тексту, розмір абзаців можна збільшити до 20–21 px, щоб полегшити сприйняття матеріалу.
Ієрархія заголовків будується за чіткими пропорціями. Головний заголовок сторінки H1 зазвичай має розмір від 24 до 36 px, що приблизно в 1.9–2 рази перевищує базовий текст. Для підзаголовків розділів першого рівня H2 оптимальним діапазоном є 20–28 px, а для підрозділів H3 або заголовків окремих карток — 18–22 px. Така різниця дозволяє погляду миттєво сканувати структуру сторінки.
Інтерактивні елементи потребують окремої уваги. Написи на кнопках та текст у полях введення форм найкраще верстати в межах 16–18 px: користувач повинен чітко бачити, що саме він натискає або заповнює. Для другорядних блоків, таких як підписи до фотографій, копірайти у футері чи дати публікацій, підійде розмір 13–14 px. Опускатися нижче 12 px у вебдизайні не рекомендовано — дрібніший текст стає розмитим на моніторах зі стандартною щільністю пікселів і створює проблеми людям із порушеннями зору.
Розміри шрифтів для мобільних додатків iOS та Android
Проєктування мобільних інтерфейсів спирається на офіційні гайдлайни Apple (Human Interface Guidelines) та Google (Material Design). Смартфон тримають ближче до очей, ніж монітор ноутбука, але читання часто відбувається в русі, при яскравому сонці або однією рукою. Тому розмір основного тексту на обох платформах тримають на рівні 16–17 pt або sp, а мінімальною допустимою межею для читабельних блоків є 14 pt/sp.
Для другорядного тексту в списках, чатах чи картках товарів використовують кегль 14–15 pt/sp. Третинні елементи, допоміжні примітки та мітки часу верстають у розмірі 12–13 pt/sp. У компактних зонах екрана, наприклад у нижній панелі навігації (Tab Bar), допустимо використовувати розмір 10–11 pt/sp, оскільки текстові підписи там завжди супроводжуються зрозумілими іконками.
Заголовки екранів у додатках варіюються від 22 до 34 pt/sp залежно від типу переходу та глибини сторінки. Наприклад, великі заголовки типу Large Title в iOS сягають 34 pt на головних екранах і зменшуються під час скролу. Головне правило мобільної типографіки полягає в тому, що всі активні текстові кнопки повинні залишатися достатньо великими для комфортного тапу пальцем без випадкових промахів.
Зведена таблиця рекомендованих розмірів: Desktop проти Mobile
Порівняйте значення розмірів для головних елементів інтерфейсу, щоб швидко налаштувати адаптивну типографічну шкалу у своєму макеті.
| Елемент інтерфейсу | Розмір для Desktop (px / rem) | Розмір для Mobile (pt / sp) | Призначення |
|---|---|---|---|
| Головний заголовок (H1 / Large Title) | 24–36 px (1.5–2.25 rem) | 22–34 pt/sp | Головний екран, назва статті |
| Розділ першого рівня (H2 / Title) | 20–28 px (1.25–1.75 rem) | 18–22 pt/sp | Основні тематичні блоки |
| Підзаголовок (H3 / Subhead) | 18–22 px (1.125–1.375 rem) | 16–18 pt/sp | Дрібні підрозділи, картки |
| Основний текст (Body) | 16–18 px (1–1.125 rem) | 16–17 pt/sp (мін. 14) | Абзаци статей, описи карток |
| Кнопки та форми (Button / Input) | 16–18 px (1–1.125 rem) | 15–17 pt/sp | CTA-елементи, поля введення |
| Підписи та метадані (Caption / Tab Bar) | 13–14 px (0.8125–0.875 rem) | 10–13 pt/sp | Дати, примітки, таббар |
Під час перенесення десктопного макета на мобільні брейкпоінти зазвичай зменшують лише великі заголовки, тоді як базовий текст залишають майже незмінним, щоб зберегти читабельність.
Одиниці вимірювання: у чому різниця між px, rem, em, pt та sp
У кожному середовищі розробки використовують власні одиниці вимірювання. Їхній вибір залежить від того, верстаєте ви вебсторінку чи створюєте нативний додаток.
- px (пікселі): фіксована екранна одиниця для точного контролю розміру у вебі;
- rem (root em): відносна одиниця від базового шрифту кореневого тега html (зазвичай 1 rem = 16 px), що забезпечує гнучку адаптивність;
- em: відносна одиниця, розмір якої залежить від розміру шрифту найближчого батьківського контейнера;
- pt (пункти): стандартна одиниця для розробки інтерфейсів під iOS та векторних макетів (дорівнює 1/72 дюйма);
- sp (scale-independent pixels): масштабовані пікселі в Android, що автоматично підлаштовуються під налаштування масштабу шрифту в системі користувача.
Щоб швидко перевести пікселі в rem для вебверстки, поділіть потрібне значення в px на 16. Відповідно, 16 px дорівнює 1 rem, 24 px становить 1.5 rem, а заголовок у 32 px відповідає значенню 2 rem. Використання rem вважається стандартом сучасної верстки, оскільки інтерфейс пропорційно масштабується, якщо користувач змінює розмір шрифту в налаштуваннях свого браузера.
Правила читабельності: міжрядковий інтервал, довжина рядка та контраст
Вдало підібраний кегль не гарантує зручності, якщо між рядками замало повітря або рядок занадто довгий. Міжрядковий інтервал (інтерліньяж або line-height) для основного тексту повинен становити від 1.4 до 1.6 (140–160% від розміру шрифту). Для великих заголовків інтерліньяж роблять щільнішим — у межах 1.1–1.2, інакше фраза розпадається на окремі фрагменти.
Довжину рядка на десктопних моніторах тримають у діапазоні 50–75 символів разом із пробілами. Якщо рядок ширший, погляду складно знайти початок наступного речення після перенесення. Щоб не перевантажувати інтерфейс візуальним шумом, на весь проєкт використовують не більше двох різних гарнітур: одну акцентну для заголовків і одну максимально розбірливу без засічок для основного тексту.
Стандартом доступності залишається специфікація WCAG. Базовий розмір основного тексту 16 px не повинен зменшуватися для критично важливої інформації, умов угод та інтерфейсних повідомлень. Мінімальний коефіцієнт контрастності тексту до фону має складати щонайменше 4.5:1 для основного масиву тексту та 3:1 для великих заголовків від 24 px.
Перевірити контраст кольорів можна безпосередньо у Figma через плагіни перевірки контрастності або за допомогою панелі розробника в браузері ще до передачі проєкту у верстку.
Чек-лист перевірки типографіки перед запуском проєкту
Перед публікацією сайту або релізом мобільного додатка виконайте фінальну перевірку налаштувань типографіки за цим списком:
- Перевірте базовий розмір body (він повинен бути не менше 16 px або 1 rem).
- Протестуйте масштабування сторінки до 200% у браузері без зламу верстки та накладання рядків.
- Перевірте звіт доступності через Google Lighthouse або Axe DevTools (контрастність і розбірливість).
- Перегляньте інтерфейс на реальному мобільному екрані (текст має читатися на відстані витягнутої руки без зуму).
- Переконайтеся у відсутності рядків, довших за 75–80 символів на великих моніторах.
Збереження цих пропорцій у дизайн-системі спростить масштабування проєкту, додавання нових сторінок та пришвидшить роботу верстальників.
