Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography
Webdesign

Докладне керівництво по основам типографіки

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Ivan Gryaziev (you can also view the original English article)

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

Теми

В ході цього довгого уроку ми розглянемо різні теми, включаючи:

  • Знамениті 95%
  • Гарнітури і шрифти
  • Типографічна класифікація
  • Анатомія типографіки
  • Інтервали
  • Пунктуація 
  • Ієрархія
  • Вибір гарнітур

Знамениті 95%

Веб-дизайн на 95% складається з типографіки!  Без тексту немає веб-дизайну.  Так чому б не поліпшити свої здібності саме за рахунок сильної типографіки?  Вам відкриється величезний буквений світ - світ, який передавався з покоління в покоління креативними людьми, які працюють з графікою і друкованим дизайном.  Ще одна приголомшлива кроляча нора, в яку можна пірнути.

На ранніх порах веб-дизайн намагався слідувати ідеям графічного дизайну, особливо це було видно в веб-версіях книг, журналів і газет.  Зараз дизайн під веб сильно розвинувся, і більше не слід цим концептів так, як раніше.  Адаптивний веб-дизайн - один із прикладів очевидного дорослішання поза рамками друкованого світу.  Зворотною стороною стала сильно зросла складність - і вона постійно збільшується.  Я не намагаюся вас налякати, бо це є дуже цікава ніша, можливості якої постійно зростають.  Веб виріс - і досить суттєво - і майбутнє виглядає багатообіцяюче!

Комунікація

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

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

без тексту
Dropbox

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

Гарнітура і шрифт

«Гарнітури» - це колекції букв, чисел і знаків пунктуації, які формують набори стилів алфавіту.  Розглядайте гарнітури як сімейство шрифтів, у яких є спільні дизайн-рішення, але які можуть відрізнятися жирністю і стилями.  Bodoni або Gotham, наприклад, - це гарнітури.

Ви створюєте гарнітури.

Caslon
Gotham

«Шрифти» розглядаються як добірки елементів гарнітури. Це фізичні (або цифрові) набори символів якийсь гарнітури в конкретної насиченості і стилі.  Open Sans Light - це шрифт, файл, який ви використовуєте в своїй системі.

Ви можете створити шрифт.

Open Sans

Типографічна класифікація

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

гарнітури Serif

Гарнітури Serif названі, виходячи з невеликих доповнень, декоративних деталей в контурах букв. Саме слово «serif» означає насічки.

10 Remedial Design Pointers for Developers
З поста 10 лікувальних дизайн-ідей для розробників 

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

MailChimp
Latinotype
Pana

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

The New York Times
The New York Times

Засічки тим не менш є відмінним вибором для заголовків. Заголовки, що використовуються в The Washington Post - чудовий тому приклад: тут засічки надають певний стиль традицій і якості, а основний текст в sans-serif надає статтями сучасний вигляд, при цьому залишаючись відмінно читабельним.

The Washington Post

Гарнітури Sans Serif

У гарнітурах «Sans-serif немає засічок (Serif).

Project Soli

Популярність Sans serif-ів зросла в 1920-х роках.  Вони виглядали сучасно, індустріально і машинно; ідеально для сфери реклами і руху «ар деко» того часу.

Cool Hunting Omakase
Medium
Webflow

Гарнітури Semi Serif

Гарнітури «Semi serif» об'єднують характеристики гарнітур serif і sans serif.

Latinotype

Гарнітури Slab Serif 

Гарнітури Slab serif "схожі на звичайні serif-и, але вони не дуже товсті й краще привертають увагу за своєю природою.

Vitesse
Vitesse

У минулому вони часто використовувалися в друкарських машинках для отримання достатнього контрасту на сторінках тексту.  Перший час на друкарських машинках було досить складно друкувати текст рівномірно по сторінці; це залежало від сили натискань, свіжості чорнила і т. д. Більш тонкий serif був менш ефективний для машинного набору.  Рання індустрія реклами також потребувала чимось приваблює увагу, саме цим обумовлено активне використання slab-ів.

everywhere.is
Proday
Flowhub

Гарнітури Script

Гарнітури «Script» часто схожі на вигляд листа від руки, імітуючи різну товщину і щільність.  Їх поява більш неформально і випадково, вони дають відчуття чогось особистого, написаного від руки.  Script-и часто дуже декоративні і рідко використовуються для довгих абзаців тексту (сподіваюся).

Paravel
Foster Type
Femmebot

Гарнітури Monospace

Сама назва цих гарнітур каже, що кожна буква або знак пунктуації типу «monospace» займає одну і ту ж горизонтальну ширину.  Інші гарнітури, які ми вже розглянули, мають у своєму розпорядженні символами різної ширини; це пропорційні гарнітури.

Друкарські машинки, ранні комп'ютери і термінали активно використовували гарнітури monospace.  Апаратура тих часів технічно не підтримувала змінні ширини символів. Сьогоднішні текстові редактори для кодинга досі за замовчуванням пропонують використовувати шрифти monospace.  Нічого не говорить «хакер» так явно, як код, написанний в monospace.  В останні кілька років ці гарнітури також стали популярні серед дизайнерів.

The Next Century
CSSDA

Типографічна анатомія

Тепер разглянемо декілька найважливіших анатомічних особливостей шрифтів.

Ми не будемо сильно паритися через дрібниці, ваше завдання як дизайнера - креативити з самими гарнітурами, а не вивчити кожну крихітну деталь, з яких вони складаються. Головне для вас як для дизайнера примусити гарнітури працювати. Моя порада проста: потрібно зрозуміти і запам'ятати основи, поекспериментувати з різними гарнітурами і увібрати це все в процесі в свої навички. Немає нічого поганого в незнанні кожної дрібної деталі шрифтової анатомії! З іншого боку, можливо, я занадто прагматичний на цей рахунок. Вирішувати вам! З іншого боку, можливо, я занадто прагматичний на цей рахунок.  Вирішувати вам!

Базова лінія (Baseline)

Wikipedia

Базова лінія - це лінія, над якою розташована більшість символів.

Медіана (Median)

Wikipedia
Wikipedia

Медиана, с другой стороны, это «потолок» для большинства строчных букв.

X-висота (X-Height)

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

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

Верхній і нижній виносні елементи

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

The Anatomy of Web Typography
З Анатомії веб-типографіки

Внутрішні просвіти

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

Інтервали

Давайте вивчимо різні види інтервалів, з якими доводиться стикатися в типографике.

Висота рядка (Line Height)

Висота рядка - це простір між двома послідовними базовими лініями. У друку дуже важливо створювати постійний вертикальний ритм - базову сітку - міні-систему розмітки для тексту на сторінці. У вебі надзвичайно складно домогтися такої точності.

Базова сітка (Baseline Grid)

from My name is Mike
Від My name is Mike

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

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

Різні висоти рядків також можуть (дивним чином) впливати на колір вашого тексту.  Більш стислі строки виглядають темніше, так як мікро-простору білого між рядками тексту скорочується - і навпаки, звичайно ж.  Пошук балансу, при якому текст виглядає розбірливо, читабельно і неналяпісто - ось ваша мета при налаштуванні цього інтервалу. Прочитайте текст, причому використовуйте справжній фрагмент, а не lorem ipsum, щоб протестувати, як він виглядає і читається. Вам зручно його читати?  Ось це питання має бути у вас в голові - завжди!

Довжина рядка / формат

Обидва ці терміни означають одне і те ж: кількість символів в одному рядку тексту. Гарна довжина рядка для веб-дизайнів - 60-85 символів.  Довжина рядка і висота рядка - це симбіотичні, що залежать один від одного поняття.  Чим більше довжина рядка в абзаці, тим вище повинна бути висота рядка.

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

Kернинг (kerning)

Кернинг - це настройка мікро-просвітів між окремими буквами. Підбір відбувається по-різному для кожного дизайну, спираючись на потреби кожної літери. Рядкова «о» займе менше місця, ніж рядкова «t», наприклад. У веб-дизайні кернинг дуже складно налаштовувати, хоча в друкованої індустрії ця практика дуже поширена.

Wikipedia

У вебі можливо застосувати кернінг, спираючись на дані, закопані в самі шрифти.  Ця опція підключається за допомогою текстового рендеринга text-rendering або font-feature-settings параметрами шрифтів в CSS.  Пам'ятайте, що ці параметри підтримуються далеко не скрізь.

Міжбуквенна відстань 

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

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

Розділові знаки

Лапки

Використовуйте тільки справжні лапки.  Крапка!

Інші «лапки», які часто використовуються, це прямі лапки - їх потрібно застосовувати тільки для позначення дюймів і футів. Апострофи і одинарні лапки також мають свої еквіваленти.  Звичайно, доведеться поворожити пальцями, щоб відкопати їх на своїй клавіатурі, але кінцевий результат вартий витрачених сил. Тут про них докладніше:

Три крапки

Три крапки - це три точки, які можна легко переплутати з трьома окремими точками. Різниця в тому, що інтервал між одинарними точками більше. Ви можете використовувати більший інтервал праворуч і ліворуч, тут у вас свобода вибору.

Використовуйте його, коли хочете пропустити контент - слова, фрази, рядки, абзаци або частини цитат. Це плейсхолдер, який позначає, що ви приховали якийсь текст.

Дефіс

Дефіс не вимагає ніяких додаткових інтервалів. Головне його завдання - з'єднувати слова разом, як наприклад, «8-річний» або «якийсь» і т. Д.

Це ваш єдиний вибір для префіксів і суфіксів. Ви повинні завжди використовувати їх, якщо потрібно прописати слово по буквах: T-U-T-S-P-L-U-S. Інтервали часу і відстані - також частина його застосувань:

  • 03:45-04:00 p.m.
  • 1938-1945

Для цих інтервалів ви можете також скористатися коротким тире.

Коротке тире (en dash)

Коротке тире називається так через довжину малої літери «n».  Воно трохи довше, ніж дефіс, і використовується для діапазонів значень, а також для позначення зв'язків, наприклад, студент-учитель.  Або для розстановки акцентів.

Довге тире

Довге тире, яке в англійській мові називається «em dash», названо так на честь довжини великої літери «M». Довгі тире використовуються для акцентування паузи в думки або вказівки на незавершеність пропозиції. Обидва види тире можуть бути трохи тонше, ніж дефіс - так зазвичай і відбувається.  Будь ласка, не використовуйте два дефіса замість довгого або короткого тире. Жоден з двох видів тире не вимагає додаткового інтервалу спереду і ззаду.

Я знаю, ці деталі пунктуації не виглядають СУПЕРВАЖНО, але це базові знання щодо правильного використання розділових знаків важливі, якщо ви хочете створювати дизайни з якісною типографікою. Можливо, три типи тире здадуться вам трохи тривіальними, так як виглядають вони дуже схоже, але, з іншого боку, ці правила існують роками, і ми повинні поважати роботу дизайнерів, які працювали до нас.  Саме їх робота і новаторство дозволяють так легко створювати дизайни сьогодні.  Приділити увагу подібним деталям - це маленька плата, данина поваги ім.

Ієрархія

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

Trent Walton
Typologic

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

Колір

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

Paravel
Dropbox

Розмір

Збільшений відносний розмір шрифту завжди буде привертати увагу до конкретних елементів. Що мені подобається в варіюванні розмірів шрифту, - це те, що ви можете легко створювати візуальні «якоря», щоб користувач краще пересувався по сторінці. Єдиний нюанс: обов'язково дотримуйтесь сталісті у використанні розмірів шрифту для конкретних елементів. Ви не можете змінювати його за бажанням тут і там. Це, швидше за все, послабить ваші дизайни набагато відчутніше, ніж, якби ви використовували однорозмірних текст.

Typeterrance
Dropbox

Негативний простір

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

CSS Zen Garden
Трент Уолтон

Товщина (Weight)

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

Latinotype

Скріншот

Dropbox

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

Курсив

Курсиви - це відмінний варіант для подачі другорядної інформації (або розстановки акцентів, звичайно). Приклад нижче відмінно демонструє цей ефект на відображенні адреси.

The Type Directors Club

Чіткий контраст при поєднанні гарнітур

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

Трент Уолтон
Stuntbox
Jason Santa Maria
Jason Santa Maria

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

Підбір гарнітур

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

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

Поєднання гарнітур

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

Kitchen Sink Studios

Якщо ви хочете піти далі, то поєднання sans serif з serif - найкращий початок експериментів, і, до речі, найраціональніше. Воно може призвести до сильнішого і цікавого контрасту, який ви можете використовувати для своєї вигоди - стилістично.


Hanson Wu

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

Ben Goodyear

Деякі дизайнери шрифтів створили варіації serif і sans serif однієї гарнітури. Вони повинні добре працювати в парі. Коли ваша гарнітура має відповідну собі пару, ви легко зможете домогтися потрібного контрасту.

adayinbigdata.com

Якщо ви парує дві гарнітури, завжди намагайтеся добитися чіткого контрасту між ними.  Можливо, він буде слабкий, але, як мінімум, він повинен бути помітним - навіть при побіжному перегляді. Тому поєднання двох sans serif-ів або двох serif-ів може бути небезпечним.

Exposure

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

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

Висновок

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.