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

По умолчанию используются два шрифта — Inter для обычного набора и заголовков и Menlo в качестве моноширинного. Inter доступен в Google Fonts, а Menlo предустановлен по умолчанию в некоторых операционных системах. Эти шрифты можно поменять на шрифты в соответствии с вашим брендбуком.

§Параметры шрифтов

§Кегль и интерлиньяж

Кегль отвечает за размер шрифта, а интерлиньяж — за расстояния между базовыми линиями (baselines). Эти параметры определяют, насколько легко будет читать текст, набранный выбранным шрифтом.

§Вес

Вес задается для текстовых стилей (для группы Body и Caption по умолчанию 400) и для акцидентных (Subheader, Header и Display по умолчанию 600). По умолчанию, акцидентные стили имеют больший вес, хотя возможны случаи, когда это будет иначе.

§Группы стилей

§Body

Эти стили используются для всевозможных текстов. По умолчанию — Inter (400).

Body 1 Short имеет уменьшенный интерлиньяж и используется в блоках с малой шириной (до 300–400px).

§Caption

Самые мелкие из возможных шрифтов. Используются как стили для подписей, сносок и любой вторичной информации. По умолчанию — Inter (400).

§Header

Чаще всего используются как заголовки в тех интерфейсах где важна плотность информации. По умолчанию — Inter (600).

§Subheader

Могут использоваться либо как подзаголовки, либо в качестве акцентов в паре с body-стилями соответствующих размеров. По умолчанию — Inter (600).

§Display

Подходят для случаев, в которых акциденция важнее плотности информации, — например, в решении задач коммуникационного дизайна. По умолчанию — Inter (600).

§Code

Используется для вывода кода в отдельных блоках. По умолчанию — Menlo.

§Code Inline

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