Типографія: декілька десятків основних термінів, без яких НУ НІЯК (ТУТОРІАЛ)

DesignTalk.club продовжує розповідати цікаві штуки про основи типографії, цього разу ми поговоримо про основні терміни, які дуже важливо знати та розрізняти.

Попередня частина туторіала –  цо таке типографія і чому про неї варто знати?

Гарнітура (typeface) проти шрифту (font)

Якщо ви думали, що ці два слова взаємозамінні, ви не самотні. Але вони насправді означають два різні поняття.

Типограф, Нік Шерман, колись використовували чудову аналогію, щоб пояснити відмінності між термінами “гарнітура” і “шрифт”. Він припустив, порівнюючи ці терміни типографії з музичними термінами “пісня” і “mp3.” Коли ви висловлюєтеся, як вам подобається певний мотив, ви кажете: “Я люблю цю пісню!”, ви б не сказати: “Я люблю це mp3!”, пісня є твором мистецтва, в той час як mp3 файл – тільки механізм доставки.

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

Якщо ви описуєте фізичне втілення колекції букв і символів, ви повинні використовувати термін “шрифт”. Він стосується до того, що ви використовуєте – чи то файл на вашому комп'ютері, чи то коробка повна металевих букв. Це реальне відображення цієї колекції букв і символів. Наприклад, Helvetica Bold і Helvetica Light Oblique – .

Ось як ви можете використовувати ці два терміни в реченні:

“Ого. Гарнітура, яку ви вибрали дійсно тримає цей дизайн купи”.

“Я зміню розмір шрифту на 12-тий, щоб він вліз у даний розмір.”

Анатомія гарнітури (typeface)

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

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

Наприклад, давайте візьмемо слово “Faulty” (“помилковий”), як це показано на малюнку:

faulty

Пояснення термінів

Baseline (Базова лінія): Лінія, на якій розсташовані літери.

Cap height (Висота заголовної літери): Відстань від базової лінії до верхньої частини літери.

X-height (X-висота): висота тіла малої літери. (В даному випадку, це літери “а”, “u”, і “у”).

Bowl (Овал): Вигнута частина літери, що покриває круглі або вигнуті частини деяких букв (у даному випадку, це та округла форма, що стирчить з букви “a”.)

Serif (Засічка): Незначна проекція, що закінчує штрих літери в деяких гарнітурах. (У даному випадку, це маленька ніжка, що стирчить з букви “l”.)

Descender (нижній винісний елемент): Найдовша точка літер, яке виходить за базовою лінії.

Тепер давайте подивимося на слово “flash” (блискавка):

flash-1

Ligature (Лігатура): Штрих, який з'єднує сусідні літери. (В цьому випадку, ви помітите “F” і “L” злиті разом, щоб сформувати один символ.)

Stem (Головний штрих, Штамб): Підставка літери, схожа на стебло квітки.

Spine (Спина): звивисте тіло літери “S” – і тільки цієї літери. Поняття було виокремлено в окремий темрін, бо спина може бути майже вертикальною або горизонтальною, в залежності від гарнітури.

Ascender (Верхня винісна частина): частина літери, яка виходить вище середньої лінії шрифту, тобто вище Х–висоти шрифту. (В цьому випадку, ви також помітите букву “Н” насправді вище, ніж х висота).

Ви все ще тут? Лишилося вже не багато. Давайте подивимося на слово “Beef” (яловичина):

beef

Ось, що означають ці терміни:

Cross bar (Перекладина): Лінія, що проходить по внутрішній стороні літери і з'єднує одну сторону з іншою. (В даному випадку, це перекладина всередині літери “B”)

Counter (Лічильник): Вільний простір у середині букв, таких як “B”, “O”.

Finial (кінцевий елемент): кінець літер, таких як “е” або “с”, закінчення штриху без засічки.

Термінал (темінал): тип кривої, який ви бачите у верхній частині літери “F” або в кінці літери “J”.

Гарна а. Тепер, коли ви знаєте анатомію літер, давайте перейдемо до умов, пов'язаних з відстанями: кернинг, трекінг, інтерліньяж та ієрархія.

Кернинг (Kerning)

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

kerning

Тут я використав Franklin Gothic Medium, щоб продемонструвати природний простір, який ви бачите між двома буквами T. Це виглядає трохи занадто стислим, чи не так? Змінюючи відстань між лише цими двома літерами, ви будете мати можливість підвищити читабельність.

Трекінг (Tracking)

Подібно до кернингу, трекінг пов'язаний із модифікацією відстані між літерами. Проте, замість того, щоб регулювати відстань між всього двома буквами, трекінг відповідає за відстані між усіма літерами усього слова. Дивіться нижче на різницю:

tracking-1

Для цього прикладу, я вирішив зробити максимально широке налаштування трекінгу. Як правило, ви захочете застосувати трекінг невеликими порціями, щоб не викликати проблем читання.

Інтерліньяж (leading)

Простими словами – це відстань між рядками.

leading-example

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

Ієрархія (Hierarchy)

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

Ось приклад того, як виглядає ієрархія:

hierarchy-2

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

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

ДУЖЕ РАДИМО ПОЧИТАТИ:

Класний експеримент: відомі логотипи передизайнили як шрифти

Найкращі безкоштовні графіті-шрифти (Частина 4)

Кращі безкоштовні шрифти від дизайнерів з Behance: перші 6

One comment

  1. kateryna

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

Залишити відповідь