Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів [Wiki Глухівського ВПУ]

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

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

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

Гарнітури можна розділити на дві основні категорії:
  * Антиква - шрифти із зарубками.
  * Гротеск, відповідно, - шрифт без зарубок.

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

Шрифт із зарубками, як би тримає рядок, а відповідно підвищується читабельність. Часто шрифти із зарубками створюють відчуття професіоналізму і авторитетності наданої інформації, висловлюють повагу, підкреслюють стабільність і консерватизм в кращому розумінні цього слова. Шрифти без зарубок, як правило, акцентують раціональність, дотримання стилю, молодість і сучасність. Допомагають створити простір між буквами, а також відокремити один знак від іншого.
<grid>
<col md="3">{{ :subjects:basic:informatika:graph:https_encrypted-tbn0.gstatic.comimages.png?nolink }}**Кегль** - висота букви, що включає в себе нижні і верхні виносні елементи. Вимірюється в друкарських пунктах (позначається як pt). Наприклад, текст набраний 14 кеглем, буде дорівнює 14 pt по висоті.</col>
<col md="6">{{ :subjects:basic:informatika:graph:embeddedimage.png?nolink }}
**Інтерліньяж** - міжрядковий інтервал. Відстань між базовими лініями сусідніх рядків.

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

Відстань між рядками практично завжди має бути більше розміру шрифту. За винятком заголовків. Щоб досягти балансу між текстом і «повітрям», зробіть межстрочное відстань приблизно в півтора рази більше висоти малих літер. Або встановлюємо інтерліньяж, рівний 150% розміру шрифту. Наприклад розмір тексту 14 px, тоді інтрерліньяж - 21 px. 14/2 = 7 + 14 = 21.
</col>
<col md="3">
{{ :subjects:basic:informatika:graph:kering.png?nolink }}
**Кернинг** - відстань між буквами. 

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

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

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

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

===== Проблеми цифрової типографіки =====
Коли справа доходить до дизайну друку, існує кілька параметів у тому, як користувач буде з цим взаємодіяти. Надрукована сторінка не змінює форму залежно від того, хто її тримає — кольори можна строго контрольовані, а шрифт залишатиметься статичним. Цифрова типографіка набагато плавніша. Коли типографіка з’являється на екрані, на її відображення впливає багато факторів, деякі з яких включають:
  * Розмір екрана: це неможливо передбачити, однак адаптивний дизайн має на меті врахувати будь-які незначні зміни розмірів. Але це означає, що верстка іноді може бути зроблена марно.
  * Роздільна здатність екрана: щільність пікселів відіграє велику роль у розбірливості тексту. Технологічний прогрес зробив екрани високої роздільної здатності доступнішими для широких мас, але дизайнери повинні пам’ятати і про більш рінні технології.
  * Калібрування екрана: рівні яскравості визначають, як кольори відображаються на екрані. Вибір кольорів для веб-дизайну повинен відповідати всім типам параметрів екрана.

===== Вибір шрифту для читання з екрану =====
Цифровий дизайн — це невловиме ремесло — не так давно ми були обмежені лише декількома шрифтами, сумісними з моніторами з низькою роздільною здатністю.

Зараз шрифти створені для екрана їх дизайн розроблений з певними нюансами, які покращують читабельність((ЧИТА́БЕЛЬНИЙ, а, е. Який легко читається, має великий попит серед читачів; ходовий; / [[http://sum.in.ua/s/chytabeljnyj|Словник української мови]])).

<grid>
<col md="3"></col>
<col md="6">
{{ :subjects:basic:informatika:graph:toptal-blog.jpg?nolink }}
Шрифти для друку призначені для відображення чорнилом. Веб-шрифти складаються з квадратних пікселів.
</col>
<col md="3"></col>
</grid>

Дизайн не обов’язково обмежується загальноприйнятими шрифтами (Times New Roman). Для дизайнерів є незліченна кількість доступних варіантів для створення шрифтів, які є безпечними та доступними для Інтернету. [[https://fonts.google.com/|Google Fonts]], [[https://fontlibrary.org/|Font Library]], і [[https://fonts.adobe.com/|Adobe Typekit]] – це деякі з них, які пропонують просту інтеграцію та широкий вибір.
===== Форматування для приємного читання =====
Вибір шрифту – це лише початок. Рішення щодо довжини та висоти лінії можуть змінити чи зламати веб-дизайн. Є прості поради: ніколи не використовуйте лише великі літери та зведіть до мінімуму кількість шрифтів, але багато рішень щодо форматування залежать від спроб і помилок.
{{ https://uploads.toptal.io/blog/image/127779/toptal-blog-image-1544930941492-2e739610e550bd0093b1ce4d146ed65a.gif }}

Ідеальний розмір тексту залежить від вибраного шрифту, оскільки такі фактори, як **розмір корпусу** і **внутрішній просвіт літери**, впливатимуть на розбірливість. Тоді розмір тексту визначатиме висоту та довжину рядка. Простий спосіб перевірити взаємозв’язок між цими рішеннями — скористатися такими інструментами, як [[https://gridlover.net/|Grid Lover]], який використовує повзунки для зміни вигляду кожного вимірювання.

Вибір кольору фону для тексту так само важливий, як і сам колір шрифту. Контраст між ними визначатиме, наскільки читабельною буде текст. Засіб перевірки контрастності [[https://webaim.org/resources/contrastchecker/|WebAIM]] допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам.

<grid>
<col md="6">
<alert type="info" icon="fa fa-question-circle">У типографіці **x-height**, або **розмір корпусу**, — це відстань між базовою лінією та середньою лінією малих літер у гарнітурі.
{{ :subjects:basic:informatika:graph:361px-typography_line_terms.png?nolink }}</alert>
</col>
<col md="6">
<alert type="info" icon="fa fa-question-circle">У типографіці **внутрішній просвіт літери** — це область літери, яка повністю або частково оточена формою літери або символом. На малюнку ничже червоним кольором показано лічильник букви "р".
{{ :subjects:basic:informatika:graph:220px-counter_typography.png?nolink }}</alert>
</col>
</grid>

<callout type="info" icon="fa fa-info">
**Внутрішній просвіт літери** або **замкненй елемент шрифту** (англ. **Counter Typography**) — простір, цілком або частково обмежений штрихами знака. Розрізняють закриті та відкриті просвіти. Приклади закритих просвітів: у кириличних літерах «А», «а», «б», «в» тощо; у латинських літерах «D», «d», «g», «q» тощо; у цифрах «6», «8» тощо. Приклади відкритих просвітів: у кириличних літерах «П», «п», «с» тощо; у латинських літерах «G», «m», «n» тощо; у цифрах «3», «5» тощо. Деякі знаки мають різні накреслення, що відрізняються закритими та відкритими просвітами, наприклад, латинська літера '' та '', цифра '' та ''.
Текст набраний трьома шрифтами з різними апертурами: Corbel (зверху), Helvetica (посередині) та Haettenschweiler (знизу).

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

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

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

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

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

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

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

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

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

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

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

===== Джерела =====
  * [[https://sites.google.com/view/distance-informatics-10/%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%83%D1%80%D0%BE%D0%BA-4|Інформатика, 10 - Урок 4]]
  * [[https://www.toptal.com/designers/typography/web-typography-infographic|www.toptal.com]]
  * [[wp>Внутрішній просвіт літери]]

{{tag>інформатика типографіка шрифт дизайн}}
Теги: {{tagpage>інформатика}}{{tagpage>типографіка}}{{tagpage>шрифт}}{{tagpage>дизайн}}