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

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

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

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

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

1. Що означає «веб-шрифти»?

Сервіси, на зразок FontDeck спрощують завантаження великої кількості шрифтів.

Введення в основи друкарні

Раніше вважалося, що якщо ви хочете щоб ваші шрифти вірно відображалися на будь-якому комп’ютері, необхідно дотримуватися використання жменьки типових шрифтів, загальних для всіх комп’ютерів і веб-браузерів. Ваш вибір був обмежений шрифтами Helvetica (або Arial на PC), Georgia, Times, Verdana або кількома версіями Courier. Ах так, трохи не забув Comic Sans!

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

Але, завдяки таких сервісів, як покращення якості її роботи, Google Web Fonts і FontDeck, кілька років тому все кардинально змінилося.

Вперше, веб-дизайнерам стало доступно все різноманіття шрифтів і веб-дизайн ступив на нову сходинку у своєму розвитку.

Введення в основи друкарні

Але як правильно вибрати шрифт із звалилося на голову різноманітності? Ось деякі орієнтири і правила…

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

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

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

2. Поняття «leading», «tracking» і «kerning»

Введення в основи друкарні

Поняття «leading» пов’язане з напрямними горизонтальними лініями, щодо яких розташовується текст, і йде ще з тих часів, коли текст друкувався за допомогою друкарських пресів.

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

Ці можливості, крім усього іншого, включають в себе управління параметрами «leading» (відстань між лініями), «tracking» (простір між групами символів або слів) і «kerning» (простір між будь-якими двома певними символами).

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

У веб-дизайні, передбачені інструменти для управління параметрами «tracking» і «leading», а ось «kerning» налаштувати безпосередньо через CSS не можна. Щоб задати «leading», використовуйте CSS властивість line-height.

Для завдання «tracking», використовуйте властивість letter-spacing. Також, ви можете відредагувати значення простору між словами, використовуючи властивість word-spacing, що дозволяє зробити текст більш «повітряним» без збільшення значення «tracking» до критичних величин.

Використання тега

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

Як і у випадку з kerning, правила роботи з leading і tracking з друкованої друкарні, майже повністю застосовні для веб-друкарні. Подумайте також над використанням сітки для вирівнювання базових ліній ваших шрифтів, щоб надати їм чіткість і поліпшити візуальне сприйняття дизайну.

3. Ширина колонок

Введення в основи друкарні

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

Ширина колонки може дуже сильно вплинути на її читання. У друкованій друкарні, стовпці зазвичай встановлюються шириною від 45 до 75 символів (що відповідає приблизно значенням від 9 до 15 слів). Це ширина вважається ідеальною, дозволяючи читачеві легко переміщувати погляд з рядка на рядок без втрати уваги.

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

4. Вирівнювання в друкарні

Введення в основи друкарні

Цей текст має рівну кордон зліва і рвану праворуч. Також як і в друкованій, в веб-друкарні ви можете задати для вашого тексту як дірявий кордон праворуч, так і рівну. Використовуючи властивість text-align, можна вибрати значення left для установки рваною правої межі і значення right, для рваною лівої. Значення justify дасть можливість вирівняти текст з обох сторін з рівним кордонів.

У CSS3 також з’явилося нове властивість — text-justify, яке дозволяє більш точно контролювати заповнення рядка вирівняним текстом. На жаль, підтримка даного властивості браузерами на поточний момент ще залишає бажати кращого.

Переклад статті «Get started with web друкарня» був підготовлений дружною командою проекту Сайтостроение від А до Я.