Типографіка як інструмент продажів

Історія про текст, якого ніхто не читає

Підприємець Олексій витратив три тижні на написання текстів для свого сайту. Сам. По вечорах, після роботи. Вивчав конкурентів, формулював переваги, переписував кожне речення по кілька разів.

Сайт запустили. Реклама пішла. Люди заходили — і йшли. Заявок майже не було.

Запросили дизайнера на аудит. Той подивився хвилину і сказав: «Ваші тексти ніхто не читає. Не тому що вони погані. Тому що їх фізично важко читати».

Дрібний шрифт. Рядки завширшки на весь екран. Сірий текст на білому тлі. Жоден абзац не виділений — все однаково важливе, а значить однаково непомітне.

Олексій написав правильні слова. Але типографіка зробила їх невидимими.

Що таке типографіка і чому вона продає

Типографіка — це не вибір «красивого шрифту». Це система рішень про те, як текст виглядає на екрані: розмір, відступи між рядками, довжина рядка, контраст, ієрархія заголовків.

І ось що важливо розуміти: людина не читає сайт як книгу. Вона його сканує. Очі бігають по сторінці в пошуках «якорів» — заголовків, виділених фраз, коротких абзаців. Якщо текст суцільний, однорідний, без структури — мозок каже «тут нічого цікавого» і рухається далі.

Типографіка — це навігація для очей. Вона веде читача від заголовку до підзаголовку, від ключової фрази до кнопки дії. Якщо навігація зламана — людина губиться. І іде.

Дослідження Nielsen Norman Group показують: користувачі читають лише близько 20% тексту на сторінці. Завдання типографіки — зробити так, щоб ці 20% були саме тими словами, які переконують залишити заявку.

Шість типографічних помилок, які коштують вам клієнтів

Помилка 1. Занадто дрібний шрифт «Але ж все видно» — найпоширеніша відповідь власників, коли їм показують цю проблему. Так, видно. Але читати незручно. А незручність — це тертя. Тертя зупиняє людину на шляху до заявки.

Оптимальний розмір шрифту для основного тексту на сайті — від 16 пікселів. Для мобільної версії — від 16 до 18. Це не про естетику. Це про фізіологію: такий розмір читається без напруги очей.

Якщо ваш основний текст менший за 15 пікселів — це перша річ, яку варто виправити. Ще до будь-яких змін у дизайні.

Помилка 2. Рядки завширшки на весь екран Широкий рядок тексту — одна з найнепомітніших і найшкідливіших помилок. Коли рядок займає весь широкий монітор, очі пробігають його — і губляться при переході на наступний. Мозок витрачає зусилля на пошук початку нового рядка. Читання стає виснажливим.

Оптимальна довжина рядка — 60–75 символів. Це приблизно ширина книжкового рядка. Не випадково: книги так верстали сотні років, тому що це зручно для людського ока.

На практиці це означає: основний текст не повинен займати всю ширину сторінки. Достатньо 60–70% від ширини контейнера.

Помилка 3. Недостатній контраст між текстом і фоном Сірий текст на білому тлі виглядає «м'яко» і «сучасно». Але він погано читається. Особливо на яскравому сонці з телефону. Особливо людьми після сорока.

Мінімальний коефіцієнт контрасту для читабельного тексту — 4.5:1 за стандартами доступності WCAG. Перевірити свій сайт можна безкоштовно на webaim.org/resources/contrastchecker.

Темно-сірий або чорний текст на білому тлі — класика, яка працює. Не треба винаходити велосипед.

Помилка 4. Більше двох шрифтів «Хотіли різноманіття» — і отримали хаос. Коли на сайті три, чотири, п'ять різних шрифтів — сторінка виглядає як оголошення на стовпі. Кожен шрифт кричить «подивись на мене» — і жоден не виграє.

Правило, яке спрощує все: один шрифт для заголовків, один для основного тексту. Максимум два. Різноманіття досягається розміром, товщиною і відступами — а не новими гарнітурами.

Помилка 5. Декоративні шрифти там, де потрібна ясність Витіюватий рукописний шрифт на логотипі — можливо, доречний. Той самий шрифт у заголовках або, що гірше, в основному тексті — це катастрофа для читабельності.

Декоративні шрифти мають одну функцію: створювати настрій. Вони не призначені для читання довгих фраз. Якщо людина витрачає секунду на розшифрування букви — вона вже витратила забагато.

Для заголовків і текстів — чіткі, читабельні гарнітури. Без виключень.

Помилка 6. Відсутність ієрархії — все однаково важливе Уявіть книгу без розділів, підрозділів і абзаців. Суцільний текст від першої до останньої сторінки. Ви б її читали?

Те саме відбувається з сайтом без типографічної ієрархії. Якщо всі заголовки однакового розміру, абзаци однакової довжини, жодне речення не виділене — читач не знає, що важливо. І не читає нічого.

Ієрархія будується просто: великий заголовок → менший підзаголовок → основний текст → виділені ключові фрази. Кожен рівень чітко відрізняється від іншого розміром або товщиною. Погляд автоматично рухається від більшого до меншого — і по дорозі засвоює ваші ключові повідомлення.

Три принципи типографіки, які працюють завжди

Принцип 1. Повітря важливіше за вміст Міжрядковий інтервал, відступи між абзацами, простір навколо заголовків — це не порожнє місце. Це дихання тексту. Стиснутий текст без відступів читається важко навіть якщо шрифт великий.

Оптимальний міжрядковий інтервал для основного тексту — 1.5 до 1.6 від розміру шрифту. Між абзацами — відступ, рівний приблизно одному рядку.

Принцип 2. Один абзац — одна думка Довгі абзаци на десять речень — це текстові блоки, які мозок відмовляється опрацьовувати. Короткі абзаци на дві-чотири речення — це кроки, якими зручно йти.

Якщо ви пишете текст для сайту і бачите абзац із шести і більше речень — розбийте його. Завжди.

Принцип 3. Виділяйте тільки найважливіше Жирний шрифт привертає погляд. Але якщо жирним виділено половину тексту — він перестає привертати погляд. Виділення працює тільки тоді, коли воно рідкісне.

Правило: не більше одного виділення на абзац. І лише те, що справді вирішальне — ключова вигода, важлива цифра, головна думка.

Практичний аудит типографіки вашого сайту

Ось конкретний чеклист — пройдіться по ньому з відкритим сайтом.

Перевірка 1. Розмір шрифту Відкрийте сайт на телефоні і прочитайте абзац тексту без масштабування. Читається без напруги? Якщо ні — шрифт замалий.

Перевірка 2. Довжина рядка Порахуйте символи в одному рядку основного тексту на десктопі. Більше 80 символів — рядок завдовжки, текст читається важче.

Перевірка 3. Контраст Скопіюйте колір тексту і колір фону і перевірте на webaim.org/resources/contrastchecker. Результат нижче 4.5 — проблема з читабельністю.

Перевірка 4. Кількість шрифтів Порахуйте, скільки різних шрифтів використовується на сайті. Більше двох — занадто багато.

Перевірка 5. Ієрархія Примружте очі і подивіться на сторінку. Чи видно чітку різницю між заголовками і текстом? Чи є елементи, які явно важливіші за інші? Якщо все злилось в однорідну масу — ієрархії немає.

Перевірка 6. Довжина абзаців Знайдіть найдовший абзац на сторінці. Порахуйте речення. Більше п'яти — скоріш за все, варто розбити.

Перевірка 7. Повітря Чи є відступи між абзацами? Чи є простір навколо заголовків? Якщо текст «злипається» в суцільну масу — міжрядковий інтервал або відступи занадто малі.

Що робити з результатами

Якщо аудит виявив одну-дві проблеми — це правки на годину. Збільшити шрифт, додати відступи, скоротити рядок. Жодного перепроектування.

Якщо проблем п'ять і більше — типографіка сайту будувалась без системи. Це не означає, що треба робити все заново. Але означає, що точкові виправлення дадуть менший ефект, ніж системний підхід: визначити два шрифти, прописати розміри для кожного рівня ієрархії, зафіксувати відступи — і застосувати скрізь.

І насамкінець — про що насправді типографіка

Типографіка — це повага до читача.

Коли текст зручно читати — людина читає. Коли вона читає — вона дізнається про ваш продукт. Коли вона дізнається — вона довіряє. Коли вона довіряє — вона залишає заявку.

Увесь цей ланцюжок може обірватись на першій ланці. Якщо текст важко читати — все інше не має значення. Ніхто не дістанеться до вашої унікальної пропозиції, якщо очі втомляться на другому абзаці.

Олексій із початку цієї статті збільшив шрифт, розбив тексти на короткі абзаци і додав чіткі підзаголовки. Без змін у текстах. Без нового дизайну. Конверсія виросла втричі за перший місяць.

Іноді найпотужніший інструмент продажів — це просто зручний для читання текст.

• Хочете, щоб я перевірив типографіку вашого сайту і сказав, що саме заважає людям читати ваші тексти? Напишіть мені — розберемо конкретно і без загальних слів.