Автор сайту може без пояснень показати користувачеві де читати, що дивитися, куди натиснути і як купити. Все це робиться за допомогою друкарні та верстки у веб-дизайні. Як використовувати типографіку для своїх цілей і отримати залучення користувача на максимум читайте в нашій статті.
Що таке типографіка та верстка
Спочатку типографіка стосувалася тільки друкованих видань та графічного дизайну. Але що більше матеріалів потрапляло у мережу — то швидше поняття поширювалося у сфері створення сайтів. Наразі більшість під «Типографікою» розуміють сукупність правил для створення сторінок. Візуальне оформлення відповідає за загальне враження від тексту та вкладених смислів. Поняття «верстка» теж пройшло довгий шлях і переросло зі створення макета на друк в створення сайту.
Перш ніж створити сайт для користувача і завоювати його увагу, розберемося в термінах.
Друкарня — це зведення правил оформлення тексту для зручності користувача. Щоб кожен знайшов потрібну ідею, швидко її прочитав, за бажання затримався і насолодився візуальною концепцією ресурсу.
Верстка — це структурування тексту та всіх елементів, що його супроводжують, у макеті сторінки, газетної смуги, книги та інших друкованих або електронних текстових матеріалів. Важливо розуміти у своїй, що верстка створює типографіку.
Правила типографіки тексту описуються однією фразою: “вашому читачеві має бути зрозуміло і приємно це читати”.
Щоб перевірити, чи відповідає проект цим вимогам, використовуйте три основні критерії. Перевірте наскільки сайт:
- зручний для знаходження інформації та виконання цільової дії,
- простий у використанні,
- приємний для візуального сприйняття.
Відвідувач сторінки повинен отримати всю інформацію як швидко, а й правильно її зрозуміти.
У веб-дизайні корисно знати правила та основи друкарні, щоб створити ресурс, на якому буде комфортно перебувати читачеві довгий час. Для початку зрозуміємо, як поводитися зі шрифтами та текстовими блоками.
Приклади зростання конверсій, замовлень та прибутку
Основні терміни в друкарні
Розберемося в термінах, щоб у наступних розділах було зрозуміло про що саме мова.
Шрифт — графічне зображення літер та знаків у єдиному стилі.
Кегль – розмір букви по вертикалі з усіма її елементами.
Зображення — вигляд шрифту в межах однієї гарнітури. Популярні: звичайний, курсив, напівжирний.
Гарнітура — це сукупність одного або кількох шрифтів з усіма написами і в усіх розмірах в одному стилі.
Кернінг — відстань між літерами та символами.
Базова лінія – та, на якій знаходяться літери.
Інтерліньяж – відстань між базовими лініями. Це кегль разом з відстанню між рядками.
Види шрифтів: із засічками (антиква) та без засічок (гротеск).
Як створити сайт, зрозумілий для користувачів та ефективний для компанії
Для початку знаємося зі шрифтами та загальним наповненням. Першим йде текст, потім візуальне оформлення. Ніхто не підбирає шрифти до створення макета, не знаючи, скільки в ньому буде тексту та як його потрібно буде розподілити. Ідеальна верстка не створить вам ідеальний проект, але дозволить читачам побачити весь необхідний матеріал і направить на потрібну цільову дію.
Текст
Основне заповнення сторінки – текст. Користувачі приходять за необхідною довідкою та хочуть отримати її якнайшвидше, бажано максимально зрозуміло. Правила типографіки тексту:
- Найприємніший для читача сайт написаний без помилок. Автор дотримується всіх правил мови, творець дотримується того ж. Наприклад, потрібно стежити за оформленням списків або використанням літери «е», щоб уникнути різночитання.
- Набір CAPS LOCK знижує швидкість читання тексту. Підходить лише для рідкісних заголовків, технічних документів чи абревіатур.
- Якщо ви покладаєте текст у стовпчик по всій ширині, намагайтеся не робити перенесення слів після закінчення трьох рядків поспіль. Змініть інші параметри шрифту, розміри кегля або стовпчика.
- Лапки у друкованому тексті «…». Якщо всередині лапок потрібно поставити цитату чи пряму мову, то використовують «… „…”…».
- Дефіс “-” короткий, тире “-” довге, мінус “-” для формул. Розставте за правилами російської.
Шрифти
Шрифти відповідають не лише за зручність читання, а й за візуальне наповнення ресурсу. Можна створити сторінку, на якій буде приємно знаходитися або захочеться знову повертатися, і зробити це тільки за допомогою шрифтів. Тому пунктів під час роботи зі шрифтами більше.
- Не використовуйте більше трьох шрифтів на одній сторінці. Це стосується верстки книг та сайтів. Достаток шрифтів і різних рис відволікає читача. В ідеалі по всьому ресурсі ставити один шрифт.
- Шрифти із засічками більше підходять для книг, а без засічок – для сайтів. Читачі часто переглядають текст швидко, шрифти без засічок дозволяють не напружуватись очам. Перевіряйте гарнітури, можливо є відповідні.
- Важливо не переборщити з різними рисами. Цікаве в тексті виділяйте зручними способами, але не використовуйте більше трьох рис. Це перенасичує текст.
- Стандартні шрифти звичніше людям та системам. Деякі шрифти не відкриваються або змінюють вигляд на різних пристроях. Цікавий чи незвичайний шрифт необхідно обґрунтувати, а важливе у тексті виділити чимось іншим.
- Усі символи мають бути легко помітні. Навіть якщо цей шрифт буде маленький або дуже великий кегель. Тонкого чи товстого зображення. Також літери не повинні зливатися та плутатися між собою.
- Деякі бренди використовують свій шрифт для назви компанії. Тоді перевіряємо, щоб він читався на всіх пристроях і не змінювався при зміні дизайну сайту.
- Вибір кегля залежить від того, який матеріал буде на вашій сторінці. Для кегля заголовка підійде принцип золотого перерізу. Помножуємо кегель шрифту на 1,6. Наприклад, якщо основний текст 8, заголовок буде 12,8.
- Інтерліньяж ідеальний, коли він становить 120% від шрифту. Кегль основного тексту множимо на 1,2. Наприклад, якщо основний текст 10, то інтерліньяж 12. Між абзацами інтервал краще зробити розміром більшим, ніж міжрядковий. Це виглядає ефектніше, ніж відступ у порожній рядок.
Структура
Коли готовий текст, підібрані шрифти для читання і їх накреслення – потрібно все зібрати. Якщо у вас помилки в структурі, то користувачі заплутаються і підуть з ресурсу до того, як знайдуть необхідний розділ. Тому запам’ятовуйте не лише друкарню, а й правила верстки: нюанси розмітки, поєднання блоків та інші важливі дрібниці.
- Рекомендується ставити 60 символів у рядку, іноді до 75, але не більше. А для смартфона ідеально – 45. Читач не встигає втратити увагу або збитися з рядка.
- У верстці книг чи журналів використовують відступи. Для сайтів вони зайві, тим більше з правильно розставленим інтерліньяжем.
- Різні підзаголовки в тексті повинні бути ближчими саме до тих абзаців, до яких вони належать. Правильно стежитиме між розстановкою смислів, не тільки слів, заголовків та шрифтів.
- Вирівнювання – по лівому краю. Зрідка в тексті необхідно зробити вирівнювання по ширині або правому краю. Ці прийоми використовують із смислового виділення. Коли текст ліворуч, читач не збивається і помічає закінчення рядка.
- Не залишайте в кінці рядка одного слова або речення, що займає менше третини абзацу. На новій сторінці або в новій колонці не повинно бути одинокого рядка.
- Те саме правило на прийменники та пунктуацію. Наприкінці рядка не залишайте одинокого приводу. Виняток — дефіс, навпаки, краще залишатися наприкінці рядка.
- Зображення, малюнки, ілюстрації, діаграми, таблиці та інші елементи нічого не винні заважати тексту, бути великого розміру і розділяти його, лише доповнювати. Дизайн проекту створюють для людей, а не щоб показати одну чудову картинку.
- Читач повинен бачити текст на сторінці за будь-якої верстки. Будь текст на картинці або поряд, на підкладці чи без.
- Усі кольори підбирають один під одного так само, як шрифти. Не використовуйте яскраву контрастність. Пам’ятайте про використання зеленого або червоного, не ставте їх поряд або не виділяйте важливе в тексті. Це заважає користувачам із дальтонізмом правильно сприймати.
Поради для оцінки сайту на «зрозумілість» замість укладання
Коли робите проект, намагайтеся зберегти однаковість при загальній читальності. У вас є всі інструменти та правила використання для цього. Створюйте такий простір, де людина не тільки знайде те, що їй потрібно чи зробить цільову дію, а й захоче повернутися. За допомогою друкарні ви зможете створити потрібний простір і для замовника, і для користувача.
Завжди перевіряйте себе з погляду читача. Можете зайти з іншого браузера або зі смартфона та подивитися, чи буде ресурс зручний для пошуку потрібної інформації. Подивіться наскільки легко орієнтуватися у наповненні, заголовках та структурі. І постарайтеся оцінити проект візуально, чи вам подобається, чи немає зайвих елементів і чи правильно сприймається інформація.