Material Design на русском. Часть 19 — Типографика в Material
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
Шкала типографики
Material Design включает в себя ряд заготовленных стилей для типографики, которые могут помочь оформить продукт и контент.
Этот ряд типографики представляет из себя шкалу. Шкала типографки — это комбинация из 13 стилей, поддерживаемых системой. Эти 13 стилей предназначены для переиспользования и каждый стиль имеет своё назначение, применение и смысле.
Генератор типографики
В Material Design есть генератор этой шкалы типографики, который был разработан Google Fonts. Генереатор представляет из себя инструмент для создания шкалы и кода. Любой шрифт, который ты выбираешь, автоматически подстраивается и оптимизируется на основе руководства по типографике Material Design для удобства чтения.
Пример шкалы типографики
В примере ниже использован шрифт Roboto для всех заголовков, подзаголовков, наборного текста и подписей, создавая целостный опыт. Иерархия передается через различия в начертании шрифта (тонкий, средний, обычный), размере, трекинге и регистре букв.
Шкала типографики Material Design (Значения трекинга совместимы с программой Sketch).
Скачать эту шкалу для программы Sketch можно по этой ссылке.
Единицы измерения размера шрифта
Следующие единицы измерения используются для размера шрифта на Android, iOS и в вебе.
Пример конвертации
Веб-браузеры считают всю типографику в REM единицах, которая основана на значении размера шрифта по умолчанию в браузере. По умолчанию для всех браузеров используется значение 16px как основное значение по умолчанию, поэтому конвертация происходит по следующей формуле: Размер в SP / 16 = REM значение.
Единицы измерения трекинга
Следующие единицы измеренеия используется для трекинга в типографике.
Пример трекинга
Применение шкалы типографики
Шкала применяется как для наборного текста в компонентах, так и в общей компоновке. Атрибуты типографики можно скорректировать самостоятельно, меняя гарнитуру, начертание, регистр, размер и трекинг.
1 — Категория из шкалы. 2 — Конкретные значения.
Заголовки
Заголовки в Material Design представлены в виде диапазона от 1 до 6 (прям как в вебе с его h1-h6). Заголовки — это самый большой текст на экране, зарезервированный для короткого, важного текста или цифр.
Для заголовков ты можешь выбрать какой-нибудь выразительный, декоративный, рукописный шрифт. Такие шрифты наполнены деталями и нюансами, которые помогают привлечь внимание пользователя.
Для заголовка второго уровня (H2) использован декоративный шрифт.
Тут для заголовка третьего уровня (H3) дизайнер тоже использовал нестандартный шрифт.
Шрифты с засечками и без засечек однако лучше читаются, особенно при маленьком размере.
Шрифт без засечек использован для заголовка 6-го уровня — H6
Подзаголовки
Подзаголовки меньше заголовков. Они обычно используются для текста со средним акцентом, который также не длинный по ширине. Шрифты с засечками или без засечек хорошо подходят для подзаголовков.
Для стиля Subtitle 1 — использован шрифт без засечек.
Для подзаголовков нужно аккуратно использовать декоративные шрифты!
Осторожно: декоративные шрифты могут плохочитаться в подзаголовках
Наборный текст
Основной текст для набора имеет в Material Design 2 стиля: Body 1 и Body 2. Они используются если в твоем приложении пользователю приходится читать много текста. Также эти стили подойдут и для небольших по объему текстов. Так или иначе тебе следует использовать только гарнитуры с засечками или без засечек.
Для стиля Body 1 использована гарнитура с засечками
Для стиля Body 2 использована гарнитура без засечек.
Не используй декоративные шрифты для основного набора текста.
Неправильно
Подписи (caption) и пояснения (overline)
Подпись и пояснение — это самые маленькие по размеру шрифта стили. Они умеренно используются для аннотирования изображений или перед заголовками.
На примере использована гарнитура с засечками для подписи.
На примере использована гарнитура без засечек для пояснения к заголовку.
Не используй декоративные шрифты для подписей и пояснений.
Неправильно
Кнопка
Текст на кнопке — это призыв к действию. Призыв к действию (CTA — от Call to Action) в целом используется не только на кнопках, но еще и на вкладках, в диалогах и карточках.
В Material текст на кнопках обычно показан заглавными буквами с использованием гарнитуры без засечек.
Для кнопки используется гарнитура без засечек и текст с помощью этой гарнитуры набран заглавными буквами.
Также текст кнопки может быть набран как в обычном регистре, с использованием гарнитуры без засечек или с засечками.
Осторожно: На этом примере пользователь может столкнуться с трудностями, которые связаны с непониманием интерактивен элемент или нет. На это можно нажать или нет?
Не используйте декоративные гарнитуры в качестве текста на кнопоках.
Неправильно: не используй декоративные шрифты для текста на кнопке
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new
