Усі терміни типографіки – повний гайд

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

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

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

Ми склали список термінів залежно від частоти їх використання в UX-дизайні та врахували ті, які люди неправильно розуміють та плутають.

Гарнітура (Typeface, інша назва сімейство шрифтів (font family)): набір літер та символів, які призначені для спільного відображення у вигляді слів та чисел.

Гарнітура – ​​це група, до якої належить конкретний шрифт. Arial, Calibri та Helvetica – приклади гарнітур. Слово "гарнітура" має відношення до лицьового боку фізичних буквених блоків. Друкарі встановлювали їх усередину друкарських машин для створення публікацій.У межах кожної гарнітури типограф мав широкий вибір з літерних блоків і підмножини шрифтів.

Усередині друкарських машин було багато висувних ящиків із літерними блоками гарнітури, з яких друкарі могли вибрати певний шрифт (скриньку). (Фото: Стефан Швайхофер, Pixabay)

Кожен шрифт (ящик) складався із серії буквених блоків, які відповідали символам певного розміру та форми. Друкар міг скласти з них рядки тексту на аркуші для друку публікації. (Фото: Стефан Швайхофер, Pixabay)

Деякі гарнітури необхідно купувати у правовласника, інші є у відкритому доступі. При виборі гарнітури для вашого дизайну важливо враховувати, чи буде вона безпечною. Якщо шрифт не є безпечним в Інтернеті, текст може не завантажуватися належним чином. Зазвичай це призводить до того, що дизайнер створює зображення з використанням потрібного шрифту (якщо немає іншого виходу), щоб він відображався коректно. Це рішення може бути прийнятним для деяких елементів дизайну, наприклад, логотипів, інакше програми читання з екрана не зможуть розпізнати текст на зображеннях, він не буде індексуватися пошуковими системами і враховуватися у випадках, коли потрібно знайти конкретне слово в документі (функція CTRL+F ). Це обмежує спеціальні можливості сайту, погіршує SEO та зручність використання. Із безпечними веб-шрифтами таких проблем немає.

Шрифт (Font): певний набір окремих стилізованих букв у рамках гарнітури, наприклад:

Не слід плутати шрифт із гарнітурою або сімейством шрифтів (див. нижче). Хоча ці терміни часто використовуються як синоніми, по суті це не те саме. Шрифт включає певний розмір, стиль і зображення тексту, які застосовують дизайнери.Гарнітура – ​​це група, до якої належить конкретний шрифт.

З яких частин складається назва (шрифт)? Якщо ми розглянемо склад Franklin Gothic Book, Bold, 44px, ми побачимо, що Franklin Gothic - це гарнітура (або сімейство шрифтів), Book - Це стиль, Bold - Накреслення, а 44px - Розмір.

Оформлення шрифту (Font decoration, або оформлення тексту, text decoration): створення лінії над текстом, лінії підкреслення та перекреслення тексту.

Оформлення шрифту відрізняється від понять шрифтового ефекту (наприклад, тіней), стилю (курсив, великі літери тощо), накреслення (як варіант: тонкий, напівжирний) та його ширини (наприклад, вузький, розтягнутий).

Шрифтовий ефект (Font effect) застосовується до літер або рядків тексту для створення більшої наочності.

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

Стиль шрифту (Font style): певний варіант зовнішнього вигляду шрифту (наприклад, "Roman" шрифту "Times New Roman").

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

Засічки (Serif): невеликий гачкоподібний елемент, що нагадує ступню, зустрічається на краях букв у деяких гарнітурах. Шрифт із засічками (serif font) — це шрифт, у якому кожна буква має засічки на краях.

Без засічок (Sans-serif): у літер відсутні будь-які додаткові елементи. Шрифт без засічок (Sans-serif font) — це шрифт, у якому букв немає засічок.

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

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

Зображення шрифту (Font weights): товщина ліній кожної літери.

Приклади: тонкий (thin), ультратонкий (ultrathin), легкий (light), стандартний (regular), середній (medium), напівжирний (semi-bold), жирний (bold), жирніший (extra bold), дуже жирний (black) ) та ультражирний (ultra black).

Ширина шрифту (Font width): ширина кожної літери, що визначається найширшою відстанню між крайніми лініями цієї літери (не плутати з зображенням шрифту (див. вище) або кернінгом (див. нижче)).

Приклади: стислий (condensed), надстислий (extra condensed), вузький (narrow), розтягнутий (extended), надрозтягнутий (ultraextended) і широкий (expanded).

Ширина може бути вказана у назві шрифту, але не завжди. Наприклад, Helvetica Neue Thin сам по собі стисліший шрифт, ніж Helvetica Neue Regular, проте в назві немає слова "стислий".Творці шрифтів можуть цілеспрямовано стискати їх у стилістичних цілях. Наприклад, у Helvetica Neue Condensed Bold таке ж зображення, як у Helvetica Neue Bold, але він виглядає помітно вужчим.

Накреслення шрифту визначає товщину літерних ліній (ліворуч), ширина шрифту показує ширину всієї літери незалежно від товщини її ліній.

‍Зворотний відступ (Hanging Indent): перший рядок тексту в абзаці знаходиться лівіше ніж наступні рядки.

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

Міжлітерний інтервал (Letter Spacing) (інша назва - трекінг (tracking)): відстань між найширшими точками кожного символу (не плутайте з кернінгом (див. нижче)), яка найчастіше застосовується до всього слова, рядка або абзацу.

Кернінг (Kerning): зменшений горизонтальний простір між послідовними символами, який часто застосовується до певної групи літер.

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

Кернінг визначає простір між лініями кожної літери, а міжлітерний інтервал пов'язаний з простір між найширшими точками кожної літери.

‍Інтерліньяж (Leading) (інші назви: висота рядка (line height) або міжрядковий інтервал (line spacing)): вертикальний інтервал між рядками тексту, що визначається відстанню між базовими лініями.

Базова лінія - це основа кожної літери, яка не включає виносний елемент (він зустрічається у малих літер, наприклад "p" та "q").

Інтерліньяж - це відстань між сусідніми текстовими рядками, яка вимірюється від їх базових ліній (не включаючи виносні елементи, наприклад, у літері p).

Лігатура (Ligature): єдиний символ, який утворюється тоді, коли дві або більше літер стикаються.

Лігатура може використовуватися для створення фірмової символіки, виконувати роль декоративного елемента або виступати як літерний символ у деяких мовах.

Гадзук (Gadzook): графічний елемент або прикраса, яка поєднує дві літери лігатури.

У логотипі FedEx літери d і E утворюють лігатуру (як і інші літери у цьому логотипі), а лінії, які з'єднують d з E і E з x, є гадзуки.

У цьому французькому реченні (перекладається як «Ах, моє серце!») Ah - це декоративна лігатура, а œ - Лігатура, яка виступає як літерний символ. Лінії, що з'єднують “A” та “h”, а також “o” та “e”, є гадзуками для кожної лігатури.

‍Висячий рядок (Orphan): дуже коротка частина тексту (зазвичай одне слово), яка розташовується окремому рядку після його розриву.

Щоб уникнути такого ефекту, подумайте про розрив рядка (не розрив абзацу (див. нижче)) в іншій частині речення. У цьому випадку слово не залишатиметься на самоті, як “бідний родич”. Текст краще сприймається, якщо в останньому рядку залишається більше двох слів. По можливості це необхідно враховувати.

Розрив рядка (Line break): роздільник у блоці тексту, який позначає кінець одного рядка та початок наступного; не плутати з розривом абзацу (див. нижче).

Тег
створює розриви рядків у HTML як заміну м'якого “Enter” на клавіатурі (примітка. м'який “Enter” – це поєднання клавіш Shift+Enter, при одночасному натисканні яких відбувається розрив рядка).

Розрив абзаців (Paragraph break): розділювач у блоці тексту, який означає кінець одного абзацу та початок іншого. Часто відстань між двома абзацами по вертикалі більша, ніж між рядками тексту всередині абзацу.

Розриви абзаців часто прописуються в HTML як теги як заміна жорсткого "Enter" на клавіатурі (примітка. жорсткий "Enter" - це клавіша Enter, при натисканні якої відбувається розрив абзаців).

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

Висновок

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