Урок 4. Основи типографіки

План вивчення теми уроку:

1. Переглянути навчальне відео.

2. Виконати самостійну роботу:

• Опрацювати історію дизайну (5 хв.) на даній сторінці сайту.

• Дослідити історію ландшафтного дизайну (результати дослідження представити у вигляді  відео та прикріпити на інтерактивну дошку).

3. Опрацювати опорний конспект (викладання змісту теми на даній сторінці сайту).

4. Виконати тестові завдання з теми уроку.

Перегляньте відео:

Ви звертали увагу на те, що на вебсторінках зазвичай поєднуються тексти, які виглядають по-різному? Наприклад, заголовки й основний текст, підписи, примітки, посилання. Деякі фрагменти тексту більш ви­ділені, а дата «сьогодні» введена окремим шрифтом. Для дизайнера пи­тання поєднання різних шрифтів є дуже важливим.

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

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

Гарнітури класифікують за ознаками наявності зарубок на шрифто­вих знаках: 

• Антиква (із зарубками);

• Гротеск (без зарубок).

Текст набирали з літер, тому й шрифт отримав назву набірного. Спо­чатку використовувалась готична форма літер, і текст нагадував руко­писний. У подальшому стали використовувати форму антикви.

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

Відстань між рядками практично завжди має бути більше розміру шрифту. За винятком заголовків. Щоб досягти балансу між текстом і «повітрям», зробіть межстрочное відстань приблизно в півтора рази більше висоти малих літер. Або встановлюємо інтерліньяж, рівний 150% розміру шрифту. Наприклад розмір тексту 14 px, тоді інтрерліньяж - 21 px. 14/2 = 7 + 14 = 21.

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

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

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

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

Розмір шрифтів треба вказувати цілими числами, не використовуючи десяткових дробів, наприклад 16,28 px. І, звичайно ж, в фотошопі необхідно перевести pt в px. Для цього вибираєте в меню: Редагування - Установки - Основні. Далі - Одиниці виміру та лінійки. Міняєте в випадаючих меню «Текст», «Лінійки» пункти на пікселі. Тиснете «OK».

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

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

Посилання

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

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

Каліграфія

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

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

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

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

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

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

Летерінг

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

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

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

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

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

Летерінг (від англ. lettering) — накреслення літер (текстових знаків). І У дизайні летерінгом є графічне зображення, створене на основі намальованих літер, інших знаків, які в цілому об'єднані в гармонійну стилістичну композицію.

Летерінг можна назвати мистецтвом, як основу має вимальовуван­ня літер і створення літерних (знакових) сполучень малюванням. Якщо в летерінгу знаки малюють, то в каліграфії (з грец. — красивий почерк) використовується накреслення шрифтових знаків.

Летерінг має широкий перелік інструментів для створення вигляду текстового знака. У каліграфії основним інструментом є перо (ручка), як звичайне, так і як інструмент графічного редактора. Приклади викори­стання «каліграфічних шрифтів»: запрошення, листівки, деякі логотипи, в різних свідоцтвах у місцях, де раніше передбачалось заповнення вручну.

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

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

• typekit.com - схожий по моделі, за концепцією. Ми можемо звідти брати шрифти і використовувати їх в web-е, наприклад, відразу ж.

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

• paratype.ru - величезна кількість російських шрифтів. Вони не найдешевші, але на сайті Paratype (у них в групі) часто бувають акції. Коли вони запускають якийсь черговий новий шрифт, вони його продають дуже дешево. Тому має сенс підписатися на їх групу в Facebook.

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

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

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

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

Самостійна робота учнів

• Опрацювати історію дизайну (5 хв.) на даній сторінці сайту

• Дослідити історію ландшафтного дизайну (результати дослідження представити в відео та прикріпити на інтерактивну дошку, яка знаходиться внизу сторінки)

Дайте відповіді на питання форми: