Статті
Як покращити типографію мобільних застосунків
Поради від продуктового дизайнера Genesis
29 жовтня, 2019
Андрій Жулідін
Product Designer в Amomedia, проєкті Genesis

Завдяки швидкому розвиткові інтернету типографія в інтерфейсах пройшла основні етапи трансформації в цифровий світ. Разом з тим дизайн мобільних застосунків — все ще нова тема.

У цьому матеріалі я не буду розповідати про загальні концепти типографії, які можна використовувати в друці або цифровому середовищі. Натомість сфокусуюся на нюансах та лайфхаках типографії мобільних застосунків. Розробка додатків тісно пов’язана з функціями операційних систем, тому я часто звертатимусь до окремих рекомендацій Material Design for Android та iOS Human Interface Guidelines.

Отже, поїхали.

Мінімальний розмір шрифту

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

Apple у своїх Human Interface Guidelines рекомендує мінімальний розмір тексту — 17pt, а Google в Material Design Guidelines — 16sp (дорівнює 16pt в iOS). Важливо враховувати, що рекомендації від систем стосуються їхніх шрифтів за замовчуванням. Зараз це Roboto для Android та San Francisco і New York для iOS.

Мінімальний розмір для інших шрифтів може змінюватися залежно від характеристик. Наприклад, шрифти з дуже тонкими штрихами вимагають більшого розміру тексту. Також стандарти WCAG 2.0 (Web Content Accessibility Guidelines) рекомендують використовувати мінімальний шрифт у 16pt та 14pt для тексту жирного форматування.

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

Рекомендації

Не використовуйте шрифт розміром менше 16pt основного тексту вашого додатку. Хорошим вибором стане розмір від 16pt до 18pt.

Проф. підказка

Щоб зробити типографію застосунку більш доступною в iOS, ви можете скористатися технологією Dynamic Type Sizes. Це дозволить користувачам, які встановили збільшений або зменшений розмір шрифту в системних налаштуваннях, бачити відповідний розмір в інтерфейсі додатку.

Розмір заголовка

Останніми роками у цифровій типографії популярні великі за розміром заголовки. Вони створюють контраст з основним текстом і стають якірними елементами на сторінці.

Та будьте обережними з великим розміром заголовків в мобільних застосунках: вони можуть розтягуватись на три-чотири рядки по слову-два на рядок. Так вони виглядають безладно і читати їх складно.

Рекомендації

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

Проф. підказка

У деяких випадках, ви можете використовувати складені заголовки (бірка або eyebrow headline) для того, щоб скоротити заголовок.

Контраст

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

Рекомендації

  • Дотримуйтесь стандартів контрасту WCAG 2.0.
  • Слідкуйте, щоб текст над зображеннями був достатньо контрастний.
  • Подбайте про два варіанти розміщення тексту на світлому і темному тлі.

Проф. підказка

Використовуйте плагін Stark (або інші подібні плагіни) для Sketch, Adobe XD, Figma або інструменти онлайн-тестування контрасту.

Системні шрифти

Наразі для iOS ви можете використовувати два системних шрифти: San Francisco та New York. Для Android — це Roboto. Вони допомагають зробити дизайн вашого застосунку більш узгодженим з операційною системою. Проте використовуючи лише їх, вам буде важко досягти візуальної унікальності.

Рекомендації

Найпростіший та найпоширеніший спосіб додати акценти та зберегти унікальний вигляд типографії — використати системний шрифт для основного тексту, а для заголовків — інший, який іде не за замовчуванням. Таке поєднання завжди виглядатиме цікаво та свіжо.

Ви можете скористатися котримсь із цих сервісів, щоб вибрати цікаві пари шрифтів:

Проф. підказка

Зауважте, що системні шрифти Apple можуть використовуватися лише в продуктах екосистеми Apple (iOS, macOS тощо). Тим часом Roboto від Google — у будь-якій операційній системі. Пам’ятайте про це, коли будете розробляти дизайн застосунку для обох платформ.

Комерційні шрифти

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

Різниця в ціні між шрифтом для використання в застосунку та десктоп-ліцензією чи веб-сайтом стане для вас неприємним сюрпризом (особливо, якщо ви раніше їх не купували). Наприклад, десктоп-ліцензія на один стиль FF DIN коштує 95$, у той час як для додатку —  950$ (дані з myfonts.com).

Рекомендації

Якщо ви вирішили інтегрувати комерційний шрифт у дизайн свого застосунку, врахуйте такі моменти:

  • нюанси ліцензії — умови розповсюдження шрифту можуть сильно відрізнятися;
  • технічні нюанси, у тому числі його читабельність у невеликих розмірах;
  • подумайте, як буде масштабуватися ваш продукт у майбутньому (наприклад, може виявитися, що вибраний шрифт не підтримує кирилицю);
  • дізнайтеся, чи має шрифт достатню кількість накреслень.

Проф. підказка

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

От кілька посилань на мої улюблені сайти словолитень:

Безкоштовні шрифти

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

Рекомендації

Вибираючи безкоштовний шрифт, потрібно враховувати ті ж нюанси, що й при покупці комерційного.

Кілька посилань на мої улюблені сайти з безкоштовними шрифтами та їхніми сімействами:

Базова лінія (Baseline)

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

*Зараз Android не має методів підтримки відступів щодо базових ліній шрифту у повному обсязі.

Рекомендації

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

Відступи

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

Рекомендації

Скомпонуйте макет так, аби частина тексту була видимою на лінії згину. Це заохотить користувача прокрутити далі, а вам не потрібно буде обмежуватись одним екраном.

І наостанок пам’ятайте:

«Вчіть правила як професіонал, аби порушувати їх як митець», — Пабло Пікассо.

Оригінал статті англійською читайте тут.

avatar
Андрій Жулідін
Product Designer в Amomedia, проєкті Genesis
Колонка

У нас є ще дещо для вас