Типографіка у веб-розробці відіграє ключову роль у створенні зручного та естетичного інтерфейсу. Правильний вибір шрифтів, розмірів тексту, міжрядкових інтервалів та кольорів значно впливає на сприйняття сайту користувачами. У цьому дописі розглянемо основи типографіки, які варто знати кожному junior веб-розробнику.
1. Основні поняття типографіки
Перед тим як заглиблюватися в практичне використання шрифтів у веб-дизайні, варто розібратися з основними термінами:
- Гарнітура – це сімейство шрифтів, що має спільний стиль (наприклад, Arial, Roboto, Times New Roman).
- Кегль – розмір шрифту, зазвичай вимірюється в пікселях (px), відносних одиницях (rem, em) або у відсотках.
- Кернінг – інтервал між окремими символами.
- Трекінг – загальна відстань між символами в тексті.
- Інтерліньяж – міжрядковий інтервал, що визначає читабельність тексту.
2. Вибір шрифту
Для веб-розробки використовують два основні типи шрифтів:
- Системні шрифти – вбудовані у браузери (Arial, Verdana, Times New Roman, Georgia тощо).
- Веб-шрифти – підключаються ззовні (наприклад, Google Fonts: Roboto, Open Sans, Montserrat, Inter).
Щоб вибрати правильний шрифт, важливо враховувати:
- Читабельність – шрифт має бути зручним для зчитування, особливо в основному тексті.
- Доступність – деякі шрифти можуть не підтримувати певні мови або символи (наприклад, не всі шрифти підтримують українську мову).
- Контраст – шрифт повинен відповідати загальному стилю сайту та створювати потрібний візуальний ефект.
3. Одиниці вимірювання шрифту
Розмір шрифту задається у таких одиницях:
- px (пікселі) – статична одиниця, що не змінюється залежно від налаштувань браузера.
- em – відносна одиниця, що базується на розмірі шрифту батьківського елемента.
-
rem – базується на розмірі шрифту кореневого елемента (
html). - % – використовується для гнучкої зміни розміру шрифту.
Найкращою практикою є використання rem або em, оскільки вони забезпечують масштабованість інтерфейсу.
4. Контрастність та кольори тексту
Колір тексту та його контрастність з фоном дуже впливають на зручність читання. Основні правила:
- Використовуйте достатній контраст між текстом і фоном (наприклад, чорний текст на білому фоні або білий на темному).
- Уникайте занадто яскравих або подібних відтінків для тексту та фону.
У деяких випадках вам може знадобитися конвертація HEX у RGB, щоб зробити колір тексту напівпрозорим або використовувати його в інших CSS-налаштуваннях.
5. Відступи та вирівнювання тексту
Відступи та розташування тексту грають важливу роль у загальному враженні від сайту:
- Ліве вирівнювання – найбільш природне для читання тексту, особливо в довгих абзацах.
- Центральне вирівнювання – добре підходить для заголовків і коротких текстових блоків.
- Праве вирівнювання – рідко використовується, оскільки ускладнює читання.
- Justify (вирівнювання по ширині) – може використовуватися, але може створювати великі проміжки між словами.
6. Міжрядковий інтервал і довжина рядка
Правильний міжрядковий інтервал (line-height) робить текст більш читабельним. Рекомендовані значення:
- Для основного тексту:
line-height: 1.5–1.8. - Для заголовків:
line-height: 1.2–1.4.
Оптимальна довжина рядка становить 50-75 символів. Довші рядки ускладнюють читання, а короткі – виглядають незграбно.
7. Mobile-friendly типографіка
Типографіка має адаптуватися до різних пристроїв. Основні правила:
- Використовуйте гнучкі одиниці (
em,rem,%) замістьpx. - Налаштовуйте мінімальний розмір тексту (не менше 16px для основного тексту).
- Використовуйте CSS media queries для коригування розміру шрифту на мобільних пристроях.
8. Завантаження шрифтів і продуктивність
Підключення веб-шрифтів може впливати на швидкість завантаження сторінки. Оптимальні підходи:
- Використовуйте
font-display: swap, щоб уникнути затримки відображення тексту. - Завантажуйте тільки необхідні стилі та ваги шрифтів.
- Використовуйте локальне кешування шрифтів, щоб зменшити час завантаження.
Опанувавши основи типографіки, ви зможете створювати веб-інтерфейси, які будуть не лише естетично привабливими, а й зручними для користувачів.