Типографіка у веб-дизайні: основи і правила використання

30

Від автора: вітаю Вас, друзі! Ми продовжуємо розбирати тонкощі професійного веб-дизайну, і сьогодні на черзі дуже актуальна тема — веб-типографіка. На жаль, розробники не знають навіть самих основ і правил цього напрямку. Може, просто не заморочуються і не хочуть на це витрачати час, а може, не до кінця розуміють її значення. Загалом, моя мета: донести до вас, що типографіка у веб-дизайні — основа основ, і без неї буде дуже важко рухатися далі.

Типографіка та інформаційний посил

Призначення будь-якого інтернет-ресурсу — інформаційний посил до цільової аудиторії. На що відвідувачі вашого сайту будуть звертати увагу в першу чергу? Звичайно, текст! (природно, якщо його не забиває безладна реклама і безліч безглуздих банерів). Від тексту, і тільки від тексту, в кінцевому підсумку залежатиме успіх вашого проекту.

Давайте розбиратися, на що реально впливає типографіка у веб-дизайні.

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

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

Основи типографіки в web-дизайні

Шрифти в web-дизайні

Типографіка в web-дизайні має цілком закономірні закони і правила. Почнемо зі шрифтів. Правильний вибір шрифтів багато в чому визначить концепцію вашої розробки і вплине на загальне сприйняття ресурсу.

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

Впровадження властивості @font-face CSS просто розв’язало дизайнерам руки. Прописав посилання на будь-який файл шрифту, і ось він вже використовується на сторінках сайту. Є в цій темі деякі невдоволення з боку розробників, але і це виявилося цілком вирішуваною проблемою.

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

Макро — і микротипографика

Як ви напевно вже зрозуміли з назви цих термінів:

макрорівень — будує загальну структуру тексту, визначає розміщення контенту щодо дизайну;

мікрорівень — приділяє увагу найдрібнішим деталям, прогалин, інтервалам, або вставкам і т. д.

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

Побудова цілісної композиції, в першу чергу, криється в розумінні простору. Веб-дизайнер зобов’язаний бачити картину цілком, але при цьому грамотно розкладати її на деталі. Незначущих елементів тут немає: заголовок, абзац, вертикальні відстані між елементами, регістри, товщина…

Шрифти для веб-дизайну бажано вказувати у відносних одиницях (% або «em»), це сприяє адаптивності і гнучкості контенту. Більш звичні пікселі «px» має сенс використовувати для неадаптивних контейнерів, коли при зміні розміру екрана рухаються блоки, а шрифт залишається стабільним.

Оформлення тексту

Важливий розділ типографіки — символьний комп’ютерний набір. Сюди відносяться: розстановка знаків пунктуації, вживання дужки, дефіс і тире, крапки, прогалини і т. д.

Такі помилки, на перший погляд, не несуть особливої загрози змістом або унікальності контенту, проте, запам’ятайте: ні один поважаючий себе ресурс не допустить примітивних помилок у текстах. Пам’ятайте про імідж, в ньому немає дрібниць!

Тепер про верстці. Тут є свої правила:

Блок з текстом повинен обмежуватися 40-50% ширини сторінки.

Між абзацами повинен бути 1,5 інтервал.

Контраст фону та тексту повинен укладатися в 75-90%.

Комфортний для очей шрифт — 12-16 px, але навіть самий дрібний блок не повинен бути менше 10 px.

Міжрядковий інтервал витримується щодо величини шрифту і вимірюється у відсотках, в ідеалі — 140-150% буде достатньо.

Вкрай поганим тоном вважається вирівнювання тексту по центру або по ширині. Рвані інтервали між словами, також як і рвані краї абзаців знижують сприйняття, а найчастіше просто дратують.

Стилі CSS

Стиль CSS — інструмент роботи зі шрифтами у веб-дизайні. З освоєння стилів CSS починається будь-який навчальний курс. Для чого вони потрібні? Для узагальнення всієї типографіки ресурсу! CSS приводить в єдине ціле станиці і блоки, контролює будь-які відхилення від основного курсу. Як ви розумієте, однією задумки мало, для її втілення вам знадобляться знання і навички.

В одній крутий статті я якось прочитав, що веб-дизайн на 95% складається з типографіки. Вірити цьому чи ні, кожен вирішить для себе сам. Але текст, який можна прочитати, що це продукт без мети. Моя вам порада, починайте приділяти увагу якості подачі інформації відразу, не затягуйте. На цьому у мене все. Підписуйтесь на оновлення, і ви не пропустіть найцікавіше! Поки-поки!