Мобильная типографика
При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).
Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.
Размер
Одна из самых часто встречающихся проблем чтения сайтов на мобильных устройствах — это слишком маленький размер шрифта. Приходится постоянное масштабировать сайт, чтобы прочитать мелкий текст, а это очень раздражает пользователя. Даже если у сайта есть мобильная версия или адаптивный дизайн, проблема плохой читаемости из-за мелкого шрифта встречается нередко.
В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).
Пример сайта с соотношением размеров шрифтов 16/24/72: 
Контраст
Любой текст на сайте должен контрастировать с фоном, как при просмотре на десктопе, так и на мобильном устройстве. Этим, вроде бы простым и очевидным, правилом часто пренебрегают, поэтому случается видеть красный текст на фиолетовом фоне или желтый на голубом.
Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.
Отступы
У разных устройств разные размеры экранов, а также различное соотношение сторон дисплея. Необходимо это помнить при верстке сайта, текст удобно читать при достаточных отступах от краев и правильном межстрочном интервале. Особенно это касается чтения текста на мобильном устройстве. Примеры:
Выбор шрифта
Выбрать шрифты, которые будут корректно отображаться на любом устройстве и любой ОС, — задача не простая. Очень важно учитывать, как шрифт будет рендериться на различных девайсах, например:
Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.
Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:
Адаптивный дизайн
Все вышеописанное необходимо учитывать и при разработке адаптивного дизайна, при этом особое внимание стоит уделить изменению размеров шрифтов, отступам и длине строк. И конечно тестированию получившейся верстки.
Изменение размера шрифта
На большинстве сайтов используются px или em для того, чтобы задать размер шрифта. Em предпочтительнее, потому что позволяет пользователю менять размер шрифта в браузере. Но есть и недостаток — размер в em зависит от font-size родительского элемента. Поэтому лучше использовать rem: размер шрифта будет зависеть от корневого элемента — html:
Пример с media queries:
Отступы и длина строк
Согласно исследованию Baymard Institute, оптимальная длина строки для удобного чтения — от 50 до 75 символов. Непросто добиться автоматического соответствия этому правилу на любом устройстве. Например, размер шрифта девайса по-умолчанию — 16 px, а мы хотим использовать 20 px. Получается, что наш шрифт должен быть размером 1.25 rem. Блок текста делаем шириной 675 px, тогда в строке будет помещаться 60 символов:
Таким образом можно прописать контейнеры для экранов с любыми размерами. Для лучшей читаемости на больших экранах можно еще разместить контент в две колонки:
Адаптивный веб-дизайн: как выбрать размер шрифта
Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».
Быстрая навигация по главам: Введение · iOS · Android · Веб · Принципы
Итак, эта статья для вас, если вы работаете с веб-дизаном и хотите ориентироваться (примерно) в размерах шрифтов — какой где лучше использовать.
Ниже я привожу информацию по мобильному дизайну и веб-дизайну — если очень хочется, можно сразу перейти к этим разделам. На дворе уже 2019, веб-сайты всё лучше и лучше адаптируются под девайсы. Узнаем поподробнее? Погнали.
Рекомендации по веб-типографике — мобильный дизайн
Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, зарубите себе на носу раз и навсегда:
- Размер шрифта в инпутах не менее 16px. Если шрифт будет меньше, на iOS браузер приблизит строку ввода, сместив её влево и обрезав правую сторону так, что после пользования строкой пользователю придется отдалять уже вручную.
Вот так это выглядит:
За гифку отдельное спасибо шустрому Ste Grainer. Можете ознакомиться с его статьёй по авто-зуму здесь.
Вся остальная информация о размерах шрифта в мобильном вебе в основном сводится к следующему:
- Размер шрифта основного текста должен быть около 16px. Цель: чтобы текст на вашем телефоне (при стандартном расстоянии от глаз) читался так же легко, как и на странице хорошо отпечатанной книги (при стандартном — обычно чуть большем — расстоянии от глаз).
- Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Уменьшать размер только на одну единицу я не рекомендую — в таком случае его будет легко спутать с обычным текстом. Менее важный текст должен быть оформлен соответственно, чтобы намеренно подчеркнуть его меньшую значимость.
- Проверяйте, как выглядит ваш дизайн на самом устройстве. Максимально обратите своё внимание на этот совет: макет приложения на экране ноутбука и макет приложения на экране смартфона в ваших руках дают абсолютно разные ощущения. В начале своего дизайнерского пути я едва ли не каждый раз поражался тому, как макет, который я делал на компьютере, по-другому выглядел на мобильном устройстве. Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror,Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.
- По всем остальным вопросам касаемо размеров шрифтов в вебе, идите читать гайдлайны материального дизайна — это понятный, хорошо структурированный, метко написанный (и вполне содержательный) материал. Чем больше я расту как дизайнер, тем больше убеждаюсь в следующем: хоть у Apple и есть максимальный авторитет с точки зрения дизайна, сегодня Google благополучно вытирает об него ноги. Только не говорите дизайнерам-снобам, что я так сказал.
Руководство по веб-типографике на ПК
Когда речь заходит о выборе основного размера текста для вашего веб-сайта веб-приложения, в большинстве случаев дизайн представляет собой один из двух следующих видов:
- Текстовые страницы. Статьи, блоги, новостные сводки и т.д. — главная цель использования этих страниц — чтение. Взаимодействие с пользователем здесь практически сводится на нет, разве что придётся пару раз по ссылкам кликнуть — и то не факт.
- Интерактивные страницы. Приложения, которые подразумевают листание, клики, поиск нужного пункта в списке или таблице, редактирование, ввод текста и т.д. На такой странице может быть много текста, но не такого, который можно просто читать, как книгу.
Привести пару примеров? Вот эта страница, на которой вы находитесь, — текстовая. А новостная лента на Facebook — интерактивная. Обе страницы преследуют слегка разные цели, поэтому разберем их по-отдельности. Информация об обеих может быть вам полезной. Страница «О нас» какого-нибудь безумного веб-приложения тоже нагружена текстом. А на странице «Контакты» в каком-нибудь ванильном бложике может быть много взаимодействия.
Текстовые страницы
Короче говоря, на текстовых страницах нужно использовать более крупные размеры шрифта. Если подразумевается, что пользователь должен долго что-то читать, будьте лапочками: не заставляйте людей напрягать зрение. Конечно, шрифты отличаются друг от друга, даже в одном кегле, но вот о чём речь:
- 16px — абсолютный минимум для текстовых страниц
- 18px — лучше начинать с этого размера. Вы же не печатаете текст в ворде с одинарным межстрочником. Вы оформляете текст для людей, которые сидят в метре от своих допотопных мониторов.
- 20px+ — поначалу может показаться прям очень огромным, но попробовать его стоит в любом случае. Сайт medium.com может похвастаться лучшим дизайном текстовых страниц, а размер шрифта по умолчанию там равен 21px.
Существует отличный эмпирический способ, похожий на тот, о котором я уже говорил в разделе про мобильный веб: текст на вашем веб-сайте (при стандартном расстоянии от монитора) должен читаться так же легко, как и в хорошей книжке (при стандартном расстоянии от страниц). Это, на самом деле, довольно бесячее и тупое занятие: вам надо закрыть один глаз и, сщурившись, смотреть на книгу, держа её при это вертикально, что выглядит довольно-таки тупо. Найдите какое-нибудь уединенное местечко и проверьте свой сайт на работоспособность: читается ли мой шрифт даже с расстояния в метр? Даже с учётом моего острого, не испорченного годами зрения? Ну, вы поняли.
Интерактивные страницы
Итак, для интерактивных страниц, подойдут и размеры поменьше. На самом деле, исходя из количества информации, которую единовременно получает пользователь, даже текст в 18px может быть слишком крупным для комфортного чтения. Зайдите на свою почту, в twitter, в любое приложение, где нужно скорее «сканировать» страницу, нежели чем читать; зайдите в приложение, которое предоставляет данные — вряд ли вы найдёте там длинные абзацы текста в 18px. Вместо этого нормой будет 14-16px. Однако одним размером шрифта дело не обойдётся. Скорее всего, для менее значимой информации будут использоваться более мелкие кегли, а для более значимой — кегли побольше (заголовки, подзаголовки и под-подзаголовки и так далее), и всё это будет смешано в одну большую типографическую солянку.
А теперь важная мысль: на любой интерактивной странице размер шрифта в МЕНЬШЕЙ степени зависит от свода правил (я о тебе говорю, скейлинг шрифтов), чем от определённых потребностей каждого участка текста и взаимодействия между ними.
- Шрифт для названий событий — 12px, medium, в начертании, которое полностью отсутствует в гайдлайнах материального дизайна. Но вот когда эти названия нужно уместить в 7 колонок на экране, ширина которого составляет всего лишь 1440px, а многие события состоят всего из одного-двух слов, данный размер шрифта идеален. Совсем чуть-чуть уменьшишь — и уже не прочитать. Совсем чуть-чуть увеличишь — и слишком много названий окажутся обрезаны. Дизайн — это череда компромиссов, ребята. Если вы не знаете, ради чего вы на этот компромисс идёте, возможно, вы идёте на него не там.
- Указатели времени слева («12pm», «1pm» и т.д.) имеют размер 10px. Это ещё один стиль текста, который полностью отсутствует в гайдлайнах. А горизонтальное пространство у нас на вес золота. Возле каждого события в любом случае указано время его начала. Почему бы тогда не сделать время слева поменьше?
- Размер дат — 48px. И вновь ничего подобного в материальном дизайне. В данном случае не знаю, почему не использовать 45px — ведь это официальный размер текста для второго монитора, но если бы разработку дизайна поручили мне, то я бы использовал жирный шрифт размером 48px, и вот здесь жирность создавала бы проблемы. Она привлекла бы слишком много внимания. Поэтому я в любом случае поработал бы ещё над стилем.
Помните об этом, когда будете разрабатывать дизайн интерактивных веб-страниц. К каждому тексту нужен индивидуальный подход. Согласованность — это хорошо, но вряд ли пользователь разозлится, если размер шрифта будет меньше на одно значение px, чем нужно — но он точно разозлится, если не сможет найти то, что ищет.
Читаю со смартфона: как написать текст для мобильной версии сайта
В гонке за внимание пользователей интернета мобильные устройства давно обогнали ПК – к концу 2021 года на них приходилось около 83 % трафика в России. И это неудивительно, телефон всегда рядом, верный «подручный», который помогает легко общаться, быстро находить нужные товары и услуги, адрес магазина и номер для связи.
Этот источник трафика нельзя оставить без внимания. Обязательно нужно проверять, как отображается ваш ресурс для пользователей смартфонов и не выглядит ли «вырвиглазно» текст в мобильной версии сайта.
Предстоит учесть многое – за полным чек-листом по оптимизации мобильного сайта отправляйтесь сюда. А мы подробнее поговорим о текстах – о чем рассказать, как много писать и как оформить.
С чего начинается текст для мобильной версии сайта
Удобство восприятия основано на:
- Читабельности – оформляем текст для мобильной версии сайта так, чтобы пользователю не приходилось ничего рассматривать.
- Информативности – пишем содержательно и заботимся о смысловой части, пусть посетитель сразу увидит, что вы можете ему предложить и почему это выгодно.
Оба эти принципа входят в понятие юзабилити – делаем так, чтобы пользоваться ресурсом было максимально легко и понятно. Что здесь происходит, куда нажимать, как заказать – у посетителя не должно возникать таких вопросов.
Это актуально для всех устройств, не должно возникнуть никаких препятствий для чтения и восприятия, иначе пользователь просто продолжит поиск на других ресурсах.
Чаще всего контент в Сети изучают бегло, поэтому очень важна понятная структура текста, акценты в виде заголовков, списков и СТА.
Что меняется, когда мы заходим на сайт со смартфона
Самое очевидное – просматриваем страницы на меньшем экране, так что длина и размер текста для мобильной версии сайта играет решающую роль, особенно на 1–2 экране.
Поэтому цель – представить информацию еще более «компактно», максимально понятно, поместить все самое важное наверх и учесть мобильную типографику.
У вас всего 72 секунды, чтобы заинтересовать пользователя
Именно столько в среднем длится мобильная сессия, тогда как за ПК – 150 секунд. Экран меньше, времени – тоже. И если придется по 3–4 раза прокручивать вниз, чтобы добраться до выгодного предложения и важной информации, терпения уже не останется. Главное хочется узнать здесь и сейчас без поисков по всей странице.
Нужно ли использовать особые запросы в тексте для мобильной версии сайта? В целом логика подбора ключевых слов остается такой же. Набирать текст на телефоне чуть сложнее, чем на клавиатуре, потому стоит обратить внимание на более короткие запросы и подсказки из мобильного поиска – они могут быть немного другими, чем на ПК.
Руководство по проектированию улучшенной типографики мобильных приложений
Благодаря стремительному развитию Интернета в последнее десятилетие типографика в интерфейсах прошла основные этапы трансформации в цифровой мир. Но дизайн мобильных приложений – это все еще новая сфера.
В этой статье я не буду говорить об общих концепциях типографики, которые можно использовать как в печатной, так и в цифровой среде. Вместо этого я сосредоточусь на нюансах и хитростях, которые можно использовать в типографике дизайна мобильных приложений.
Поскольку разработка приложений очень тесно связана с функциями операционной системы, я часто буду ссылаться на отдельные рекомендации из руководства Material Design для Android и Human Interface Guidelines для iOS.
Минимальный размер шрифта
Не секрет, что мобильные приложения часто используются в дороге. Добавьте к этим ограничения, связанные с размером экрана, солнечными бликами, различными нарушениями зрения у пользователей, не всегда лучшее качество экрана смартфонов, и вы получите первое основное правило, определяющее минимальный размер основного текста.
Apple в своем руководстве Human Interface Guidelines рекомендует установить минимальный размер основного текста 17pt.
Google в руководстве Material Design рекомендует установить минимальный размер основного текста 16sp (равным 16pt в iOS).
Необходимо учитывать, что рекомендации от систем даются относительно шрифтов по умолчанию. В настоящее время это шрифт Roboto для Android и шрифты San Francisco и New York для iOS. Минимальный размер шрифта для других гарнитур может варьироваться в зависимости от их характеристик. Например, для шрифтов с очень тонкими штрихами требуется больший размер основного текста.
Кроме того, стандарты WCAG 2.0 рекомендуют использовать минимальный размер шрифта 18pt и 14pt для полужирного текста.
Исключением могут быть различные подписи меньшего размера. Но имейте в виду, что, если пользователь не может их прочитать, это не должно сильно влиять на понятность интерфейса.
Рекомендации
Не используйте размер шрифта менее 16pt для основного текста в дизайне приложения. Подходящим размером основного текста будет диапазон от 16pt до 18pt.
? Совет
Чтобы сделать типографику iOS-приложения более доступной, вы можете применить динамические размеры шрифта. Использование этой технологии в вашем приложении позволит пользователям, которые в системных настройках установили увеличенный или уменьшенный размер шрифта, видеть интерфейс приложения в соответствии с этими настройками.
Размер заголовка
В последние годы в цифровой типографике стало очень популярным использовать большие заголовки. Они контрастируют на фоне основного текста и становятся якорными элементами на странице.
Но нужно быть очень осторожным при использовании больших заголовков в мобильных приложениях. Часто использование в мобильных приложениях заголовков большого размера приводит к тому, что заголовок растягивается на 3–4 строки с 1 или 2 словами в строке. Такие заголовки выглядят неаккуратно и их трудно читать.
Рекомендации
Выберите размер заголовка, контрастирующий с основным текстом и умещающийся в среднем на 2–3 строки.
? Совет
В некоторых случаях вы можете использовать составные заголовки (eyebrow headline), чтобы сократить название.
Контраст
Также из особенностей использования мобильных приложений очень важными параметрами являются фон и контрастность текста.
Рекомендации
- Следуйте стандартам контрастности WCAG 2.0
- Убедитесь, что текст, который вы размещаете поверх изображений, достаточно контрастный.
- Предоставьте два варианта размещения текста на светлом и темном фоне.
? Совет
Используйте плагин Stark (или другие аналогичные плагины) для Sketch, Adobe XD и Figma или инструменты онлайн-тестирования контрастности, чтобы проверить контраст текста.
Системные шрифты
В настоящее время для iOS можно использовать два системных шрифта: San Francisco и New York. А шрифт Roboto является системным шрифтом для Android.
Системные шрифты сделают дизайн вашего приложения более совместимым с операционной системой. Но использование только системных шрифтов не позволит вашему приложению получить уникальный вид.
Рекомендации
Самый простой и наиболее распространенный способ добавить акценты и сохранить уникальный вид типографики мобильного приложения – использовать системный шрифт для основного текста и различных элементов управления, а для заголовков использовать шрифт, отличный от шрифта по умолчанию. Такое сочетание всегда будет смотреться интересно и свежо.
Вы можете использовать один из сервисов, представленных ниже, чтобы выбрать интересные пары шрифтов.
? Совет
Обратите внимание, что системные шрифты Apple можно использовать только в продуктах экосистемы Apple (iOS, macOS и т. д.). Шрифт Google Roboto можно использовать в любой операционной системе. Помните об этом при разработке одного приложения для обеих платформ.
Коммерческие шрифты
Рано или поздно многие дизайнеры обнаруживают, что системные или бесплатные шрифты не могут удовлетворить их потребности в конкретном проекте. И тогда перед ними стоит задача выбрать коммерческий шрифт. Обычно именно с выбором коммерческого шрифта связаны основные трудности.
Разница в цене между лицензией на использование шрифта в приложении и десктоп-, веб-лицензией станет для вас неприятным сюрпризом (особенно, если вы раньше не покупали подобную лицензию). Например, десктоп-лицензия на один стиль шрифта FF DIN стоит 95 долларов, а для приложения – 950 долларов ? (цена с сайта myfonts.com)
Рекомендации
Если вы решили интегрировать кастомный шрифт в дизайн приложения, вам необходимо учесть следующее:
- Узнайте все нюансы лицензии. Условия распространения шрифтов могут сильно отличаться
- Изучите все технические нюансы шрифта, такие как читабельность при малых размерах.
- Подумайте, как ваш продукт будет масштабироваться в будущем. Например, может оказаться, что выбранный шрифт не поддерживает кириллицу.
- Узнайте, есть ли у шрифта достаточное количество весов или стилей.
? Совет
Ищите шрифты для вашего приложения прямо на сайтах Type Foundries. Так вы сможете сэкономить на лицензии и найти более интересные стили.
Ниже в качестве примера я привожу несколько ссылок на мои любимые ресурсы.
Бесплатные шрифты
В настоящее время появляется все больше и больше хороших бесплатных шрифтов, не уступающих по качеству коммерческим. Если вы избирательно подходите к выбору бесплатного шрифта, вы можете уберечь проект от лишних расходов, не жертвуя качеством или уникальностью дизайна.
Рекомендации
При выборе бесплатного шрифта нужно учитывать те же нюансы, что и при покупке коммерческого. ?
Ниже в качестве примера я привожу несколько ссылок на мои любимые сайты бесплатных шрифтов.
Базовая линия
Часто можно наблюдать типичную ситуацию. Из-за разницы в рендеринге текста в инструментах дизайна и мобильных операционных системах поля между текстовыми блоками и другими элементами интерфейса могут визуально отличаться.
Чтобы этого не произошло, вы можете учитывать все поля относительно базовой линии. Такой подход позволит максимально совместить макеты и реализацию в приложении.
* В настоящее время Android не поддерживает методы полной поддержки интервалов относительно базовых линий.
Рекомендации
Скорее всего, использование базовой линии для всех текстовых элементов вашего интерфейса будет трудным и дорогостоящим в разработке. Поэтому я рекомендую использовать этот подход только для элементов, где особенно важна точность.
Пробелы и поля
Мобильные устройства имеют очень ограниченный размер экрана, поэтому вам нужно разместить как можно больше текста на одном видимом экране.
Для этого не нужно жертвовать пробелами, уменьшая поля между текстовыми блоками. Это нарушит иерархию между различными стилями текста и блоками, и затруднит чтение текста.
Рекомендации
Составьте макет так, чтобы часть содержимого находилась над сгибом, тем самым поощряя скроллинг и показывая пользователю, что доступно больше контента.
«Учите правила как профессионал, чтобы нарушать их, как художник» Пабло Пикассо