Ключові фактори адаптивної веб-друкарні
Кажуть: «Ніколи не судіть про книгу за її обкладинкою», але дослідження показують, що 50 мілісекунд — це те, що потрібно онлайн-користувачу, щоб вирішити, чи варто йому залишатися на вашому веб-сайті.
Інше дослідження Стенфордського університету, яке вивчало веб-довіру, показало, що 75% користувачів визнали, що судили про довіру до компанії на основі дизайну свого веб-сайту. Чудова веб-друкарня — це шлях до отримання більшої кількості бізнес-запитів і подальших конверсій.
Зрозуміло, що інформація повинна відображатися привабливо та ефективно. Однак проблема полягає в тому, що існує велика різноманітність мобільних пристроїв, і тому типографіка має відповідати всім цим платформам.
Отже, як найкраще використовувати веб-друкарню?
1 Розумне використання шрифтів гарантує, що типографіка є чутливою, але водночас ефективною
Відтоді як була представлена функція Font Face, веб-дизайнери вітали свободу використання різноманітних шрифтів у своїх дизайнах. Це різко контрастувало з попередньою епохою, коли використовувалися лише безпечні для Інтернету кольори.
Оскільки в їхньому розпорядженні є багато шрифтів, дизайнерам потрібно знати правильний спосіб їх використання. Адаптивний веб-дизайн використовується на більшості веб-сайтів, і він встановив обмеження на гру типографіки, яка зараз розробляється відповідно до різних типів пристроїв і відповідних розмірів екрана. Тому веб-дизайнери повинні бути обережними, поєднуючи кілька шрифтів у адаптивній системі веб-дизайну. Не використовуйте занадто багато шрифтів для веб-сайту. Скоріше зберігайте набір із трьох. Це забезпечить чистіший і ефективніший веб-дизайн. У той же час уникайте використання дуже популярних шрифтів, оскільки це може не дати вашій сторінці перевагу над іншими.
Приклад: перевірте vox.com. Цей сайт поєднує два шрифти Sans-Serif і робить це легко. Вони використовують Balto для всіх своїх заголовків, Alright Sans для основного тексту, окрім Harriet, який вкраплюється на сайті всередині. Отриманий вигляд чистий і елегантний.
Навпаки, загляньте на сайт angelfire. Цей сайт містить кілька шрифтів і виглядає пошарпаним і непрофесійним.
2 Виділіть заголовки
Дослідження веб-типографіки показали, що типографіка веб-сайту виділяє його заголовки. Це означає, що ваші веб-відвідувачі проводять більше часу на вашому сайті. Щоб досягти цього, використовуйте гліфи та лігатури, щоб надати своїм заголовкам унікальний вигляд.
Лігатури — це букви, які здаються з’єднаними разом. Наприклад, літери f та i, які утворюють першу частину слова fish, об’єднані разом як «fi» у шрифті. Ви можете легко додавати лігатури за допомогою налаштувань шрифту у вашому браузері або працюючи з функціями «Відображення тексту — оптимізоване розбірливість». Firefox уже має стандартні лігатури. Використання певної комбінації лігатур у певних типах шрифтів може додати краси та стилю вашому веб-дизайну. Лігатури можна ввімкнути або вимкнути в меню «Текст», «Текст» або «Відкрити текст» програмного забезпечення для макета сторінки. Програмне забезпечення забезпечить автоматичне вставлення лігатур у місці з’єднання пов’язаних букв.
Приклад: перегляньте цей веб -сайт, і ви легко побачите, як елегантно виглядають їхні лігатури. Ці чудово створені заголовки, додані на ваш веб-сайт, безумовно, покращать його зовнішній вигляд і забезпечать глядачам кращий досвід користувача.
3 Зробіть так, щоб ваш веб-сайт спілкувався зі своєю аудиторією за допомогою належного використання шрифтів різного розміру та кольорів
Як видно з малюнка вище, нам потрібно вибрати шрифти, які можна читати та чітко бачити на екранах мобільних пристроїв, а також на екранах настільних комп’ютерів. Стиль, у якому шрифти відображаються на друкованих носіях, відрізняється від того, як вони відображаються на цифрових носіях. Нам потрібно зрозуміти сімейство шрифтів, стиль і ефект. Специфікації для веб-шрифтів наведено в специфікаціях CSS W3C, де зазначено, що Serif, Sans-Serif, Monospace, Fantasy та Cursive є сімействами шрифтів.
По-друге, виберіть гарнітуру відповідно до теми чи категорії вашого сайту. Це гарантує, що ваша веб-сторінка буде звертатися до вашої цільової аудиторії та матиме бажаний результат. Шрифти із засічками також можна використовувати для покращення розбірливості тексту, що ще більше сприяє посиленню впливу голосу. Проблема полягає в тому, що цей атрибут Serif добре працює на екранах з високою роздільною здатністю, але може призвести до небажаних результатів для екранів з нижчою роздільною здатністю. Для коротких заголовків доцільно використовувати художні шрифти, а для основного тексту – більш стримані.
4 Модулювання розміру є важливим для адаптивної типографіки
Довжина рядка веб-сторінки повинна бути модульованою. Модуляція розміру або довжини рядка шрифту сприяє чутливості типографіки. Адаптивні дизайни включають адаптивні зміни шрифтів відповідно до вимог різних розмірів екрана. Отже, це обов’язково.
Термін «міра» або «довжина рядка» пов’язаний із читабельністю або тим, як люди читають фрагмент тексту в Інтернеті. Збільшення або зменшення довжини рядка шрифту є одним із способів створити адаптивну веб-друкарню. Ідеальна довжина рядка становить від 45 до 75 символів у рядку на друкованій або веб-сторінці, включаючи пробіли та розділові знаки. Це можна розширити до 45-85 символів на рядок. Це було отримано в результаті досліджень того, як люди читають текст і відповідних рухів очей. На основі цього деякі експерти рекомендують текст, вирівняний за лівим краєм, як придатний для веб-вмісту, оскільки рухи очей при читанні слідують горизонтальному напрямку зліва направо.
Практичний приклад: набір веб-сайтів обмежує кількість символів у рядку приблизно до 75 символів. Як бачите, він виглядає елегантно і може зацікавити глядачів під час його читання.
З іншого боку, веб-сайт gatesnfences має щонайменше 120 символів на рядок. Як наслідок, це виглядає неприємно і відмовляє читати зміст.
5 Використання різних розмірів шрифту покращить читабельність на різних відстанях від екрана. Це вимога для адаптивної типографіки.
Виберіть розмір шрифту, який гарантує, що шрифт буде видимим і читабельним. Це може прийти з компромісом щодо «ідеальної міри», що може бути дещо складним для дизайнерів. Складна частина полягає в тому, що «ідеальна міра» передбачає або зменшення розміру шрифту, або збільшення розміру шрифту, що може зробити текст нечитабельним. Суть полягає в тому, що вміст має бути зручним для читання глядачам. Отже, одним із ключових елементів адаптивної типографіки є забезпечення використання різних розмірів шрифту для різних відстаней читання. Існує метод розрахунку розміру шрифту, який сприймається на різних відстанях читання, і доступні калькулятори розміру, щоб це зробити.
Приклад: перегляньте веб-сайт moonbase. Це веб-сайт, який допомагає клієнтам створювати їхні веб-сайти та брендувати свій бізнес. Текст у центрі зображення виділяється та передає зміст веб-сайту. Ми бачимо це лише з першого погляду. Це привертає увагу користувача, а потім спонукає переглянути решту веб-сайту, яка написана стандартним розміром шрифту.
6 Адаптивна типографіка вимагає, щоб веб-браузери підтримували різні шрифти
Коли ви розробляєте веб-сайти з певними налаштованими шрифтами, ви повинні переконатися, що браузер підтримує завантаження та відображення цих шрифтів. Навіть якщо ваш код без помилок і зрозумілий, проблеми з несумісністю браузера можуть перешкодити вашим зусиллям. Ви також повинні перевірити, чи формат, у якому збережено файли шрифтів, сумісний із шрифтом, який ви хочете використовувати на веб-сторінці. Проблеми з несумісністю можуть вплинути на завантаження ваших шрифтів і, отже, на відображення ваших веб-сторінок.
Практичний приклад: з вищесказаного ми можемо зробити висновок, що нам потрібно або використовувати стандартні шрифти, або використовувати «стеки шрифтів». Першим кроком є «тестування шрифту», щоб з’ясувати, чи є шрифт «безпечним для Інтернету» чи ні. По суті, браузер розглядає кожну послідовність шрифтів як перший вибір шрифту, другий вибір шрифту, третій вибір шрифту тощо. Якщо веб-переглядачу не вдається знайти жоден із шрифтів у послідовності, він повернеться до стандартного Serif, Sans Serif або Monospace, залежно від використовуваної класифікації шрифту.
Наприклад, великий відсоток операційних систем має шрифт Century Gothic. Таким чином, ви можете створити стек шрифтів, який почався з Century Gothic як вашого першого вибору шрифту, потім Arial, Helvetica і, нарешті, загальна класифікація Sans-Serif. У CSS, зверніть увагу, шрифти з кількома словами в заголовку потрібно брати в лапки. Наприклад, сімейство шрифтів: «Century Gothic», Arial, Helvetica, Sans-Serif.
Це вкаже браузеру спочатку шукати шрифт Century Gothic. Оскільки велика частина систем має цей шрифт, більшість ваших глядачів побачать, що сайт відображається з використанням Century Gothic. Для глядачів без Century Gothic браузер спочатку повернеться до Arial, потім Helvetica і, нарешті, до альтернативи Sans-Serif.
7 Фактори, пов’язані з фізичними характеристиками шрифтів, можуть впливати на гнучкість використання шрифтів для дизайну
Хоча існує значна кількість можливостей для гнучкості щодо вимірювання, міжрядкового інтервалу, розміру шрифту, і хоча їх варіації можна внести відповідно до макета, адаптивна типографіка може бути обмежена факторами, які впливають на самі гліфи. Це вага, ширина, контраст штриха, спуск і оптичний розмір. Зміни цих параметрів можуть вплинути на сайт. Існують інструменти, які допомагають дизайнерам подолати ці обмеження, створюючи різні типи стилів шрифтів за допомогою математичної інтерполяції між сімействами шрифтів у межах встановлених ними фізичних параметрів.
Двома прикладами таких інструментів є Superpolator або FlowType.js. Коли розмір екрана зменшується, відносна пропорційна різниця між шкалами збільшується. Отже, має бути баланс між розміром екрана та відносним масштабом. З огляду на це було розроблено деякі шкали, і їх можна використовувати для розробки більш ефективних веб-сайтів. Пропорція означає, скільки разів шрифт заголовка більший або менший за основний текст. Ось чому нам потрібна адаптивна типографіка. Нам потрібна типографіка, яка сама налаштовуватиметься, щоб зменшуватися в точках зупинки, оскільки дизайнери не можуть скинути всі свої базові стилі для кожного елемента типографіки на своїй сторінці.
Приклад: Перевірте тип потоку. Перетягніть повзунок, і ви побачите, що робить адаптивна типографіка завдяки таким інструментам, як Superpolator і FlowType.js.
Адаптивна типографіка вдосконалюється з практикою. Маючи певні знання про те, як використовувати медіа-запити, і набір пристроїв із різними розмірами екрану для тестування, ви зможете освоїти це. Тепер, коли ви знаєте, що потрібно зробити, щоб отримати найкращу типографіку, залучити більше переглядів і конвертувати більше потенційних клієнтів, ви можете застосувати наведені вище принципи, щоб побачити їх втілення у фізичну реальність.