Типографика в Material. Часть 2
Гарнитура это набор букв. Несмотря на то, что каждая буква уникальна, все же некоторые формы у всех букв имеют общие черты. В каждой гарнитуре есть определенные паттерны в каждой букве.
Гарнитуры, которые отбираются по стилю, разборчивости и удобочитаемости наиболее эффективны для работы с основными принципами типографиками.
Базовая Линия шрифта — Baseline
Базовая линия шрифта — это невидимая линия, на которую опирается каждая буква. В Material Design базовая линия является важным показателем для измерения вертикального расстояния между текстом и элементом.
4dp сетка
Типографика выравнивается по базовой сетке 4dp.
Измерения от базовой линии
В Material расстояния измеряют от элементов интерфейса до базовой линии шрифта. Значения базовой линии работают в любой программе для дизайна одинаково.
Высота заглавной буквы
Термин Cap height — это высота заглавных букв гарнитуры (например, M или I), которая омеряется от базовой линии. Круглые и заостренные заглавные буквы, такие как S и A, рисуются чуть выше обычных заглавных, чтобы добиться одинакового размера благодаря оптической компенсации. Каждая гарнитура имеет уникальную высоту заглавных букв.
Высот строчной буквы
Термин x-height — это высота строчных букв для x у гарнитуры и указывает насколько высокие или короткие будут глифы в каждой гарнитуре.
Гарнитуры с высокими строчными буквами лучше читаются и у них выше разборчивость при маленьком размере шрифта, так как белое пространство внутри каждой буквы лучше читается.
Верхний и нижний выносные элементы
Верхние (Ascender) выносные элементы — это вертикальный штрих, который бывает у некоторых строчных букв, которые выходят за пределы высоты заглавных букв или базовой линии. Нижние (Descender) выносные элементы — это нисходящий вертикальный штрих в строчных буквах. В некоторых случаях одни выносные элементы могут сталкиваться с другими, если интерлиньяж слишком маленький.
Начертание
Начертание — это толщина штриха у шрифта. Гарнитура может иметь много начертаний. От 4 до 6 — это типичное число начертаний, доступных для многих гарнитур.
Основные начертания в гарнитурах: 1 — Тонкое. 2 — Обычное. 3 — Среднее или полужирное. 4 — Жирное
Классификация
С засечками или антиква
У таких гарнитур есть короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. Гарнитуры с засечками можно классифицировать как:
- Низкий контраст между толстыми и тонкими штрихами
- Соединительные штрихи массивные
- Нижние засечки плавно изогнуты в форме скобки
- Ось изогнутых элементов смещена влево
- Высота строчных относительно мала
- Контраст в штрихах заметно выше
- Средне-высокая x-высота
- Штрихи имеют вертикальный наклон
- Нижние засечки по-прежнему плавно изогнуты в форме скобки
- Контраст между толстыми и тонкими штрихами является резким и драматичным
- Стержни штрихов имеют «шариковую» форму
- Ось изогнутых штрихов — вертикальная
- Нижние засечки почти не изогнуты
Без засечек или гротеск
Гротески или гарнитуры без засечек (sans-serif) от французского слова «sans», что означает «без засечек». Гарнитуры без засечек можно классифицировать как:
- Гротески: Низкий контраст между толстыми и тонкими штрихами
- Гуманистический гротеск: средний контраст между толстыми и тонкими штрихами, более открытый рисунок. Возникли такие гротески в ответ геометрическим. Для наработок таких гарнитур использовались антиквы.
- Геометрический гротеск: низкий контраст между толстыми и тонкими штрихами. Построение на основе окружности, квадрата и равностороннего треугольника.
Моноширные
Моноширинные гарнитуры — это те, где все символы одинаковой ширины.
Рукописные
Рукописные гарнитуры пытаются в естественный и рукописный почерк и настроение. Они обычно используются для заголовков H1 — H6. Они бывают следующих форм:
- Black letter: Форма с высокой контрастностью, узкая, с прямыми линиями и угловатыми изгибами — напоминает готические письмена.
- Script: Форма имитирует рукопись. Копия каллиграфического стиля письма (более формальный стиль)
- Handwriting: Форма может повторять почерк (менее формальный стиль)
Декоративные
Декоративные гарнитурых подходят только для использования в больших размерах и обычно используются для заголовков H1 — H6
Читабельность
Разборчивость определяется символами в шрифте, а читаемость относится к тому, насколько легко читать слова или блоки текста.
Трекниг
Letter-spacing или трекинг — это про равномерную регулировку пространства между буквами в каком-либо фрагменте текста.
Большие размеры шрифта, такие как заголовки, используют более плотный трекинг, чтобы улучшить читаемость и уменьшить пространство между буквами.
Для маленьких размеров шрифта иногда стоит увеличить трекинг, поскольку это может улучшить читабельность за счет большего контраст между каждой формой буквы. Например текст набранный КАПСОМ, даже при небольших размерах шрифта будет читать лучше, если увеличить разрядку (т.е. увеличить трекинг, т.е. letter-spacing).
Моноширные цифры
Используйте моноширные цифры, а не пропорциональные цифры в таблицах или местах, где значения могут часто меняться.
Длина строки
Длина строк основного набора обычно составляет от 40 до 60 символов. Если ты используешь более длинные строчки, например в десктопной версии приложения или на сайте, то надо увеличить высоту строки с 20 до 24 дюймов.
Высота строки или интерлиньяж
Высота строки контролирует пространство между базовыми линиями в блоке текста.
Интервал между параграфи
Придерживайся интервала между абзацами где-то в диапазоне от .75 до 1.25 от размера шрифта.
Выравнивание (или выключка)
Выравнивание отвечает за выравнивание текста в пространстве. Существует три типа выравнивания:
- По левому краю: когда текст выровнен по левому краю
- По правому краю: когда текст выровнен по правому краю
- По центру: когда текст выровнен по центру области, в которой он размещен
Выравнивание или выключка по левому краю
Выключка текста по левому краю является наиболее распространенной настройкой для языков, где люди читают слева направо, таких как английский.
Выравнивание или выключка по правому краю
Выключка по правому краю является наиболее распространенной настройкой для языков, где люди читают справа налево, таких как арабский и иврит.
Языки, в которых люди читают слева направо могут использовать выровненный по правому краю текст, хотя он лучше всего подходит для выделения коротких типографских элементов в макете (например, заметок, примечаний, пометок и т.д.) и не рекомендуется для длинного наборного текста.
Выравнивание или выключка по центру
Выключку по центру используй для короткий текстов в макете. Например, для цитат. Не рекомендуется набирать большой объем текста с выравниванием по центру.
Системные шрифты
Системные шрифты уже предустановлены на вашем компьютере или устройстве. Как правило, они имеют широкую языковую поддержку и не требуют затрат на лицензирование для разработчиков. Использование системного шрифта по умолчанию в вашем приложении поддерживает согласованность платформы с внешним видом вашего приложения.
Использования системных шрифтов
Roboto — это системный шрифт Android по умолчанию. Для других платформ, а также для веб надо использовать системный шрифт, который является предпочтительным шрифтов для своей платформы. Например, проектируя приложение iOS ты должен использовать шрифт Apple — San Francisco.
