Типографика
Принципы применения типографики
#Гарнитуры
Базовая гарнитура основного текста наших интерфейсов — Segoe UI. Начиная с Windows 7, этот шрифт является системным, поэтому доступен большинству пользователей.
Для заголовков мы используем Montserrat.
В заголовоках инфографики используется Merriweather.
В зависимости от задачи, для некоторых проектов базовые гарнитуры могут переопределяться. Главное для нас знать как работает типографика в целом. Понимая смысл начертаний и семантику размерностей, мы получаем удобный и простой в воприятии контент, а выбор конкретной гарнитуры становится одним из инструментов передачи настроения текста. Особое внимание уделяется иерархии контента.
#Заголовки
Уровни заголовков должны хорошо отличаться друг от друга.
Отступы снизу для всех заголовков одинаковые и равны высоте строки базового текста. Размеры отсупов и интерлиньяжа выражаются в относительных величинах. Это позволяет при необходимости оперативно масштабировать всю размерную шкалу.
Для наших проектов обычно достаточно четырёх уровней заголовков. Для обратной совместимости заголовки пятого и шестого уровня уравниваются по размерам к четвёртому.
ТитулТитульный заголовок Используется один раз на страницу |
H1 |
font-title |
bold 40/48 line-height 1.2 |
ПодтитулЗаголовок второго уровня Обычно описание титульного заголовка |
H2 |
font-subtitle |
bold 30/36 line-height 1.2 |
ЗаголовокЗаголовки в тексте |
H3 |
font-heading |
bold 24/28 line-height 1.166 |
ПодзаголовокПодзаголовки в тексте |
H4 |
font-subheading |
bold 20/24 line-height 1.2 |
Лёгкие начертания допустимо использовать только для заголовков. Объясняется это изначальной функцией подобных начертаний — балансом линий с обычным текстом.
|
bold |
regular |
light |
H1 |
H1 |
H1 |
H2 |
H2 |
H2 |
H3 |
H3 |
H3 |
H4 |
H4 |
H4 |
#Абзацы
Наборный текст у нас разделяется на два вида: сервисный и медийный.
Сервисный используется в интерфейсах наших продуктов, где контент носит второстепенный и описательный характер. Обычно это довольно мелкие и плотные текстовые блоки, которые не должны отвлекать пользователя от основного функционала на сайте.
Медийный применяется в случаях, когда акцент сделан на сам контент: в лендингах, блогах, спецпроектах, документациях и других простынях текста.
Привет, я сервисный текст! Используй меня в интерфейсе продукта. Моя цель — описывать крутые штуки на сайте.
Так же используй меня внутри всяких компонентов и интерактивных элементов. Я скромняга, поэтому не буду отвлекать пользователя, а только помогу ему понять в чём тут дело.
font-body-service
regular
16/24
line-height 1.5
Привет, а я медийный текст! Используй меня в лендингах, блогах, где много воздуха и текста.
Я люблю внимание и бережное отношение к своей персоне.
font-body-media
regular
17/26
line-height 1.53
Вводим вспомогательные стили.
Привет, я текст малышка! Используй меня для сносок, атрибутов и прочих второстепенных элементов. На меня практически не обращают внимания, но я стараюсь помогать старшим.
Когда вырасту я хочу стать адвокатом, поэтому самое лучшее мое применение — это блоки текста обязательные по закону, но не сильно важные для интерфейса.
font-body-small
regular
12/18
line-height 1.53
Привет, я капс.
Я неплохо смотрюсь в тегах, лейблах, табах, меню, кнопках. Меня часто обзывают «забором», потому что сложно понять без разрядки. Чем меньше мой размер — тем большая разрядка необходима.
font-body-caps
bold
12/16
line-height 1.33
letter-spacing .05