Типографика в Material. Часть 1
Шкала типографики
Material Design включает в себя ряд заготовленных стилей для типографики, которые могут помочь оформить продукт и контент.
Этот ряд типографики представляет из себя шкалу. Шкала типографки — это комбинация из 13 стилей, поддерживаемых системой. Эти 13 стилей предназначены для переиспользования и каждый стиль имеет своё назначение, применение и смысле.
Генератор типографики
В Material Design есть генератор этой шкалы типографики, который был разработан Google Fonts. Генереатор представляет из себя инструмент для создания шкалы и кода. Любой шрифт, который ты выбираешь, автоматически подстраивается и оптимизируется на основе руководства по типографике Material Design для удобства чтения.
Пример шкалы типографики
В примере ниже использован шрифт Roboto для всех заголовков, подзаголовков, наборного текста и подписей, создавая целостный опыт. Иерархия передается через различия в начертании шрифта (тонкий, средний, обычный), размере, трекинге и регистре букв.
Скачать эту шкалу для программы Sketch можно по этой ссылке.
Единицы измерения размера шрифта
Следующие единицы измерения используются для размера шрифта на Android, iOS и в вебе.
Пример конвертации
Единицы измерения трекинга
Следующие единицы измеренеия используется для трекинга в типографике.
Пример трекинга
Применение шкалы типографики
Шкала применяется как для наборного текста в компонентах, так и в общей компоновке. Атрибуты типографики можно скорректировать самостоятельно, меняя гарнитуру, начертание, регистр, размер и трекинг.
Заголовки
Заголовки в Material Design представлены в виде диапазона от 1 до 6 (прям как в вебе с его h1-h6). Заголовки — это самый большой текст на экране, зарезервированный для короткого, важного текста или цифр.
Для заголовков ты можешь выбрать какой-нибудь выразительный, декоративный, рукописный шрифт. Такие шрифты наполнены деталями и нюансами, которые помогают привлечь внимание пользователя.
Шрифты с засечками и без засечек однако лучше читаются, особенно при маленьком размере.
Подзаголовки
Подзаголовки меньше заголовков. Они обычно используются для текста со средним акцентом, который также не длинный по ширине. Шрифты с засечками или без засечек хорошо подходят для подзаголовков.
Для подзаголовков нужно аккуратно использовать декоративные шрифты!
Наборный текст
Основной текст для набора имеет в Material Design 2 стиля: Body 1 и Body 2. Они используются если в твоем приложении пользователю приходится читать много текста. Также эти стили подойдут и для небольших по объему текстов. Так или иначе тебе следует использовать только гарнитуры с засечками или без засечек.
Не используй декоративные шрифты для основного набора текста.
Подписи (caption) и пояснения (overline)
Подпись и пояснение — это самые маленькие по размеру шрифта стили. Они умеренно используются для аннотирования изображений или перед заголовками.
Не используй декоративные шрифты для подписей и пояснений.
Кнопка
Текст на кнопке — это призыв к действию. Призыв к действию (CTA — от Call to Action) в целом используется не только на кнопках, но еще и на вкладках, в диалогах и карточках.
В Material текст на кнопках обычно показан заглавными буквами с использованием гарнитуры без засечек.
Также текст кнопки может быть набран как в обычном регистре, с использованием гарнитуры без засечек или с засечками.
Не используйте декоративные гарнитуры в качестве текста на кнопоках.
