Що треба знати junior веб-розробнику про типографіку?
CSS, Веб-розробка, Типографіка ·Типографіка у веб-розробці відіграє ключову роль у створенні зручного та естетичного інтерфейсу. Правильний вибір шрифтів, розмірів тексту, міжрядкових інтервалів та кольорів значно впливає на сприйняття сайту користувачами. У цьому дописі розглянемо основи типографіки, які варто знати кожному 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-налаштуваннях.
Звісно, HEX теж підтримує альфа-канал, але у RGB(A) форматі його зручніше змінювати.
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. Завантаження шрифтів і продуктивність
Підключення веб-шрифтів може впливати на швидкість завантаження сторінки. Оптимізація:
- Використовуйте лише необхідні варіанти шрифту (Regular, Bold, Italic).
- Застосовуйте
font-display: swap;
, щоб уникнути затримки відображення тексту. - Використовуйте локальні шрифти, якщо це можливо.
- Використовуйте сервіс pagespeed.web.dev від Google для аналізу сайту та його властивостей.
Типографіка – це комплексний підхід до покращення читабельності, естетики та загального UX-досвіду користувача. Junior веб-розробникам важливо розуміти основи вибору шрифтів, кольорів, міжрядкових інтервалів та адаптивності, щоб створювати якісні інтерфейси.