Веб-дизайн та розробка сайтів

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

На перший погляд здається, що шрифт повинен тільки зафіксувати визначений текст і передавати його зміст. Звісно ж головна мета довільного надпису в тому, щоб повідомити певну інформацію і разом з тим на нас діє і пластичний і колірний вигляд надпису.  Надписи є своєрідними орнаментними побудовами, в яких за певним порядком чергуються геометричні “мовити” – позначки букв.

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

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

Serifs, Sans Serif, Script & Decorative

Велику кількість шрифтів було розроблено при винайденні першої друкарської машинки. Друкарі виконували велику роботу категоризуючи шрифти за їх стилями,  розділивши всі західні типи на чотири категорії: Serifs (з зарубками), Sans Serif (без зарубок), Script (сценаріїв) і Decorative (декоративний).

Шрифти групи Serif

Розглядаючи літери шрифту Times New Roman можна помітити короткі лінії зверху і знизу на кожній літері, які називають насічками. Якщо шрифт містить насічки, то це однозначно шрифт з групи Serif. Шрифти Serif зазвичай використовуються у офіційній кореспонденції, де важливими є престиж і гарне оформлення. Для прикладу, якщо б для офіційного листування використовувати шрифти типу Sans Serif, то вплив на читача був би повністю протилежним. Шрифти забезпечують кращий користувацький досвід в друкованій продукції, ніж у вебі. Будьте обережними використовуючи їх на екрані, вони добре працюють в заголовках, а для використання їх в основному тексті підберіть належні розмір та інтервал для забезпечення зручності читання в русі. Шрифти Serif користувачами сприймаються як тонкі, красиві, дорогі теплі і трохи «пахнуть» старовиною.

Шрифти групи Sans Serif

Група шрифтів без зарубок називається Sans Serif. Порівняно з шрифтами інших груп, шрифти Sans Serif найкраще сприймаються на екрані. Тоді як зарубки не сприймаються при читанні з екрану (але вітаються у друкованій продукції) шрифти без зарубок сприяють чистому та інтуїтивному читанню та ідеально підходять як для заголовку так для основного тексту. Шрифти групи Sans Serif викликають відчуття неформальності, тому не рекомендуємо їх використовувати для юридичних та інших офіційних сайтів, а для блогів чи персональних сайтів це найкращий вибір. Зазвичай читачі сприймають ці шрифти як міцні, незугарні, дешевенькі, холоднуваті та юні.

Шрифти групи Script

Шрифти групи Script – рукописні шрифти, які найкраще підходять для подання інформації на екрані. Ці шрифти справляють приємне враження і є оптимальними для заголовків і організації декорування сторінки. Ні в якому разі не можна використовувати їх для оформлення основного тексту, за виключенням окремих проектів, які за власними призначенням потребують представлення інформації шрифтами цієї групи.
Шрифти групи Script викликають різні емоції залежно від специфіки тексту, в якому вони використані. Деякі з цих шрифтів дуже близькі до рукописних, що робить їх неформальними і поширеними при особистому листуванні, оформленні весільних запрошень чи вітальних листівок. Проте ці шрифти можна використати для естетичного оформлення зовнішнього вигляду ресурсу. Читачі зазвичай характеризують ці шрифти як жіночі, красиві, дорогі, м’які, ніжні, тихі, тендітні і теплі.

Декоративні шрифти

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

Як покращити параметри типографії?

Відстань між рядками. Для забезпечення зручності читання подбайте про міжрядковий інтервал. Оптимальніший його розмір повинен бути 30-60% від розміру шрифту. Якщо текст ви подаєте шрифтом розміром у 12 пт, то між рядками слід подавати відступ 4-6 пт. Це дозволить полегшити читання тексту.

Довжина стрічки. Як і міжрядковий інтервал впливає на зручність читання. Чим довшими будуть стрічки, тим менша ймовірність, що читач їх дочитає до кінця. Якщо стрічки будуть занадто короткими, це змушує часто переводити погляд з початку стрічки на її кінець, що також не вітається. Золота середина – 45-85 символів у стрічці (7-10 слів, у широкоформатному режимі може бути і більше).

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

Вертикальна ритмічність. Уявіть, що ваша сторінка побудована на сітці шириною 18 пт. Цей прийом використовують для реалізації «послідовного потоку контенту» від заголовку до футера сторінки. Це послідовний потік спрямовує погляд відвідувачі при перегляді сторінки.

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

Комбінування шрифтів

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

• постарайтеся не змішувати шрифти одного типу, варіанту чи стилю на одному рівні ієрархії. Кожен рівень повинен бути специфічним і унікальним;
• намагайтеся досягти достатньої контрастності. Схожість шрифтів, навіть на різних рівнях, призводить до плутанини і незрозумілослі подання;
• комбінуйте шрифти груп Serif і Sans Serif не питайте чому, а комбінуйте;
• використовуючи Serif в заголовках, обирайте Sans Serif для основного тексту і навпаки;
• якщо вам необхідно виділити заголовок, вибір напівжирного шрифту не найкраще рішення. Заголовковий шрифт повинен бути помітним для очей і для сміливих заголовків найкраще підійде один з наступних безкоштовних округлих шрифтiв.

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

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