Material Design на русском. Часть 20 — О типографике в Material

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

Типографика отражает иерархию и присутствие бренда в продукте.

Характеристики шрифта

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

Гарнитуры, которые отбираются по стилю, разборчивости и удобочитаемости наиболее эффективны для работы с основными принципами типографиками.

Перечислены части букв

Базовая Линия шрифта — Baseline

Базовая линия шрифта — это невидимая линия, на которую опирается каждая буква. В Material Design базовая линия является важным показателем для измерения вертикального расстояния между текстом и элементом.

Базовая линия шрифта

4dp сетка

Типографика выравнивается по базовой сетке 4dp.

Независимо от размера pt/sp, базовая линия должна располагаться по 4dp сетке. Высота линии (интерлиньяж) должна делиться на 4, чтобы соблюдалась сетка.

Измерения от базовой линии

В Material расстояния измеряют от элементов интерфейса до базовой линии шрифта. Значения базовой линии работают в любой программе для дизайна одинаково.

Для вертикального выравнивания используется базовая линия шрифта.
Замер отступов от текста до других компонентов.

Высота заглавной буквы

Термин Cap height — это высота заглавных букв гарнитуры (например, M или I), которая омеряется от базовой линии. Круглые и заостренные заглавные буквы, такие как S и A, рисуются чуть выше обычных заглавных, чтобы добиться одинакового размера благодаря оптической компенсации. Каждая гарнитура имеет уникальную высоту заглавных букв.

Тут показана высота заглавной буквы

Высот строчной буквы

Термин x-height — это высота строчных букв для x у гарнитуры и указывает насколько высокие или короткие будут глифы в каждой гарнитуре.

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

Высота строчных букв

Верхний и нижний выносные элементы

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

Пример верхнего и нижнего выносных элементов

Начертание

Начертание — это толщина штриха у шрифта. Гарнитура может иметь много начертаний. От 4 до 6 — это типичное число начертаний, доступных для многих гарнитур.

Основные начертания в гарнитурах: 1 — Тонкое. 2 — Обычное. 3 — Среднее или полужирное. 4 — Жирное.

Классификация

С засечками или антиква

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

Антиква старого стиля:

  • Низкий контраст между толстыми и тонкими штрихами
  • Соединительные штрихи массивные
  • Нижние засечки плавно изогнуты в форме скобки
  • Ось изогнутых элементов смещена влево
  • Высота строчных относительно мала

Переходная антивква:

  • Контраст в штрихах заметно выше
  • Средне-высокая x-высота
  • Штрихи имеют вертикальный наклон
  • Нижние засечки по-прежнему плавно изогнуты в форме скобки

Антиква нового стиля:

  • Контраст между толстыми и тонкими штрихами является резким и драматичным
  • Стержни штрихов имеют «шариковую» форму
  • Ось изогнутых штрихов — вертикальная
  • Нижние засечки почти не изогнуты

Брусковые:

  • Ось изогнутых элементов — вертикальная
  • Нижние засечки очень тяжелые, без изогнутых линий
1 — EB Garamond — старый стиль антиквы. Libre Baskerville —переходный стиль антиквы. 3 — Libre Bodoni — новый стиль. 4 — Bitter — брусковый.

Без засечек или гротеск

Гротески или гарнитуры без засечек (sans-serif) от французского слова «sans», что означает «без засечек». Гарнитуры без засечек можно классифицировать как:

  • Гротески: Низкий контраст между толстыми и тонкими штрихами
  • Гуманистический гротеск: средний контраст между толстыми и тонкими штрихами, более открытый рисунок. Возникли такие гротески в ответ геометрическим. Для наработок таких гарнитур использовались антиквы.
  • Геометрический гротеск: низкий контраст между толстыми и тонкими штрихами. Построение на основе окружности, квадрата и равностороннего треугольника.
Примеры гротесков: 1 — Work Sans — гротеск. 2 — Alegreya Sans — гуманистический. 3 — Quicksand — геометрический.

Моноширные

Моноширинные гарнитуры — это те, где все символы одинаковой ширины.

Примеры моноширных гарнитур: 1 — Roboto Mono. 2 — Space Mono. 3 — VT323

Рукописные

Рукописные гарнитуры пытаются в естественный и рукописный почерк и настроение. Они обычно используются для заголовков H1 — H6. Они бывают следующих форм:

  • Black letter: Форма с высокой контрастностью, узкая, с прямыми линиями и угловатыми изгибами — напоминает готические письмена.
  • Script: Форма имитирует рукопись. Копия каллиграфического стиля письма (более формальный стиль)
  • Handwriting: Форма может повторять почерк (менее формальный стиль)
Примеры рукописных гарнитур: 1 — UnifrakturMaguntia — высокий контраст. 2 — Dancing Script — имитация рукописи. 3 — Indie Flower — рукописный почерк.

Декоративные

Декоративные гарнитурых подходят только для использования в больших размерах и обычно используются для заголовков H1 — H6

Примеры декоративных гарнитур: 1 — Shrikhand. 2 — Chewy. 3 — Faster One

Читабельность

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

Трекниг

Letter-spacing или трекинг — это про равномерную регулировку пространства между буквами в каком-либо фрагменте текста.

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

Плотный трекинг

Для маленьких размеров шрифта иногда стоит увеличить трекинг, поскольку это может улучшить читабельность за счет большего контраст между каждой формой буквы. Например текст набранный КАПСОМ, даже при небольших размерах шрифта будет читать лучше, если увеличить разрядку (т.е. увеличить трекинг, т.е. letter-spacing).

Большая разрядка

Моноширные цифры

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

Моноширные цифры поддерживают оптическое выравнивание для лучшего сканирования.

Длина строки

Длина строк основного набора обычно составляет от 40 до 60 символов. Если ты используешь более длинные строчки, например в десктопной версии приложения или на сайте, то надо увеличить высоту строки с 20 до 24 дюймов.

Идеальная длина строки 40–60 символов для основного набора на английском языке.
Идеальная длина для коротких строк английского текста составляет 20–40 символов.

Высота строки или интерлиньяж

Высота строки контролирует пространство между базовыми линиями в блоке текста.

1 — Размер шрифта 14, высота строки 20. 2 — Размер шрифта 20, высота строки 28

Интервал между параграфи

Придерживайся интервала между абзацами где-то в диапазоне от .75 до 1.25 от размера шрифта.

Размер шрифта 20dp, высота строки 30dp, отступ между параграфами 28dp

Выравнивание (или выключка)

Выравнивание отвечает за выравнивание текста в пространстве. Существует три типа выравнивания:

  1. По левому краю: когда текст выровнен по левому краю
  2. По правому краю: когда текст выровнен по правому краю
  3. По центру: когда текст выровнен по центру области, в которой он размещен

Выравнивание или выключка по левому краю

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

Выключка по левому краю для наборного текста.

Выравнивание или выключка по правому краю

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

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

Пометка с выключкой по правому краю.

Выравнивание или выключка по центру

Выключку по центру используй для короткий текстов в макете. Например, для цитат. Не рекомендуется набирать большой объем текста с выравниванием по центру.

Цитата с выключкой по центру.

Системные шрифты

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

Использования системных шрифтов

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

Системный шрифт для Android: Roboto
Системный шрифт iOS: San Francisco

Как следить за обновлениями гайдлайна и переводом?

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruslan Sharipov

Ruslan Sharipov

UX/UI дизайнер в Siemens

More from Medium

NISM Project

“Briciole” of UX — Why the real world

QuickPass — App Concept x UI/UX Design

How to Test Your Design’s Learnability