Мастерство мобильной типографики: советы по использованию шрифтов и лучшие практики

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

Хотя у каждого дизайнера приложений есть свой собственный стиль и подход к типографике, дизайнеры могут обеспечить эффективность текста в мобильном приложении, применяя основные принципы дизайна, понимая ожидания пользователей и развиваясь вместе с мобильными технологиями и трендами.

Как UX/UI-дизайнер с обширным опытом в области дизайна, ориентированного в первую очередь на мобильные устройства, я понимаю, насколько важно использовать правильные стили, размеры и расположение шрифтов для создания визуальной гармонии на небольших экранах. Вот пять рекомендаций по созданию практичной и привлекательной мобильной типографики, включая выбор подходящего шрифта для вашего приложения и обеспечение доступности дизайна для всех пользователей.

Сосредоточьтесь на читаемости

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

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

При оценке шрифтов для мобильной типографики учитывайте следующие факторы:

Шрифты с засечками и без засечек

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

Шрифты с засечками облегчают различение определенных символов (например, заглавной буквы «I», строчной буквы «l» и цифры «1»). Хотя раньше эти шрифты ассоциировались в основном с печатными материалами, благодаря повышению разрешения экранов они все чаще используются в цифровых продуктах, таких как мобильные приложения.

Georgia – это элегантный и читаемый шрифт с засечками, который используют такие авторитетные организации, как The New York Times, как на своем веб-сайте, так и в мобильном приложении. Формы его букв с толстыми штрихами, открытыми промежутками и большой высотой строчных букв обеспечивают удобство чтения даже на экранах небольших размеров. Однако есть некоторые шрифты с засечками, которых следует строго избегать при разработке приложений. Следует с осторожностью относиться к чрезмерно стилизованным шрифтам с засечками, таким как Old English; из-за своих закруглений, теней, контуров и орнаментов эти шрифты могут быть особенно трудночитаемыми на небольших экранах.

Напротив, большинство шрифтов без засечек хорошо подходят для случаев, когда место для текста ограничено. Их часто используют в мобильных приложениях, поскольку их лаконичный и простой дизайн обеспечивает удобство чтения на небольших экранах с низким разрешением. Одним из примеров хорошо читаемого шрифта без засечек является Roboto – современный геометрический шрифт, разработанный Google для мобильной операционной системы Android. Аналогом от Apple является SF Pro – системный шрифт iOS, который оптически адаптирован для отображения на экране при небольших размерах.

Вариативные шрифты

Вариативные шрифты объединяют несколько начертаний, ширин и стилей в одном файле шрифта, заменяя отдельные файлы, которые традиционно требовались для каждого варианта. Для мобильных приложений это дает значительное преимущество в производительности: меньше сетевых запросов, меньший объем загружаемых данных и плавная интерполяция между начертаниями при любом размере. SF Pro и Roboto Flex являются вариативными, и большинство современных шрифтов с открытым исходным кодом, таких как Inter, Source Sans и IBM Plex, поставляются в вариативных версиях. Если ваш дизайн требует использования трех или более начертаний одного и того же семейства, переменный шрифт почти всегда позволяет уменьшить общий размер файла шрифта без ущерба для типографического диапазона.

Сочетание шрифтов

Сочетание шрифтов – это комбинация различных шрифтов, которые дополняют друг друга, создавая гармонию и баланс в дизайне. Однако при использовании нескольких шрифтов в контенте мобильного приложения необходимо проявлять осторожность, чтобы читатель, который может находиться в пути или заниматься несколькими делами одновременно, мог быстро и эффективно воспринимать информацию. Кроме того, дизайнерам следует избегать использования большого количества различных комбинаций шрифтов, так как это может замедлить загрузку страницы, что является серьезным сдерживающим фактором для мобильных пользователей.

Чтобы сочетание шрифтов улучшало пользовательский опыт вашего приложения, дизайнер Toptal Карли Чанг рекомендует использовать типографическую систему, которая определяет шрифт, стиль, размер, правила интервалов и другие элементы, которые вы будете использовать для различных типов текста в приложении, включая заголовки, основной текст, подписи, меню и кнопки интерфейса. Эта типографическая система все чаще определяется как набор дизайнерских токенов: общих переменных для гарнитуры, размера, насыщенности и высоты строки, которые остаются синхронизированными между файлами дизайна и производственным кодом. Переменные Figma предоставляют встроенный способ управления этими значениями, обеспечивая единообразие стилей шрифтов в макетах, прототипах и готовом пользовательском интерфейсе.

Если вы работаете с уже устоявшимся брендом, возможно, уже существует система или руководство по стилю, которым вам нужно будет следовать. Однако, если вы создаете свою систему с нуля, я рекомендую ознакомиться с книгой Кимберли Элам «Типографические системы» и ее рассуждениями о различных правилах и рекомендациях по типографике, а также о том, как организовывать текст в цифровом дизайне.

Если вы решили использовать один шрифт для всего текста, можно варьировать насыщенность, стиль и размер шрифта, чтобы добавить контраст и создать визуальную иерархию. Для выделения заголовков следует использовать более насыщенные варианты шрифта. В целом, для оптимальной читаемости в основном тексте приложения лучше отдавать предпочтение средней насыщенности перед легкой и обычной. Аналогично, жирный шрифт может выделить конкретные фрагменты текста, на которые вы хотите обратить внимание читателя.

Сходные буквы

Чтобы обеспечить высокую читаемость, избегайте шрифтов, в которых есть «похожие символы», то есть буквы, которые выглядят одинаково, когда расположены рядом. Цифру «0» можно принять за заглавную букву «O», а строчную букву «L» – за заглавную букву «I» или цифру «1» на небольших экранах. Символы, которые легко спутать, особенно проблематичны при отображении такого контента, как коды аутентификации, которые пользователи должны вводить вручную. Если несколько символов выглядят слишком похожими и вы предвидите путаницу у пользователя, подумайте о смене шрифта.

^{Учитывайте} «кликабельность» вашего текста

Правильный выбор размера шрифта для заголовков, подзаголовков и основного текста имеет решающее значение для создания гармоничного визуального восприятия и обеспечения читаемости – а также кликабельности – информации на устройствах с небольшим экраном. При оформлении типографики для приложений задача состоит в том, чтобы сделать текст достаточно крупным для удобства сенсорного взаимодействия – чтобы пользователи могли точно нажимать на ссылки или кнопки, – но не настолько крупным, чтобы он занимал весь экран или вынуждал чрезмерно прокручивать страницу.

Что касается размера шрифта в приложениях, то хорошим практическим правилом является минимальный размер шрифта 16 пикселей для основного текста, а заголовки должны быть примерно в 1,3 раза крупнее. (Еще один вариант для мобильного дизайна – использование «золотого сечения», при котором заголовки должны быть в 1,618 раза больше основного текста.)

Дизайнеры также могут использовать готовые системы и инструменты мобильной типографики с предустановленными свойствами и стилями. Например, онлайн-инструмент для типографической шкалы Typescale позволяет визуализировать текст в иерархии страницы и создавать шкалы разных размеров в зависимости от экрана, для которого вы разрабатываете дизайн.

Создайте четкую иерархию

Правильное использование размера шрифта, стиля, цвета, начертания, регистра и контраста помогает пользователям быстро определять и понимать, что на экране является наиболее важным. Эффективная типографическая иерархия привлекает внимание к самому важному тексту и придает смысл и контекст каждому типу контента (например, заголовкам, подзаголовкам и основному тексту). Дизайнер продуктов Toptal Брайан Картер рекомендует использовать систему сетки, чтобы обеспечить выравнивание элементов, их правильные пропорции, надлежащее расстояние между ними и лаконичность. Вот несколько дополнительных моментов, которые помогут вам создать гармоничную структуру:

Межстрочный интервал в основном тексте

Правильные интервалы, включая высоту строки, межбуквенные и межсловные интервалы, поля и отступы, являются ключом к удобочитаемости, особенно на небольших экранах, где меньше свободного пространства, которое помогает вести взгляд пользователя от одного фрагмента контента к другому. Оптимальный межстрочный интервал (или интервал между строками) зависит от типа текста. Для основного текста на мобильных устройствах межстрочный интервал должен составлять примерно 1,6 размера шрифта. Это создает больше свободного пространства между строками, что позволяет избежать скученности и снизить утомляемость глаз.

Межстрочный интервал для заголовков

Чтобы передать иерархию в мобильном дизайне, ваши заголовки должны выделяться на фоне сопутствующего основного текста. Простой способ добиться этого – создать пространство вокруг заголовка или убрать пробелы между длинными заголовками, занимающими несколько строк. Возможно, заголовок занимает две или даже три строки на мобильном экране; уменьшение межстрочного интервала между этими строками даст читателю понять, что заголовок отделен от других типов текста. Как правило, межстрочный интервал для заголовков должен составлять примерно 1,2 размера шрифта, а для подзаголовков – 1,4. По моему опыту, еще одно важное правило относительно интервалов проиллюстрировано на рисунке ниже: Если заголовок написан заглавными буквами, высота межстрочного интервала должна соответствовать ширине штриха любой буквы – или составлять не более 1,2-кратной ширины этого штриха.

Надзаголовок

Чтобы привлечь дополнительное внимание к заголовку, рассмотрите возможность добавления надзаголовка, который располагается непосредственно над первыми словами заголовка. Этот текст содержит краткое объяснение функций или содержания и служит ценным инструментом для эффективного сопровождения пользователей по мобильному интерфейсу, облегчая удобную навигацию и привлекая их к основному содержанию.

В мобильном дизайне цель надзаголовка – дать читателям мгновенное представление о том, что их ждет на странице. По словам Картера, который использовал эту функцию в дизайне нескольких приложений, включая приложение для цифрового кошелька Meteor, это позволяет им просматривать контент и воспринимать его быстрее.

Сделайте вашу мобильную типографику доступной

Существует несколько способов обеспечить доступность мобильной типографики для всех, включая пользователей с ослабленным зрением, слепых, людей с дальтонизмом и дислексией. Во-первых, помните, что длинные строки текста могут затруднять чтение пользователям с ослабленным зрением или ограниченным полем зрения. В портретном режиме длина строки обычно не представляет проблемы благодаря узкому окну просмотра, но в альбомном режиме постарайтесь ограничить длину строки 80 символами.

Во-вторых, учитывайте системные настройки размера текста пользователя. Функция «Динамический шрифт» в iOS и настройка доступности размера шрифта в Android позволяют пользователям масштабировать текст во всех приложениях, и приложения должны наследовать эти настройки, а не переопределять их с помощью собственного ползунка. Если вы все же предлагаете дополнительные средства управления размером шрифта, создавайте их на основе системного масштабирования, а не игнорируйте его.

Темный режим также является ценной функцией для пользователей с ослабленным зрением, но убедитесь, что между цветами текста и фона обеспечен достаточный контраст. Низкий контраст может затруднять чтение текста, особенно при ярком освещении экрана с подсветкой.

При разработке типографики для приложений с использованием экранных считывателей – вспомогательных программ, преобразующих текст и другие элементы на экране в синтезированную речь или шрифт Брайля – следует помнить о нескольких моментах. Экранные считыватели могут неправильно интерпретировать буквы, расположенные очень близко друг к другу или перекрывающиеся, из-за чего шрифты с засечками, курсив и текст, написанный заглавными буквами, сложно преобразовать. Очень тонкие или «легкие» шрифты также создают проблемы. В ходе недавнего вебинара Джасинта Окли, UX-дизайнер и консультант организации Vision Australia, предложила использовать гуманистические шрифты без засечек, такие как Calibri, Verdana или Tahoma. Эти шрифты отличаются большой высотой строчных букв, просторным расположением символов и уникальной формой букв, что делает их идеальными для экранных считывающих программ. Еще одним шрифтом с такими характеристиками является Proxima Nova, который неоднократно входил в десятку лучших шрифтов для мобильных и цифровых интерфейсов.

Всегда тестируйте свою типографику

Проводя всестороннее тестирование мобильной типографики, дизайнеры могут не только выявлять ошибки, но и убедиться, что выбранные ими шрифты, размеры и стили повышают удобство использования и, в конечном итоге, способствуют успеху приложения. Такие инструменты, как Font Tester, Fonts Ninja и Typetester, позволяют оценить читаемость и разборчивость, а инструменты для тестирования юзабилити и UX, такие как UserTesting и Optimizely, дают возможность проводить опросы и анкетирования для сбора количественных и качественных данных.

Вы также можете запросить отзывы у своей команды и внешних тестировщиков. В то время как команда дизайнеров выявляет и устраняет визуальные недочеты, внешние тестировщики моделируют различные действия пользователей с помощью сенсорного экрана, клавиатуры и других средств ввода, чтобы выявить ошибки в функциональности. При оценке использования типографики тестировщики также могут обращать внимание на шрифты, размер которых слишком мал или велик для данного разрешения экрана. На основе отзывов тестировщиков команда дизайнеров может вносить изменения, чтобы обеспечить соответствие своих проектов поставленным целям.

Рекомендации по мобильной типографике: будьте в курсе последних тенденций

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

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