1 of 37

Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу

За навчальною програмою 2018 року

Урок 4

10

(11)

2 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Типографія — мистецтво оздоблення друкарського тексту.

10�(11)

3 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Типографія включає в себе мистецтва:

шрифтового дизайну, тобто створення символів літер та цілих шрифтів;

шрифтового оздоблення, тобто модифікації та декорування малюнків літер;

верстки, тобто вибору шрифту, параметрів набору, способів розміщення на площині та компонування з іншими елементами.

10�(11)

4 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

10�(11)

5 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

Значення цієї властивості може бути як цілим, так і дробовим числом. Наприклад, розмір символів може бути:

8 пт

14 пт

18,5 пт

72 пт

1 ПТ = 0.3759 мм.

Для прикладу 12 розмір кегля в міліметрах буде становити 4,2.

10�(11)

6 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

Інтерліньяж має відповідати розміру шрифту

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

Щоб досягти балансу між текстом і «повітрям», зробіть міжрядкову відстань приблизно в півтора рази більше висоти малих літер.

10�(11)

7 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Кернинг – відстань між буквами.

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

10�(11)

8 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Гарнітура – шрифт або кілька шрифтів, що мають стилістичне єдність накреслення. Складається з набору знаків.

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

10�(11)

9 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

Антиква –

шрифти із зарубками

Гротеск –

шрифт без зарубок

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

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

10�(11)

10 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

Бажано використовувати не більше 3-х накреслень. Це можуть бути шрифти як однієї гарнітури, так і різних.

10�(11)

11 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Наприклад, гарнітура Roboto містить досить велику кількість різних накреслень. З них легко можна вибрати три. Припустимо, це будуть:

Light

Regular

Bold

Можна використовувати для заголовків

для кнопок

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

для основного тексту

10�(11)

12 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

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

10�(11)

13 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

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

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

10�(11)

14 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Контраст

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

10�(11)

15 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Стилі

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

10�(11)

16 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

У чому краса використання гарнітури в складі шрифтової пари? У тому, що шрифти - вони схожі за

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

10�(11)

17 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Шрифтові пари (Raleway і Roboto)

10�(11)

18 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

Шрифтові пари (Sansita One і Kameron)

10�(11)

19 of 37

Типографіка,�шрифти і шрифтові пари

Розділ 1 § 4

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

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

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

10�(11)

20 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері».

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

10�(11)

21 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

Зараз каліграфія існує в основному в:

формі запрошень, листівок

весільних привітань

графіті

шрифтах і рукописних логотипах

релігійному мистецтві

графічному дизайні

історичних документах

10�(11)

22 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

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

10�(11)

23 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

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

10�(11)

24 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

Будова символів у шрифті

10�(11)

25 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

Інші важливі поняття будови шрифту

10�(11)

26 of 37

Прийоми каліграфії та леттерингу

Розділ 1 § 4

10�(11)

27 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

Історія становлення дизайну як професії мала свій початок більше ста років тому. Саме в той час в Англії виник рух «за зв’язок мистецтва і ремесел», який очолив Вільям Морріс. Згодом цей рух знайшов своє відображення в художній культурі США, Фінляндії та Швеції. Саме тоді були сформовані основні положення теорії та принципи дизайну, які вплинули на напрямки дизайну наступних років.

10�(11)

28 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

У відповідності з іншою точкою зору виникнення дизайну відносять до початку XX сторіччя,

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

10�(11)

29 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

Початком історії дизайну вважається 1907 рік, коли художник, архітектор, дизайнер Петер Беренс почав роботу в компанії «Аllgemeine Еlektrizital Gesellschaft». Попередні ж десятиліття були лише періодом теоретичної підготовки майбутнього практичного дизайну.

10�(11)

30 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

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

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

10�(11)

31 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

Історія типографіки як науки починається з винаходу друкарства.

Друкарський верстат Гутенберга

10�(11)

32 of 37

Коротка історія дизайну і типографіки

Розділ 1 § 4

Родоначальником друкарства називають Йоганна Гутенберга.

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

10�(11)

33 of 37

Розгадайте ребус

Типографіка

Розділ 1 § 4

10�(11)

34 of 37

Дайте відповіді на запитання

Розділ 1 § 4

Як ви розумієте поняттям «Типографія»?

Як ви розумієте поняттям «Шрифт»?

Як ви розумієте поняттям «Кегель»?

Як ви розумієте поняттям «Гарнітура»?

Як ви розумієте поняттям «Літтерніг»?

10�(11)

35 of 37

Домашнє завдання

Розділ 1 § 4

Здійснити пошук інформації з теми «Історія дизайну і типографіки», підготувати виступ (текстовий документ, презентація тощо)

10�(11)

36 of 37

Працюємо за комп’ютером

Розділ 1 § 4

Створіть презентацію

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

1. Розмісіть роботу на Google-диску, надайте доступ, для перегляду і редагування учителю і 2 однокласникам.

2. Перегляньте проектну роботу своїх друзів. Додайте коментарі. Порівняйте змістовну частину і оформлення.

3. Оцініть власну роботу і переглянуті роботи.

10�(11)

37 of 37

Дякую за увагу!

За навчальною програмою 2018 року

Урок 4

10

(11)