Коли типографія стає мистецтвом

«Говорить і показує...». Юлія Солнцева! Наш віддалений автор підготувала матеріал, присвячений типографике. Які шрифти популярні серед дизайнерів, а що подобається звичайним користувачам? Які літери породжують інтерес, а какие — відлякують? Ці і багато інші питання висвітлює стаття Юлі. Читаємо і дивимося :).

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

Причин тому як мінімум дві:
1. Більшість веб-дизайнерів, в відміну від класичних графічних дизайнерів, не типографы. Да і взагалі, є чи у сучасних веб-дизайнерів спеціальне освіта?
2. Використання типографики в вебе завжди мало великі технічні обмеження.

Ще пару років назад застосування шрифтів в веб-дизайні обмежувалося стандартним набором. Використання інших гарнітур означало застосування обхідних методів візуалізації, будь то зображення або flash. Сьогодні, з впровадженням @font-face CSS, у дизайнерів розв'язані руки, і шрифт як вагома частина дизайну набуває ще більше значення.

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

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

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

Итак…
Всю сукупність шрифтів прийнято ділити на наступні види: шрифти з зарубками і гротески, рукописні і акцидентные.

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

Прикладами гуманістичної активи можуть служити такі шрифти, як: Adobe Jenson, Goudy Old Style.

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

Грамотне поєднання цих двох стилів дає хороший результат, коли з допомогою шрифту виставляються різні смислові і емоційні акценти.

Slab serifs або Брусковий шрифт З розвитком типографики шрифти групи serifs поступово позбувалися від зарубок і Slab serifs наочний тому приклад. Шрифти цієї групи мають однаковий натиск і великі зарубки:

Подивіться, як оживає дизайн при грамотному використанні різних гарнітур групи serifs:


Природно, розвиток типографики не стояло на місці, і логічним наслідком тенденції позбавлення від зарубок стало поява шрифтів групи San Serif (гротеск) або рубаних шрифтів:

Гротески діляться на чотири групи: Grotesque, Neo-grotesque, Humanist , Geometric. Самі перші гротески по своєму геометрическому принципом побудови схожі на шрифти з зарубками, тільки без них. До наприклад, Franklin Gothic. Нові гротески, до яким відносять і популярний шрифт Helvetica, мають більше просту і сувору геометрическую основу, ніж їх попередники. Найбільшу популярність нові гротески отримали в середині ХХ-го століття:

Шрифти-гуманісти Шрифти стилю Humanist зберегли геометрическую строгість, але їх накреслення більше м'яке, плавні переходи і різний натиск створюють приємний для сприйняття текст. Ці шрифти добре підходять для наповнення сайту. Optima, Gill Sans, Verdana — усi це шрифти-гуманісти:

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

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

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

Використання шрифтів різних начертаний з застосуванням 3D графіки створює сучасний дизайн сайту, заснований на однією тільки типографике:



Рукописні шрифти Рукописні шрифти діляться на такі групи: шрифти з сполучними штрихами, без сполучних штрихів, імітують почерк, кежл-шрифти. Останні мають менш формальний стиль, часто імітують мазки кисті. Природно, такі шрифти не підходять для наповнення тіла сайту. Їх мета — проставляти акценти, нести емоційний посил. Та ж ситуація з акцидентными шрифтами: їх мета — акцентування зорового уваги читача:

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

Crepers:


Victory Art :


Luxor :



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


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

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

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

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

Якісний екранний шрифт повинен відповідати наступним вимогам:
1. Достатня висота букв.
2. Ширина і відстань між символами.
3. Вільне простір в символі


Контраст і колірне рішення
Це стилістичні прийоми, які використовують дизайнери для створення стилю сайту, де інструментом по-як і раніше виступає шрифт:


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

Чому цього не слід робити?
1. Lorem ipsum ніяк не відображає ні стилістично, ні по глузду контент сайту. До наприклад, сайт jrvelasco.com повністю заснований на поєднанні гарнітур і шрифтів. Зміг чи дизайнер домогтися такого ефекту, використовуючи текст-рибу?


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

Що вибирають дизайнери?
У всякого дизайнера є набір улюблених шрифтів і гарнітур. По тим або іншим причин вони вважають їх більше відповідними для веба. Не так давно популярний дизайнер і блоггер з Литви Tomas Laurinavicius провів опитування в соціальних мережах з метою виявити ТОП-10 улюблених шрифтів, які використовують дизайнери. В опитуванні прийняло участь 34 дизайнера з 14 країн світу, на зображенні нижче наведені результати:

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

ПиЭс. Почитати попередні статті Юлии Солнцевої можна по таким ссылочкам:
—  Що таке нестандартна навігація, або навіщо дизайнери це роблять?
—  Юзабіліті сайту: робота з навігацією
—  Мінімалізм в веб-дизайні, або «Doing more with less».