| Порівняння попередніх версій Попередня ревізія Наступна ревізія | Попередня ревізія |
| subjects:basic:informatika:graph:typohrafika [26.04.2025 11:35] – [Форматування для приємного читання] Адміністратор | subjects:basic:informatika:graph:typohrafika [04.05.2025 12:53] (поточний) – [Типографіка] Адміністратор |
|---|
| ====== Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів ====== | ====== Типографіка, шрифти і шрифтові пари. Прийоми каліграфії та леттерингу. Поєднання шрифтів ====== |
| ===== Типографіка ===== | ===== Типографіка ===== |
| **Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому. | |
| |
| **Типографіка** - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно. | **Типографіка** - звід законів, правил і норм оформлення тексту, заснованих на вивченні сприйняття набору читачем. Знання і розуміння типографіки перетворюють текст в інструмент побудови композиції, роблять його живим, надають характер і здатність передати ідею не тільки за допомогою змісту, а й графічно. |
| | |
| | **Типографіка** - найсильніший інструмент для вираження посилу в веб-дизайні. З його допомогою ви можете об'єднати текстову і візуальну складові, що допоможе вам достукатися до відвідувача. Правильне використання типографіки допоможе уникнути типових помилок, що допускаються дизайнерами при створенні чергового шедевра. Постараємося зрозуміти, що ж ми робимо не так, і як уникнути помилок в майбутньому. |
| |
| ===== Гарнітура ===== | ===== Гарнітура ===== |
| {{ 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]] допомагає легко визначити коефіцієнт контрастності комбінацій кольорів, щоб палітра відповідала стандартам. |
| |
| <grid> | <grid> |
| </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> |
| ===== Каліграфія ===== | ===== Каліграфія ===== |
| **Каліграфія** (грец. «Гарний почерк») - одна з галузей образотворчого мистецтва. Ще каліграфію часто називають мистецтвом красивого письма. Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері». | **Каліграфія** (грец. «Гарний почерк») - одна з галузей образотворчого мистецтва. Ще каліграфію часто називають мистецтвом красивого письма. Сучасне визначення каліграфії звучить наступним чином: «мистецтво оформлення знаків в експресивній, гармонійній і майстерній манері». |
| * [[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>дизайн}} |