Посібник з веб-типографіки

Вичерпний посібник з типографіки веб-сайтів: дизайн для читабельності

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

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

Що таке типографіка сайту?

Кожен веб-сайт має текст, а там, де є текст, є типографіка. Взагалі кажучи, типографіка веб-сайту визначає зовнішній вигляд тексту на сайті. Йдеться про те, як слова з'являються на сторінці, а також про стилістику (шрифт, розмір, інтервали) і про те, як текст виглядає на сторінці.

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

• Скорочення тривалості уваги, особливо в Інтернеті;
• Доступність, адже люди по-різному взаємодіють з онлайн-текстами;
• Легкість сприйняття, оскільки люди часто не мають часу читати весь текст;
• Різні розміри екранів, оскільки користувачі переглядають веб-сайти на різних пристроях.

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

Терміни веб-типографіки

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

1. шрифти

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

Шрифт - це конкретний екземпляр шрифту; вони є частинами шрифту. Вони розрізняються за накресленням (напівжирний або світлий), розміром (14px або 24px) або іншими стилізаціями (курсив, підкреслений тощо). Наприклад, Helvetica Bold (16px) і Helvetica Regular Italic (24px) - це шрифти, які є частиною шрифту Helvetica. Шрифти також часто називають сімействами шрифтів, оскільки це широкий термін для позначення шрифтів зі схожими характеристиками.

Багатьом шрифтам відповідають лише два шрифти: із зарубками та без них. Шрифти із зарубками зазвичай містять невеликі прикраси в кінці, а шрифти без зарубок - ні. Ось простий спосіб відрізнити їх: "Sans" французькою означає "без".

Окрім цих двох, доступні й інші шрифти, один з яких - Script. Однак ці типи рідше використовуються в Інтернеті, оскільки їх важче читати на екрані.

2. підрізання

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

У другому випадку між повтореннями Ts додається кернінг для покращення читабельності.

3. відстеження

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

4. міжрядковий інтервал

Міжрядковий інтервал або висота рядка - це термін для позначення відстані між рядками в типографіці, який відіграє важливу роль у забезпеченні читабельності тексту на вашому веб-сайті. Збільшуючи міжрядковий інтервал, ви збільшуєте простір між рядками, що загалом покращує читабельність. Для гарної читабельності міжрядковий інтервал зазвичай має бути приблизно на 30 % більшим за розмір шрифту. Наприклад, якщо розмір літер становить 20 пікселів, рекомендований міжрядковий інтервал - 26 пікселів.

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

5. ієрархія

Ієрархія - це порядок розташування тексту на вашому сайті. Більшість веб-сайтів, особливо об'ємних (наприклад, блогів), намагаються розділити текст на менші частини, щоб зробити його більш зручним для сприйняття та управління. Ці розділи називаються заголовками.

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

На веб-сайтах ієрархія тексту може бути підкреслена різними шрифтами, розмірами, кольорами або іншими особливостями. Наприклад, у цій статті терміни веб-типографіки належать до розділу 2 (H2,), а згадані терміни - до розділу 3 (H3). Ці розділи H3 стають дедалі конкретнішими, а їхній вигляд вказує на те, що вони є підрозділом більш загальної теми. Заголовок блогу зазвичай є рубрикою 1 (H1). Ось приклад ієрархії тексту, що відображається в нашому текстовому редакторі.

Вибір найкращого шрифту для читання на екрані

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

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

1. обмежте кількість використовуваних шрифтів до мінімуму

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

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

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

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

2. намагайтеся дотримуватися стандартних шрифтів

На таких платформах, як Google Fonts, доступні тисячі шрифтів, що дає вам чудову можливість спробувати щось нове і захоплююче. Однак, одна річ може піти не так: Занадто складні шрифти можуть відволікати відвідувачів вашого сайту. Щоб уникнути цього, намагайтеся використовувати стандартні шрифти, якщо тільки немає особливого випадку, який вимагає нестандартних шрифтів. Експериментувати зі шрифтами весело, але важливо пам'ятати, що мета хорошої типографіки - змусити людей читати контент.

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

Люди заходять на ваш сайт з різних пристроїв - від смартфонів і планшетів до персональних комп'ютерів. Щоб ваш сайт залишався доступним для читачів, вибирайте шрифти, які добре виглядають і читаються на різних екранах. Почніть з використання шрифту, який добре виглядає на різних розмірах. Одним з таких прикладів є шрифт Roboto, показаний на зображенні нижче.

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

Поєднання шрифтів для вашого веб-сайту

Тепер давайте подивимося на деякі красиві пари шрифтів, які ви можете використовувати для свого сайту, щоб досягти збалансованого і красивого вигляду.

1st Lora & Merriweather

2. Roboto & Archivo Black

3rd Bebas New & Old Standard TT

Висновок

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