() translation by (you can also view the original English article)
Якщо ви вивчаєте веб-дизайн з нуля і хочете істотно поліпшити вашу типографіку, цей пост для вас. Ми розглянемо гарнітури, анатомію типографіки, ієрархію, і способи підбору шрифтів. Ви дізнаєтеся досить, щоб стати фахівцем в питаннях оформлення тексту під веб.
Теми
В ході цього довгого уроку ми розглянемо різні теми, включаючи:
- Знамениті 95%
- Гарнітури і шрифти
- Типографічна класифікація
- Анатомія типографіки
- Інтервали
- Пунктуація
- Ієрархія
- Вибір гарнітур
Знамениті 95%
Веб-дизайн на 95% складається з типографіки! Без тексту немає веб-дизайну. Так чому б не поліпшити свої здібності саме за рахунок сильної типографіки? Вам відкриється величезний буквений світ - світ, який передавався з покоління в покоління креативними людьми, які працюють з графікою і друкованим дизайном. Ще одна приголомшлива кроляча нора, в яку можна пірнути.
На ранніх порах веб-дизайн намагався слідувати ідеям графічного дизайну, особливо це було видно в веб-версіях книг, журналів і газет. Зараз дизайн під веб сильно розвинувся, і більше не слід цим концептів так, як раніше. Адаптивний веб-дизайн - один із прикладів очевидного дорослішання поза рамками друкованого світу. Зворотною стороною стала сильно зросла складність - і вона постійно збільшується. Я не намагаюся вас налякати, бо це є дуже цікава ніша, можливості якої постійно зростають. Веб виріс - і досить суттєво - і майбутнє виглядає багатообіцяюче!
Комунікація
Текст більш ефективний, ніж все інше, для подачі інформації в інтернеті. Звичайно, графіка може його підтримувати і доповнювати, як і іконки, але комунікація з вашими користувачами здійснюється, в основному, через письмовий текст - на відміну від світу реклами, де зображення і графіка можуть передати весь посил набагато простіше, навіть без використання писемної мови.
У світі Інтернету ми говоримо про сторінки, вебсайти і найбільше про інтерфейси. І тут робити упор на графічні елементи досить складно, як показав досвід, часто неефективно, двозначно і незручно для масового ринку.
Цей приклад з Dropbox показує, що графіка сама по собі не надає такий же рівень комунікації, і дуже двозначно висловлює сенс без текстових пояснень.
Гарнітура і шрифт
«Гарнітури» - це колекції букв, чисел і знаків пунктуації, які формують набори стилів алфавіту. Розглядайте гарнітури як сімейство шрифтів, у яких є спільні дизайн-рішення, але які можуть відрізнятися жирністю і стилями. Bodoni або Gotham, наприклад, - це гарнітури.
Ви створюєте гарнітури.
«Шрифти» розглядаються як добірки елементів гарнітури. Це фізичні (або цифрові) набори символів якийсь гарнітури в конкретної насиченості і стилі. Open Sans Light - це шрифт, файл, який ви використовуєте в своїй системі.
Ви можете створити шрифт.
Типографічна класифікація
Атрибутів для класифікації гарнітур набагато більше, ніж ви можете уявити. Давайте вивчимо кілька класифікацій, які вам точно потрібно знати.
гарнітури Serif
Гарнітури Serif названі, виходячи з невеликих доповнень, декоративних деталей в контурах букв. Саме слово «serif» означає насічки.
Гарнітури Serif - найстаріші гарнітури з обговорюваних в цьому пості. Ця наука далека від точної, але аргументи на користь цього твердження сягають своїм корінням до стародавніх римлян, які висікали літери на каменях, використовуючи латинський алфавіт. Є також цікава теорія про те, що ця гарнітура з'явилася в результаті використання різців при різьбі по каменю для більш художнього вигляду тексту.
Засічки часто використовують для великих фрагментів тексту, наприклад, тіла листи або сторінки. Докази їх легкочітаемості недостатні, але завжди є конкретний аргумент. Вони відмінно працюють в класичному, олдскульному середовищі, а при вмілому користуванні не менше хороші і в сучасних дизайнах.
Засічки тим не менш є відмінним вибором для заголовків. Заголовки, що використовуються в The Washington Post - чудовий тому приклад: тут засічки надають певний стиль традицій і якості, а основний текст в sans-serif надає статтями сучасний вигляд, при цьому залишаючись відмінно читабельним.
Гарнітури Sans Serif
У гарнітурах «Sans-serif немає засічок (Serif).
Популярність Sans serif-ів зросла в 1920-х роках. Вони виглядали сучасно, індустріально і машинно; ідеально для сфери реклами і руху «ар деко» того часу.
Гарнітури Semi Serif
Гарнітури «Semi serif» об'єднують характеристики гарнітур serif і sans serif.
Гарнітури Slab Serif
Гарнітури Slab serif "схожі на звичайні serif-и, але вони не дуже товсті й краще привертають увагу за своєю природою.
У минулому вони часто використовувалися в друкарських машинках для отримання достатнього контрасту на сторінках тексту. Перший час на друкарських машинках було досить складно друкувати текст рівномірно по сторінці; це залежало від сили натискань, свіжості чорнила і т. д. Більш тонкий serif був менш ефективний для машинного набору. Рання індустрія реклами також потребувала чимось приваблює увагу, саме цим обумовлено активне використання slab-ів.
Гарнітури Script
Гарнітури «Script» часто схожі на вигляд листа від руки, імітуючи різну товщину і щільність. Їх поява більш неформально і випадково, вони дають відчуття чогось особистого, написаного від руки. Script-и часто дуже декоративні і рідко використовуються для довгих абзаців тексту (сподіваюся).
Гарнітури Monospace
Сама назва цих гарнітур каже, що кожна буква або знак пунктуації типу «monospace» займає одну і ту ж горизонтальну ширину. Інші гарнітури, які ми вже розглянули, мають у своєму розпорядженні символами різної ширини; це пропорційні гарнітури.
Друкарські машинки, ранні комп'ютери і термінали активно використовували гарнітури monospace. Апаратура тих часів технічно не підтримувала змінні ширини символів. Сьогоднішні текстові редактори для кодинга досі за замовчуванням пропонують використовувати шрифти monospace. Нічого не говорить «хакер» так явно, як код, написанний в monospace. В останні кілька років ці гарнітури також стали популярні серед дизайнерів.
Типографічна анатомія
Тепер разглянемо декілька найважливіших анатомічних особливостей шрифтів.
Ми не будемо сильно паритися через дрібниці, ваше завдання як дизайнера - креативити з самими гарнітурами, а не вивчити кожну крихітну деталь, з яких вони складаються. Головне для вас як для дизайнера примусити гарнітури працювати. Моя порада проста: потрібно зрозуміти і запам'ятати основи, поекспериментувати з різними гарнітурами і увібрати це все в процесі в свої навички. Немає нічого поганого в незнанні кожної дрібної деталі шрифтової анатомії! З іншого боку, можливо, я занадто прагматичний на цей рахунок. Вирішувати вам! З іншого боку, можливо, я занадто прагматичний на цей рахунок. Вирішувати вам!
Базова лінія (Baseline)
Базова лінія - це лінія, над якою розташована більшість символів.
Медіана (Median)
Медиана, с другой стороны, это «потолок» для большинства строчных букв.
X-висота (X-Height)
Відстань між базовою лінією і медіаною називається х-висотою. Вона дорівнює висоті малої літери «х», звідси і її назва. Чим більше х-висота в гарнітурі, тим більше читабельна буде вона в дрібних розмірах. Велика частина тексту, який ми читаємо в західному світі, складається з малих літер, і x-висота дуже впливає на читабельність.Більше простору дає шрифту трохи більше можливостей своїм буквах виділятися.
Тому велика x-висота краще для основного тексту, тому що довгі абзаци можуть бути нудними для очей. Люди читають стрибкоподібно, і поглинають букви швидко і несвідомо. Тому велика x-висота краще для основного тексту, тому що довгі абзаци можуть бути нудними для очей. Розділи, як заголовки, де зазвичай ви будете використовувати великі розміри шрифтів і більш короткий текст, можуть мати гарний вигляд і з меншою x-висотою. Тут у вас більше варіантів художнього вибору без істотного погіршення читабельності.
Верхній і нижній виносні елементи
Верхній виносний елемент - це частина, яка розтягується над медіаною, а нижній виносної елемент - це частина символу, яка виступає нижче базової лінії:
Внутрішні просвіти
Внутрішні просвіти букв - це області, частково або повністю замкнуті усередині букви. Наприклад, в буквах «о» або «а» є такі просвіти. У «а», наприклад, є два просвіту: один частковий, а другий - повністю замкнутий. Гарнітури з більшими внутрібуквеннимі прорізами зазвичай хороші в плані читабельності, тому що є більше місця для деталізації символів. Тому вибирайте з гарнітур з великими х-висотами і великими внутрібуквеннимі прорізами, якщо ви хочете надати користувачам комфортне читання.
Інтервали
Давайте вивчимо різні види інтервалів, з якими доводиться стикатися в типографике.
Висота рядка (Line Height)
Висота рядка - це простір між двома послідовними базовими лініями. У друку дуже важливо створювати постійний вертикальний ритм - базову сітку - міні-систему розмітки для тексту на сторінці. У вебі надзвичайно складно домогтися такої точності.
Базова сітка (Baseline Grid)
Адаптивний простір ще менше розташовує до застосування базових сіток, так що краще інвестувати свій час в більш прагматичні рішення.
Хороша висота рядка для абзаців у вебі зазвичай десь між 1.3 і 1.6 (пропорційно до розміру шрифту). Заголовки повинні бути трохи тісніше. Варто також пам'ятати, що читачі повинні мати можливість легко перестрибувати на початок наступного рядка. Ви ж не хочете надати вашим користувачам зайве ментальне навантаженням, щоб їм довелося уважно вишукувати, звідки ж продовжити читання, коли вони дійдуть до кінця рядка.
Різні висоти рядків також можуть (дивним чином) впливати на колір вашого тексту. Більш стислі строки виглядають темніше, так як мікро-простору білого між рядками тексту скорочується - і навпаки, звичайно ж. Пошук балансу, при якому текст виглядає розбірливо, читабельно і неналяпісто - ось ваша мета при налаштуванні цього інтервалу. Прочитайте текст, причому використовуйте справжній фрагмент, а не lorem ipsum, щоб протестувати, як він виглядає і читається. Вам зручно його читати? Ось це питання має бути у вас в голові - завжди!
Довжина рядка / формат
Обидва ці терміни означають одне і те ж: кількість символів в одному рядку тексту. Гарна довжина рядка для веб-дизайнів - 60-85 символів. Довжина рядка і висота рядка - це симбіотичні, що залежать один від одного поняття. Чим більше довжина рядка в абзаці, тим вище повинна бути висота рядка.
Якщо виглядає занадто стисло або занадто розтягнута, налаштовуйте до тих пір, поки не стане читабельно і красиво.
Kернинг (kerning)
Кернинг - це настройка мікро-просвітів між окремими буквами. Підбір відбувається по-різному для кожного дизайну, спираючись на потреби кожної літери. Рядкова «о» займе менше місця, ніж рядкова «t», наприклад. У веб-дизайні кернинг дуже складно налаштовувати, хоча в друкованої індустрії ця практика дуже поширена.
У вебі можливо застосувати кернінг, спираючись на дані, закопані в самі шрифти. Ця опція підключається за допомогою текстового рендеринга 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% вашого дизайну. Якщо у вас погана ієрархія в тексті, навряд чи у вас вийде якісна ієрархія всього дизайну.
Типографіка дає безліч способів надати користувачам візуальні якоря для навігації по сайту так, як ви того хочете. Через акценти ви можете дати їм зрозуміти, що найважливіше, і на що їм варто звернути увагу. Ось кілька способів посилити вашу роботу в цьому аспекті:
Колір
Якщо у вас не надто багато кольору на сторінці, яскраво забарвлені елементи будуть дуже виділятися. Як завжди, чим менше, тим краще. Так як в прикладах нижче кольори використовуються грамотно, створюється дуже сильний ефект - навіть без збільшення розміру або додаткового інтервалу.
Розмір
Збільшений відносний розмір шрифту завжди буде привертати увагу до конкретних елементів. Що мені подобається в варіюванні розмірів шрифту, - це те, що ви можете легко створювати візуальні «якоря», щоб користувач краще пересувався по сторінці. Єдиний нюанс: обов'язково дотримуйтесь сталісті у використанні розмірів шрифту для конкретних елементів. Ви не можете змінювати його за бажанням тут і там. Це, швидше за все, послабить ваші дизайни набагато відчутніше, ніж, якби ви використовували однорозмірних текст.
Негативний простір
Дайте важливим типографським елементам простір для життя. Якщо вони оточені порожнім простором, вони вже тепер їм виділені. Новачки соромляться використовувати велику відстань між елементами. У пресі це досить затратно, але в вебі ви не платите за місце. Експериментуйте, подивіться, як оформляють текст інші дизайнери, і з нагоди крадіть чужі ідеї. Це не магія і не ракетобудування. Вам потрібно всього лише трохи досвіду - і скоро ви почнете правильно відчувати простір.
Товщина (Weight)
Велике сімейство гарнітур завжди має купу товщини на вибір. У багатьох прикладах, наведених вище, ви бачили різні варіанти насиченості під різні цілі. Для мене це не інструмент номер один, зазвичай спочатку я використовую інші інструменти для створення відступу. Але це справа смаку, що вам більше подобається використовувати в ваших дизайнах, то і використовуйте.
Скріншот
На цім скріншоті з сторінки Dropbox ви можете бачити, що насиченість тексту імен та посад різна. Дуже базова техніка для акцентування.
Курсив
Курсиви - це відмінний варіант для подачі другорядної інформації (або розстановки акцентів, звичайно). Приклад нижче відмінно демонструє цей ефект на відображенні адреси.
Чіткий контраст при поєднанні гарнітур
Коли ви вибираєте більше, ніж одну гарнітуру для своєї роботи (намагайтеся уникати використання більше двох), дуже важливо, щоб ці гарнітури самі по собі створювали певну ієрархію за рахунок свого контрасту. З одного боку, вони повинні легко відрізнятися один від одного, а з іншого боку - не бути занадто різними. Є кілька хороших правил для вибору гарнітур; і наступна глава якраз присвячена ім.
Врахуйте, що всі ці правила працюють, тільки якщо ви використовуєте їх постійно. Якщо цього не дотримуватися, ієрархія сильно погіршиться. Якщо все це є абсолютно новими для вас, то вам бажано спочтаку ознайомится з моєю статтею про принципи візуального дизайну. Тоді вам стане на багато легше сприймати інформацю.
Підбір гарнітур
У нас є маса гарнітур на вибір. До того ж, у нас є купа сервісів, які хочуть допомогти нам з цим вибором. У вас може піти деякий час на огляд всіх цих можливостей, і розуміння, що до чого. Але як на мене, це дуже корисно. Веб-типографіка пройшла довгий шлях, не тільки в плані екосистеми, але і в плані того, які можливості надають сучасні браузери.
Коли ви вирішуєте, які гарнітури використовувати, я б порадив спочатку врахувати читабельність і стиль, які ви хочете реалізувати в дизайні. Тон і посил дуже важливі, тому що текст має величезний вплив на це через різні характеристики. Якщо вам вдасться зробити все це, то дуже швидко ві почнете добре виділятися з нотовпу.
Поєднання гарнітур
Переконайтеся, що створюєте хороший контраст між обраними гарнітурами. Гарнітури, які виглядають занадто схожими, в результаті збивають з пантелику і негативно впливають на візуальну ієрархію. Великі сімейства гарнітур також дають перевагу у величезній кількості виборів в рамках однієї гарнітури. Ви можете використовувати всього одну гарнітуру, і при цьому дизайн ніколи не буде нудним.
Якщо ви хочете піти далі, то поєднання sans serif з serif - найкращий початок експериментів, і, до речі, найраціональніше. Воно може призвести до сильнішого і цікавого контрасту, який ви можете використовувати для своєї вигоди - стилістично.
Будьте тривалі в своєму виборі. Не потрібно перемикатися з гарнітури на гарнітуру для основного тексту і заголовків. Вирішіть, як краще для читабельності, і що краще підходить по стилю, краще привертає увагу читача, і дотримуйтесь цього.
Деякі дизайнери шрифтів створили варіації serif і sans serif однієї гарнітури. Вони повинні добре працювати в парі. Коли ваша гарнітура має відповідну собі пару, ви легко зможете домогтися потрібного контрасту.
Якщо ви парує дві гарнітури, завжди намагайтеся добитися чіткого контрасту між ними. Можливо, він буде слабкий, але, як мінімум, він повинен бути помітним - навіть при побіжному перегляді. Тому поєднання двох sans serif-ів або двох serif-ів може бути небезпечним.
У той час, як ви шукаєте візуальні відмінності, вам також слід вибирати такі пари, в яких простежується деяка спільність. Щось, що може зв'язати дві різні гарнітури воєдино. Їх візуальна структура, те, як промальовані їх літери. Однакові внутрібуквенні просвіти або накреслення літер. Це ще краще пов'язує їх в один набір. Схожа структура або геометричний дизайн допоможуть з цим.
При нагоді, крадіть! Коли ви знаходите комбінації, які вам подобаються, самі спробуйте їх використовувати і подивіться, що ви можете з ними зробити. Вивчення через імітацію роботи інших - цілком хороший метод.
Висновок
В типографіці не вистачає чітких законів, якими можна керуватися, приймаючи рішення. Для мене це плюс. У багатьох сенсах типографіка суб'єктивна, але читабельність повинна бути завжди в пріоритеті. Приймайте всі описані тут ідеї і поняття з часткою скептицизму, і сприймайте їх як початкові точки для власних креативних відкриттів.
Є маса можливостей для наповнення веб-простору кращою типографікою. Це такий прекрасний інструмент для поліпшення комунікації, це культурно безцінні знання, передані нам через багато поколінь наполегливої праці і відкриттів. Це просто фантастика, як ви можете впливати на письмову мову з її допомогою!
