У цій статті ми обговоримо базові концепції і термінологію, що стосується веб-друкарні, включаючи її відмінності від друкованої друкарні, як то кажуть «на пальцях».
Друкарня це мистецтво упорядкування символів в розбірливий, естетичний і відповідний стандартам вид. В друкованих продуктах читач не може змінити цей вид після того, як текст одного разу був надрукований.
Однак, в мережі інтернет справа йде зовсім не так, і користувач може збільшувати / зменшувати стандартний розмір шрифтів. якими набраний текст, змінюючи встановлені дизайнером настройки, або, наприклад, змінювати колір тексту, щоб зробити його більш контрастним. Виходячи з цього, можна подумати, що ефективна друкарня в середовищі інтернету неможлива.
Навпаки, вона можлива, і навіть більше того - у багатьох випадках, можливості пропоновані інтернетом перевершують можливості традиційної друкарні! І не тому, що у веб-дизайнера є більш просунуті засоби по управлінню параметрами тексту і його позиціонуванням, але через те, що користувачі інтернету мають можливість налаштувати параметри відображення шрифтів «під себе».
Це, зрозуміло, не означає, що ви, як дизайнер, можете забути про свої обов'язки щодо ефективного та естетичному поданням і позиціонуванню тексту - більшість правил традиційної друкарні застосовні також і в інтернеті. Але в рамках даної статті ми розберемо специфіку веб-друкарні (в порівнянні з традиційною друкованої).
1. Що означає «веб-шрифти»?
Сервіси, на зразок FontDeck спрощують скачування великої кількості шрифтів.
Раніше вважалося, що якщо ви хочете щоб ваші шрифти вірно відображалися на будь-якому комп'ютері, то необхідно дотримуватися використання жменьки типових шрифтів, загальних для всіх комп'ютерів і браузерів. Ваш вибір був обмежений шрифтами Helvetica (або Arial на PC), Georgia, Times, Verdana або декількома версіями Courier. Ах так, мало не забув Comic Sans!
Цей дуже обмежений набір шрифтів, привів до одноманітності і схожості всіх сайтів в інтернеті, позбавляючи веб-дизайнерів можливості вибирати з широкого спектру доступних накреслень тексту.
Але, завдяки таким сервісам, як Typekit. 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-властивості для управління величиною кернинга. Використовуйте цей прийом помірно, тому що при частому використанні ви будете витрачати на це дуже багато дорогоцінного часу і сил!
3. Ширина колонок
Правилом хорошого тону при завданні ширини колонки є обмеження в 80 символів. Тобто якщо стовпець ширше цієї величини, то він буде сприйматися вже не настільки добре.
Ширина колонки може дуже сильно вплинути на її читаність. У друкованій друкарні, стовпці зазвичай встановлюються шириною від 45 до 75 символів (що відповідає приблизно значенням від 9 до 15 слів). Це ширина вважається ідеальною, дозволяючи читачеві легко переміщати погляд з рядка на рядок без втрати уваги.
Такі ж загальні правила застосовні і для веб-сайтів, тому встановлюйте ширину колонок не більше 80 символів. Ширину колонок можна встановлювати в одиницях em. для чого потрібно використовувати такий CSS-код: width: 80em;
4. Вирівнювання в друкарні
Цей текст має рівну кордон зліва і рвану справа. Також як і в друкованій, в веб-друкарні ви можете задати для вашого тексту як рвану кордон праворуч, так і рівну. Використовуючи властивість text-align. можна вибрати значення left для установки рваною правої межі і значення right. для рваною лівої. Значення justify дасть можливість вирівняти текст по обидва боки по рівних кордонів.
В CSS3 також з'явилося нове властивість - text-justify. яке дозволяє більш точно контролювати заповнення рядка вирівняним текстом. На жаль, підтримка даної властивості браузерами на поточний момент ще залишає бажати кращого.
Переклад статті «Get started with web typography» був підготовлений дружною командою проекту Сайтобудування від А до Я.