Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

--- subjects:basic:informatika:graph:typohrafika [23.09.2022 22:47] – створено Адміністратор
+++ subjects:basic:informatika:graph:typohrafika [04.05.2025 12:53] (поточний) – [Типографіка] Адміністратор
@@ Рядок 1: / Рядок 1: @@
 ====== Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів ======
 ===== Типографіка =====
-**Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому.
 **Типографіка** - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно.
+**Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому.
 ===== Гарнітура =====
@@ Рядок 61: / Рядок 61: @@
 Дизайн не обов’язково обмежується загальноприйнятими шрифтами (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 }}
-Ідеальний розмір тексту залежить від вибраного шрифту, оскільки такі фактори, як **розмір копусу** і відкритість **лічильника**, впливатимуть на розбірливість. Тоді розмір тексту визначатиме висоту та довжину рядка. Простий спосіб перевірити взаємозв’язок між цими рішеннями — скористатися такими інструментами, як Grid Lover, який використовує повзунки для зміни вигляду кожного вимірювання.
+Ідеальний розмір тексту залежить від вибраного шрифту, оскільки такі фактори, як **розмір корпусу** і **внутрішній просвіт літери**, впливатимуть на розбірливість. Тоді розмір тексту визначатиме висоту та довжину рядка. Простий спосіб перевірити взаємозв’язок між цими рішеннями — скористатися такими інструментами, як [[https://gridlover.net/|Grid Lover]], який використовує повзунки для зміни вигляду кожного вимірювання.
-Вибір кольору фону для тексту так само важливий, як і сам колір шрифту. Контраст між ними визначатиме, наскільки читабельною буде текст. Засіб [[https://webaim.org/resources/contrastchecker/|перевірки контрастності]] WebAIM допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам.
+Вибір кольору фону для тексту так само важливий, як і сам колір шрифту. Контраст між ними визначатиме, наскільки читабельною буде текст. Засіб перевірки контрастності [[https://webaim.org/resources/contrastchecker/|WebAIM]] допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам.
 <grid>
@@ Рядок 74: / Рядок 74: @@
 </col>
 <col md="6">
-<alert type="info" icon="fa fa-question-circle">У типографіці **лічильник** — це область літери, яка повністю або частково оточена формою літери або символом. На малюнку ничже червоним кольором показано лічильник букви "р".
+<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>
 ===== Каліграфія =====
 **Каліграфія** (грец. «Гарний почерк») - одна з галузей образотворчого мистецтва. Ще каліграфію часто називають мистецтвом красивого письма. Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері».
@@ Рядок 106: / Рядок 111: @@
   * [[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>дизайн}}