Гайдлайн по iOS на русском. Часть 44 — Визуальный дизайн: Типографика

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Apple дает вам два семейства, которые вы можете использовать в iOS приложениях.

San Francisco (SF)

Сан-Франциско — это семейство гарнитур без засечек, которая включает SF Pro, SF Pro скругленный, SF Mono, SF Compact и SF Compact скругленный. SF Pro — это системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS. Эти шрифты спроектированы в соответствии с интерфейсами платформ; эти системные шрифты разборчивы и нейтральны по характеру.

New York (NY)

Нью-Йорк — это гарнитура с засечками, которая обеспечивает уникальный тон, разработанный в дополнение к шрифтам SF. NY работает хорошо как в контексте графики (при больших размерах), так и в контексте чтения (при размерах наборного текста).

Скачать оба семейства можно здесь.

Начиная с iOS 14, система предусматривает также что гарнитуры San Francisco и New York доступны в формате вариативных шрифтов. Этот формат объединяет различные стили шрифтов в одном файле и поддерживает интерполяцию между стилями для создания промежуточных. С помощью интерполяции шрифты могут адаптироваться ко всем размерам, при этом они выглядят будто специально разработанны для каждого размера.

Интерполяция также позволяет осуществлять оптическую калибровку, что связана с созданием различных типографских макетов для соответствия различным размерам устройств. В iOS 14 и более поздних версиях системные шрифты поддерживают динамические оптические размеры, совмещая дискретные оптические размеры шрифта, такие как “Text” и “Display” для SF Pro и SF Compact, а также “Small”, “Medium”, “Large” и “Extra large” для New York, в единый непрерывный дизайн. Такая конструкция позволяет интерполировать каждый глиф или буквенную форму для получения структуры, точно адаптированной к размеру точки.

📌 От автора: Когда ты проектируешь под iOS у тебя SF семейство подразделяется еще на два подсемейства: “Text” и “Display”. В Apple это называют “Optical Sizes”. Подсемейство Text предназначены для текстов малого размера, тогда как Display — для больших размеров.

📌 Использование вариативных шрифтов, на устройстве работающем на более ранней версии iOS, может привести к неожиданным результатам. В этом случае продолжайте использовать обычные “Text” и “Display” подсемейства.

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

Шрифты, разработанные Apple, поддерживают широкий диапазон начертаний, размеров, стилей и языков, поэтому вы можете создавать удобный опыт чтения во всем приложении. Когда вы используете текстовые стили и системные шрифты, вы также получаете поддержку динамического шрифта и поддержу для больших размеров в специальных возможностях системы, которые позволяют пользователям выбирать подходящий для них размер текста на уровне всей системы. Конкретные значения см. таблицах. Информация о размерах, включая значения трекинга, также доступна в Sketch, Photoshop и Adobe XD, которая лежит Apple Design Resources для iOS.

У системы iOS есть API, которые упрощают использование шрифтов SF и NY.

SF Pro and SF Compact

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

SF Pro Rounded and SF Compact Rounded

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

SF Mono

SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы равны по ширине. Обычно вы используете моноширинный шрифт, когда хотите выровнять столбцы текста, например, в приложениях для программирования. Например, Xcode и Swift Playgrounds по умолчанию используют SF Mono.

New York

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

Выбор шрифтов для улучшения вашего приложения

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

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

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

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

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

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

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

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

Динамические размеры шрифта

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

Размеры шрифта для доступности

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

Значения трекинга

Чтобы помочь вам создать аккуратные макеты, используйте значения трекинга, которые система предлагает для различных размеров SF Pro, SF Pro со скругленными формами, а также для гарнитуры Нью-Йорк.