Друкарня на Вебі пройшла довгий шлях з тих пір як Тім Бернерс-Лі натиснув на рубильник в 1991-му році. Давним-давно, за часів IE 1.0, вираз «хороша друкарня на Вебі» був, швидше, оксюмороном (поєднанням протилежних за значенням слів). Багато що встигло змінитися. У нас є не тільки браузери, які вміють показувати картинки (ах!); у нас є можливість оживляти наші веб-сторінки, використовуючи чудову друкарню.
По-перше, слід зауважити, що Друкарня - це не тільки вміння вибрати шрифт або відрізнити одну гарнітуру від іншої. Як показали останні експерименти, дресовані мавпи безпомилково розпізнають Гельветику в 90% випадків.
Спробуємо поговорити про друкарню як про рецепт з чотирьох найважливіших інгредієнтів. Якщо ви хоч раз пробували приготувати суфле, ви знаєте, наскільки важливий рецепт. Дотримуйтеся цього рецепту і ваша друкарня буде рости як на... втім, вистачить кулінарних метафор, давайте готувати.
Контраст
Блідо-рожевий текст на блідо-синьому тлі може вдало виглядати на вашій футболці, але читається він погано. Текст існує, щоб його читали, так що переконайтеся, що він досить добре контрастує з фоном. Якщо ви сумніваєтеся щодо контрасту, зробіть скріншот сторінки і в будь-якому графічному редакторі перетворите його на зображення з градаціями сірого (grayscale). Ви легко побачите, чи вистачає контрасту. Як пише Роберт Брінгхест, віртуозний типограф, друкарня існує, щоб виявляти повагу до вмісту. Чи ми дотримуємося цієї поради, проектуючи веб-сторінки так, що текст - сам вміст - важко прочитати?
Особисто мені не подобається читати довгі фрагменти інверсованого тексту (наприклад, світлий текст на темному тлі); чи часто ми бачимо, щоб так оформлялися книги? Такий підхід може бути дуже доречний для коротких уривків тексту, але мені здається, що читати подібний текст дуже важко навіть менше хвилини.
Розмір
З народженням Веб 2.0 я помітив досить дратівливий тренд: дрібний шрифт. Я навіть писав творцям сайтів і доброзичливо пропонував їм збільшити розмір шрифту за замовчуванням. Я отримував різні відповіді - від «мужик, купи окуляри» до вдячних «спасибі, я навіть ніколи не замислювався, що шрифт у мене на сайті може бути занадто дрібним для читачів». Я навіть чув наступний аргумент на захист крихітного тексту: «він відповідає моєму мінімалістичному дизайну». Куди ймовірніше, що він відображає маленьке дещо інше. Якщо Супермен і Зоркий сокіл - не єдині ваші читачі, то маленький шрифт просто не підходить.
Не робіть основний текст менше, ніж 12 px; якщо можливо - збільшуйте його. Пам'ятайте: те, що виглядає розбірливо на 65 «» HD плазмі, може виглядати не так добре на ноутбуці з екраном в 13 «». Якщо у вас є сумніви - збільшуйте текст. На ILT розмір основного тексту дорівнює 16 px.
Ієрархія
Змінювати розмір шрифту - один з найкращих способів показувати різницю між вмістом різних типів. Кольори і симпатичні плашки можуть допомогти, але різний розмір шрифту, що систематично використовується на всіх сторінках, буде чітко і ясно повідомляти читачам значимість елементів сторінки відносно один одного. Поспішаючі читачі зможуть швидко вловити важливі фрагменти і, можливо, вони залишаться і продовжать читати далі.
Ієрархія може бути досягнута і іншими способами. Ми щойно згадали, як можна використовувати шрифти різного розміру; ми також можемо використовувати різні стилі: наприклад, заголовні літери для заголовків і курсив для підзаголовків. Можна досягти гарного ефекту, поєднуючи шрифти із засічками і без (serif і sans serif).
Простір
Дайте шрифту дихати. Не бійтеся залишати порожній простір на сторінках. Це вільне місце (white space) допоможе зосередитися на тексті - саме текст говорить найгучніше, так що нехай його почують. Далі, пам'ятайте про CSS властивості line-height; добре і перевірене правило - ставити інтервал між рядками як мінімум в 140% від розміру тексту (пам'ятайте, що я пишу про друкарню на Вебе). Хороші дизайнери шрифту вкладають неймовірні зусилля у створення дрібного (мікро) вільного місця, яке живе в самому шрифті. Вони проводять незліченні години, намагаючись досягти балансу між чорнотою шрифту і порожнім простором, який його оточує. Точно так само і ми повинні витратити час і обміркувати великий (макро) порожній простір - «порожнечі», які надають форму блокам тексту.
Ув'язнення
Пам'ятайте: це не правила, а рекомендації. Тим не менш, слідуйте їм - контраст, розмір, ієрархія, і простір - і якість вашої друкарні підніметься, як суфле Гордона Ремзі. До речі, я пожартував щодо мавп.
Слово перекладача
Статті вже три роки, і вона покриває лише найбільш базові аспекти друкарні на Вебі. Однак ці прості правила не дотримуються багатьох, і я не вважаю зайвим нагадати їх тим, хто сьогодні робить Веб.
Раджу подивитися і оригінал: у коментарях розгорнулася цікава дискусія.
