Нещодавно ми задумалися про важливість мобільної типографіки. Багато дизайнерів ніколи її окремо не вивчали, і це сумно. Ці знання дуже бажані для тих, хто створює дизайн адаптивних сайтів і мобільних додатків. Тому ми описали найважливіші, на наш погляд, елементи типографіки в мобільному дизайні.
Нагадаємо, що типографіка – це техніка структуризації друкованого тексту, покликана зробити його розбірливим для читання і привабливим при відображенні. Сюди входить вибір шрифтів, міжрядкового інтервалу, відстані між літерами, довжини ліній і коригування простору між словами. Типографіка об’єднує текстову і візуальну складову.
Отже, приділіть увагу такими елементами типографіки:
1. Шрифт
Для різного контенту потрібні різні шрифти. Наприклад, для реклами жіночих парфумів зазвичай використовуються тонкі шрифти, плавні або вигнуті. Але тут важливо не переборщити, тому що декоративні шрифти на маленькому екрані можуть виглядати нерозбірливо. Також утримайтеся від рукописних шрифтів, вони перевантажують мобільний дизайн і виглядають нечитабельно. Для прикладу – шрифт League Script # 1.
Пам’ятайте, що обраний шрифт повинен коректно відображатися на будь-якому смартфоні з будь-якою ОС (операційною системою) – а це завдання не з легких. Краще вибирайте прості шрифти, які легко сприймаються очима. Зверніть увагу на сімейство Helvetica.
Для підтримки чистого простого призначеного для користувача інтерфейсу використовуйте шрифти одного стилю. А краще – 1 шрифт в декількох варіантах і розмірах. Для контрасту можна вибрати 2-3 додаткових шрифти.
2. Розмір шрифту
Екран смартфона в рази менший екрану ПК або ноутбука, відповідно, з такого екрану складніше читати. Якщо ви використовуєте в мобільній версії сайту маленький нелегкий шрифт – ви втрачаєте користувачів. З точки зору типографіки в веб дизайні це помилка. Те, що текст можна масштабувати – не виправдання, більшість користувачів не стануть здійснювати зайву дію, особливо якщо при масштабуванні текст вилізе за межі екрану.
Який же розмір шрифту вибрати? Для iOS можна використовувати розмір шрифту в 11 пунктів, а для смартфонів на базі Android виберіть розмір 14 sp. Це рекомендація для основного тексту, для заголовків і підзаголовків використовуйте більший розмір.
3. Стилі тексту
Ми рекомендуємо застосовувати вбудовані стилі тексту в веб дизайні для мобільної версії сайту. Вони дозволяють візуально виділити контент, при цьому зберігаючи загальну читабельність. Вбудовані стилі засновані на системних шрифтах, вони дозволяють використовувати Dynamic Type, який автоматично регулює трекінг і дозволяє управляти розмірами шрифту.
В принципі, вам вистачить 2-3 стилів. Рекомендуємо знайти сімейство шрифтів з великою кількістю варіацій накреслення. Найбільш якісні шрифти відрізняються різноманітністю стилів – курсив, жирний, чорний, ультратонкий або конденсований.
Якщо ви поєднуєте різні стилі – шукайте літери з однаковою формою чаш (простором усередині замкнутих букв, наприклад, «о») і висотою. Досить поширена пара шрифтів – serif і sans serif.
4. Міжрядкові відступи як елемент типографіки
Інтерлінії – це міжстрочна відстань. Це відстань між базовими лініями сусідніх рядків. Коли не вистачає простору між рядками, бігти поглядом по тексту, перестрибуючи з кінця рядка на початок, стає незручно. Коли ж інтервал великий, пропуски між словами стають занадто помітні і порушують плавний потік рядку.
Так як екран смартфона менше монітора комп’ютера, то і міжрядковий інтервал треба робити менше, ніж в декстопній версії. Загальноприйнятий інтерліньяж – 1,4em, але, на наш погляд, він трохи замалий і робить текст дуже стислим на екранах мобільних версій сайту. У веб-дизайні нормальний міжрядковий інтервал повинен становити 120% від розміру шрифту. І ще одне правило – в коротких рядках використовуйте менший інтерліньяж. Також, якщо для десктопних версій ви задаєте більш вільний інтерліньяж, не забудьте його зменшити для мобільних версій.
5. Довжина рядка
Довжина рядка тексту – важлива міра в типографіці. Тут треба враховувати, що довжина рядка екрану ноутбука або ПК виходить за межі екрану смартфона. І якщо для ПК оптимальною довжиною рядка вважається 50-75 символів (в ідеалі – 60-65), то для мобільних девайсів вона повинна бути коротшою. Ми рекомендуємо дотримуватися 30-40 символів в рядку, так текст буде легким для читання.
6. Пустий простір
У мобільному дизайні незаповнений простір привносить відчуття свободи. Це і відстань між рядками, і порожній простір на полях, і відступ абзаців. Дотримуйтесь ієрархії – простір між буквами має бути меншим, ніж простір між словами, простір між словами менширм, ніж простір між рядками і т. д. Додайте 10-20% порожнього простору в ваш мобільний дизайн, між рядками тексту, але не перестарайтеся, так як екран смартфона не великий, і є ризик втратити дорогоцінне місце даремно.
Також дайте більше простору елементам – наприклад, збудуйте навігаційне меню не по горизонталі, а по вертикалі.
7. Контраст
Колір шрифту створює сильний контраст, тому плануйте дизайн, заснований на білому тлі і чорних буквах або навпаки, чорному тлі і білих буквах. Коли ви домоглися успіху з цими комбінаціями, додайте інший колір. Але намагайтеся використовувати простий фон. Якщо ж він містить зображення або візерунки, збільште розмір шрифту – це розділить фон і текстові елементи.
Також важливо вміти зменшувати контраст між різними рівнями шрифту. Наприклад, заголовок, який в 2-3 рази більше основного тексту, буде мати гарний вигляд на екрані ноутбука, але на мобільному контраст буде явно перебільшеним, так як там видно набагато менше тексту. Не перестарайтеся з розмірами шрифтів заголовка і тіла.
8. Кернiнг
Йдеться про відстані між буквами в залежності від їх форми, змінюється вибірково. Звичайно, у великих текстових блоках кернинг не особливо важливий, але ви коли-небудь помічали, як порушений кернинг між великою літерою і малою порушує загальну узгодженість? Враховуйте це і стежте за візуальною послідовністю всіх букв в тексті.
9. Трекінг
Трекінг – це відстань між усіма літерами, міжбуквенний інтервал. Завдяки йому текст стає більш читабельним. У більшості випадків вам не доведеться налаштовувати трекінг, але є випадки, коли його можна відрегулювати. Наприклад, текст заголовка або маленький текст-примітка. Великий текст вимагає менше трекінгу, а маленький – більшого, в першому ми можемо щільніше згрупувати символи, а в другому – збільшити відстань між ними, підкресливши контраст.
10. Вирівнювання тексту
Ви можете вирівняти текст кількома способами. Але ми б рекомендували використовувати вирівнювання по лівому краю. Так, правий край буде виглядати обірваним, але це допомагає користувачам не втрачати рядок і послідовно переходити з одного кінця рядка на наступний. Ви можете пом’якшити правий рваний край, використовуючи знаки переносу.
Можна використовувати змішане вирівнювання – коли у великому блоці тексту використовується вирівнювання по лівому краю, а для заголовків або коротких рядків використовується вирівнювання по центру. Але не більше 3 разів на весь текст.
Вирівнювання по ширині залишає акуратні і рівні краї. Однак призводить до неузгоджених пробілів або декількох розтягнутих слів в рядку. Тому таке вирівнювання нам не підходить.
11. Функціональність.
Реальна функціональність допомагає поліпшити користувальницький інтерфейс. Переконайтеся, що вашому користувачеві зрозуміло, яку дію здійснювати далі, і що він може це зробити. Для цього робіть клікабельні елементи великими і зручними для натискання, виділяйте кнопки замовлення, зробіть кошик помітніше і т. д. Ставте юзабіліті на перше місце.
12. Адаптивність.
Смартфони відрізняються розміром і діагоналлю екрану. І ваше завдання зробити такий адаптивний дизайн, який буде однаково зручний і зрозумілий користувачам з різними девайсами. Ваш текст повинен адаптуватися під будь-який розмір екрану. Тому перевірте дизайн на декількох мобільних телефонах.
Висновки про типографіку в мобільному веб дизайні:
Ми охопили основні елементи мобільної типографіки, які допоможуть вам створити зручний і красивий дизайн веб сайту для мобільних пристроїв. Також зауважте, що в поточному році панує мінімалізм. Слідкуйте за трендами, щоб знати, що чекає мобільну типографіку в майбутньому.
Loading...
