Розбіжності

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

Посилання на цей список змін

Порівняння попередніх версій Попередня ревізія
Наступна ревізія
Попередня ревізія
subjects:basic:informatika:graph:typohrafika [26.04.2025 11:35] – [Форматування для приємного читання] Адміністраторsubjects:basic:informatika:graph:typohrafika [04.05.2025 12:53] (поточний) – [Типографіка] Адміністратор
Рядок 1: Рядок 1:
 ====== Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів ====== ====== Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів ======
 ===== Типографіка ===== ===== Типографіка =====
-**Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому. 
- 
 **Типографіка** - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно. **Типографіка** - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно.
 +
 +**Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому.
  
 ===== Гарнітура ===== ===== Гарнітура =====
Рядок 64: Рядок 64:
 {{ https://uploads.toptal.io/blog/image/127779/toptal-blog-image-1544930941492-2e739610e550bd0093b1ce4d146ed65a.gif }} {{ https://uploads.toptal.io/blog/image/127779/toptal-blog-image-1544930941492-2e739610e550bd0093b1ce4d146ed65a.gif }}
  
-Ідеальний розмір тексту залежить від вибраного шрифту, оскільки такі фактори, як **розмір корпусу** і відкритість **лічильника**, впливатимуть на розбірливість. Тоді розмір тексту визначатиме висоту та довжину рядка. Простий спосіб перевірити взаємозв’язок між цими рішеннями — скористатися такими інструментами, як [[https://gridlover.net/|Grid Lover]], який використовує повзунки для зміни вигляду кожного вимірювання.+Ідеальний розмір тексту залежить від вибраного шрифту, оскільки такі фактори, як **розмір корпусу** і **внутрішній просвіт літери**, впливатимуть на розбірливість. Тоді розмір тексту визначатиме висоту та довжину рядка. Простий спосіб перевірити взаємозв’язок між цими рішеннями — скористатися такими інструментами, як [[https://gridlover.net/|Grid Lover]], який використовує повзунки для зміни вигляду кожного вимірювання.
  
 Вибір кольору фону для тексту так само важливий, як і сам колір шрифту. Контраст між ними визначатиме, наскільки читабельною буде текст. Засіб перевірки контрастності [[https://webaim.org/resources/contrastchecker/|WebAIM]] допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам. Вибір кольору фону для тексту так само важливий, як і сам колір шрифту. Контраст між ними визначатиме, наскільки читабельною буде текст. Засіб перевірки контрастності [[https://webaim.org/resources/contrastchecker/|WebAIM]] допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам.
Рядок 74: Рядок 74:
 </col> </col>
 <col md="6"> <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> {{ :subjects:basic:informatika:graph:220px-counter_typography.png?nolink }}</alert>
 </col> </col>
 </grid> </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://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]]   * [[https://www.toptal.com/designers/typography/web-typography-infographic|www.toptal.com]]
 +  * [[wp>Внутрішній просвіт літери]]
  
 {{tag>інформатика типографіка шрифт дизайн}} {{tag>інформатика типографіка шрифт дизайн}}
 Теги: {{tagpage>інформатика}}{{tagpage>типографіка}}{{tagpage>шрифт}}{{tagpage>дизайн}} Теги: {{tagpage>інформатика}}{{tagpage>типографіка}}{{tagpage>шрифт}}{{tagpage>дизайн}}
  • subjects/basic/informatika/graph/typohrafika.1745656544.txt.gz
  • Востаннє змінено: 14 місяців тому
  • повз Адміністратор