Основи типографіки - які потрібно знати дизайнеру

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

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

Якщо вже прочитали попередню тему, то переходимо до сьогоднішньої!

Розбираємось в основах друкарні

Друкарня - це система оформлення друкованого (або веб) видання в цілому, а також його окремих елементів.

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

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

Вирівнювання тексту

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

Тепер уявімо, що цей принцип ми застосовуємо у верстці сайту — розтягуємо текст по ширині та використовуємо переноси. Проблема в тому, що на різних екранах ширина різна текст переноситься скрізь по-різному. Більше того, переноси слів по тексту на екранах, що не відповідають, будуть виглядати якось так: «Якупивтелефон умагазиніелектроніки Electron». А якщо ви раптом вирішите змінити розмір шрифту, вся ваша верстка взагалі попливе.

Саме тому в Інтернеті прийнято використовувати вирівнюванняпо лівому краю та не переносити слова. Для кращого розуміння, як це виглядає, подивіться на скріншот:

Пунктуація

Для початку варто розібратися з лапками.

У російській мові прийнято використовувати звані «ялинки»: «__». А в англійській - "лапки": "__".

Але якщо використовуються лапки другого рівня (лапки в лапках), то для російської мови застосовуються «лапки»:„__”, а англійської — одиночні лапки: '__'.

Розглянемо на прикладах:

Нерідко плутанина виникає з дефісом, мінусом, коротким та звичайним тире.

Запам'ятайте, це різні знаки:

• - Дефіс
• − мінус
• − коротке тире
• — тире

Тут є дві основні проблеми:

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

За великим рахунком, робота з пунктуацією — це завдання саме копірайтера. Але нерідко різного роду косяки доводиться виправляти дизайнеру.

Типи читання

Існує два типи читання – лінійне та інформаційне. І між ними є чимала різниця.

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

Як це працює на практиці?

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

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

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

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

Як визначити хороший шрифт

Буває так, що ви бачите в інтернеті якийсь шрифт і він здається вам просто відмінним. Вирішуєте використовувати його у своєму дизайні, але раптово помічаєте купу нюансів. Наприклад, цифра «1», велика «I» і рядкова «L» виглядають однаково. Інтуїтивно читач зрозуміє, де та що знаходиться. Але це все одно змусить його «спотикатися» під час читання та викличе дискомфорт.

Згадайте, скільки разів ви вводили капчу і не могли зрозуміти, чи це буква «О» чи нуль, буква «i» чи одиниця, «А» чи «Д»? Напевно, подібні ситуації траплялися не раз. Це дратує і завдає багато зайвого дискомфорту, якого можна було б уникнути, вибери дизайнер більш читабельний і легкий для сприйняття шрифт.

Просто подивіться на два приклади, як виглядають у різних шрифтах «1», велика «I» і мала «L»:

Шрифт Verdana

Шрифт Gill Sans

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

Існує ще одне правило: використовувати шрифтові пари — шрифт із засічками для заголовків та шрифт без засічок — для основного тексту.

Насправді це правило не є обов'язковим до виконання. Якщо подивіться наш приклад вище, то побачите, що й у заголовків, й у основного тексту ми використовуємо шрифт без засічок. Це IBM Plex Sans - добре читається і простий для сприйняття.

До речі, хочемо поділитися з вами таблицею поєднання шрифтів:

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

У нашому випадку:

font-family: IBM Plex Sans, Arial, serif

Це означає, що спочатку браузер намагатиметься завантажити на сторінці саме шрифт IBM Plex Sans. Якщо йому це не вдасться (зламаний код, не підключений шрифт або він не підтримується), браузер застосує Arial. А якщо і Arial не спрацює, то застосовується дефолтний браузерний шрифт без засічок Serif. Якщо вказати sans-serif, використовуватиме шрифт із засічками.

Важливо! У різних операційних системах дефолтні шрифти різняться. Тому якщо ви не поставите шрифт, не дивуйтеся, якщо в браузерах на Windows і на macOS побачите зовсім різні шрифти.

Якщо у вас немає часу або немає необхідності підбирати шрифти для сайту, можете використовувати класичні трендові варіанти - не помилитеся:

• Bodoni
• Meta
• Headline News
• Futura
• Google Product Sans
• San Francisco
• IBM Plex
• Druk

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

Сайти, сервіси та блоги по друкарні

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

• Google Fonts - Величезна база безкоштовних шрифтів від Google, понад 900.
• WhatFont - браузерне розширення, за допомогою якого можна легко дізнатися, який шрифт використовується на сторінці.
• Paratype - Зручний сайт, де можна знайти аналоги обраного шрифту. Сотні прикладів, зручно розміщених у алфавітному порядку.
• Readymag - Справжня енциклопедія для дизайнера, в тому числі присвячена роботі зі шрифтами (англійська мова).
• Colour Contrast Checker - Веб-сервіс для перевірки рівня контрасту тексту та фону за стандартом WCAG. Сервіс також доступний у вигляді розширення для Chrome.
• Fonts In Use - сайт із величезною кількістю прикладів використання шрифтів на плакатах, вивісках, листівках, веб-сторінках тощо. Відмінне джерело натхнення.

Якщо ви володієте англійською, можемо порекомендувати деякі журнали, присвячені дизайну:Eye, Net magazine, Slanted, Communication Arts та Offscreen Magazine. Ці журнали все ще друкуються та доступні до замовлення, але безліч корисної інформації та статей можна знайти на їхніх сайтах

І ще дещо…

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

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