Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Особливості поєднання шрифтів

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

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

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

Гарнітури можна розділити на дві основні категорії:

§  антиква - шрифти із зарубками;

§  гротеск, відповідно, - шрифт без зарубок.

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

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

         Кегль - висота букви, що включає в себе нижні і верхні виносні елементи. Вимірюється в друкарських пункта (позначається як pt). Наприклад, текст набраний 14 кеглем, буде дорівнює 14 pt по висоті.

Інтерліньяж - міжрядковий інтервал, відстань між базовими лініями сусідніх рядків.

Інтерліньяж має відповідати розміру шрифту. Відстань між рядками практично завжди має бути більше розміру шрифту, за винятком заголовків. Щоб досягти балансу між текстом і «повітрям», слід зробити міжрядкову відстань приблизно в півтора рази більше висоти малих літер. Або встановити інтерліньяж, рівний 150% розміру шрифту.

Кернинг - відстань між буквами. Основна суть кернинга - підбір різних інтервалів між різними парами конкретних букв для збільшення зручності читання.

Яку кількість шрифтів використовувати?

         Бажано використовувати не більше 3-х накреслень. Це можуть бути шрифти як однієї гарнітури, так і різних. Наприклад, гарнітура Roboto містить досить велику кількість різних накреслень. З них легко можна вибрати три, які, як ми вважаємо, підійдуть для нашого сайту. Припустимо, це будуть Light, Regular і Bold. Для заголовків можна використовувати шрифт Bold або Light, для кнопок Bold, для основного тексту Regular. Таким чином, використовуючи одну гарнітуру, ми забезпечимо правильну типографіку. Природно, все залежить від тематики продукту: сайту, блогу, реклами тощо і ідеї, яку заплановано закласти в дизайн. 

Якого розміру повинен бути шрифт?

Розмір тексту в інтернеті не повинен бути менше 12 пікселів. Кращий вибір - в межах 14-18 px для основного тексту. Причому, якщо вже вибрано розмір 16 px, він повинен залишатися 16 px на всіх сторінках сайту і не скакати плюс-мінус 1 px від блоку до блоку. Стосується це і інтерліньяжу, він всюди має бути однаковий.

Розмір шрифтів треба вказувати цілими числами, не використовуючи десяткових дробів, наприклад 16,28 px. 

Довжина рядка

Довжина рядка не повинна перевищувати 600 px. Це оптимальний розмір для комфортного переміщення погляду з одного рядка на інший. Дуже широку контентну частину важко читати - часто просто втрачаєш ту сходинку, на яку збирався перейти після прочитання довгого попереднього рядка. Якщо все-таки необхідно розтягнути текстовий блок на 1000 px і більш по ширині, можна спробувати розбити текст на дві або більше колонок. Інший варіант - зробити міжрядкову відстань трохи більше звичайного, щоб візуально сильніше відокремити рядки один від одного. Розділення тексту абзацами також допоможе зробити його читабельним.

Посилання

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

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

Вирівнювання

Є текстові блоки, які дуже часто вирівнюються неправильно - це вирівнювання по ширині, вирівнювання посередині і вирівнювання по правому краю. У всіх цих випадках читати текст незручно, і візуально він виглядає непривабливо. Вирівнювання ЗАВЖДИ має бути по лівому краю. Навіть якщо дуже хочеться зробити його по правому краю (просто тому що вам здається - композиційно має бути саме так) - це неправильно.

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

Контраст

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

Стилі

          Потрібно завжди думати про те, яку інформацію ви намагаєтеся донести відвідувачеві. Вибираючи шрифт, слід пам'ятати, що «щасливі» повідомлення повинні супроводжуватися легкими, повітряними і м'якими формами шрифтів, в той час як повідомлення якихось більш похмурих тем (наприклад, Хеллоуїн) краще було б супроводжувати шрифтами з більш жорстким шрифтом. За допомогою типографіки веб-дизайнери підкреслюють атмосферу і стиль сторінки, а також створюють поживний ґрунт для емоційного відгуку.

Шрифтові пари

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

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

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

Головне правило - це достатній контраст. Чи не занадто великий, не дуже маленький - той, який нам потрібен тут і зараз. Існує 4 інструменти для створення шрифтових пар, якими можна впливати на контраст:

1.  Шрифт. Це Антиква і Гротеск, наприклад. Тому що між ними максимальний контраст. Антиква - це шрифт із зарубками, Гротеск - це шрифт без зарубок.

2. Так само ми можемо використовувати накреслення як в рамках одного шрифту, так в рамках і різних шрифтів. Наприклад, це звичайне написання (Regular), жирне і курсив.

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

4. Колір.

Є усталені пари, які можна брати і використовувати. Наприклад,

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

2) Proxima Nova для заголовків, це шрифт без зарубок, і Palatino - для наборів статей.

3) PT Sans і PT Serif. Це шрифти, які знаходяться в складі однієї гарнітури, тобто, так звані шрифти однієї природи. Sans – в заголовку, Serif – в основному тексті.

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

Де брати шрифти?

§  google.com/fonts/ - це каталог безкоштовних шрифтів від Google

§  typekit.com - схожий по моделі, за концепцією.

§  myfonts.com - величезна база шрифтів (як латиниці, так і кирилиці).

Головне правило

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

Каліграфія

Каліграфія (грец. «гарний почерк») - одна з галузей образотворчого мистецтва. Ще каліграфію часто називають мистецтвом красивого письма. Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері».

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

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

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

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

Леттерінг

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

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

Леттерінг - єдині в своєму роді кілька букв, виготовлених (намальованих, вирізаних і ін.) для однієї конкретної ситуації.

Багато людей називають шрифтом що завгодно, якщо там є кілька букв. Однак, часто те, що вони бачать, є леттерінгом. Його головна відмінність -  графічна складова: унікальні форми, які поєднуються одна з одною в конкретному слові або фразі. Марк Симонсон провів хорошу аналогію: леттерінг відрізняється від шрифту так само, як ліплення з глини відрізняється від будівництва з кубиків Лего.

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