Типографика

Типографике в интерфейсах нужно уделять особое внимание. Интерфейсы во многом состоят из текста, и от того как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой.

Шрифт

Основной шрифт в интерфейсах Контура — Segoe UI. Это стандартный шрифт ОС Windows и он уже есть у подавляющего большинства наших пользователей. Поэтому его не нужно загружать и устанавливать при первом входе — страницы грузятся быстрее и нет неприятного мигания текста.

Шрифт Segoe UI разработан компанией Monotype в 2000 году. С 2007 года является системным шрифтом в Windows 7. Также поставляется вместе с пакетом Microsoft Office.

Для того, чтобы на маках шрифт рендерился более тонко и не искажался цвет, нужно прописать специальный параметр, например, у тега BODY (работает только в вебкитовых браузерах и только на Маках):

  • -webkit-font-smoothing: antialiased;

Заголовок

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

Заголовок H1

SegoeUI Light
font-size: 42px
line-height: 50px

Заголовок H2

SegoeUI Semilight
font-size: 32px
line-height: 40px

Заголовок H3

SegoeUI Semibold
font-size: 16px
line-height: 25px

Абзацы

Оптимальное количество символов в строке — 45–75.

Интерлиньяж зависит от длины строк в абзаце — чем длиннее строки, тем больше межстрочное расстояние. Обычно 130–140 %. Но короткая подпись в несколько строк может быть набрана и с интерлиньяжем 100 %.

Выравнивать текст по ширине нельзя. Браузеры делают это из рук вон плохо.

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

Второй абзац. Повторюсь, писания Дюринга представляли собой большую опасность для рабочего движения.

SegoeUI Normal
font-size: 18px
line-height: 25px

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

Второй абзац. Повторюсь, писания Дюринга представляли собой большую опасность для рабочего движения.

SegoeUI Normal
font-size: 16px
line-height: 20px

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

Второй абзац. Повторюсь, писания Дюринга представляли собой большую опасность для рабочего движения.

SegoeUI Normal
font-size: 14px
line-height: 20px

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

Второй абзац. Повторюсь, писания Дюринга представляли собой большую опасность для рабочего движения.

SegoeUI Normal
font-size: 12px
line-height: 15px

Разрядка

Текст ПРОПИСНЫМИ набирается вразрядку. Чем мельче текст, тем бо́льшая разрядка нужна. Большой объем текста набирать прописными нежелательно — читаемость хуже.

Текст строчными никогда не набирается вразрядку. Благодаря выносным элементам у строчных, человек узнает слово по форме. Большая разрядка наоборот превращает слово в набор отдельных букв, что сильно замедляет чтение.

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

Тонкий пробел

Тонкий пробел или 1/8 круглой шпации используется для отделения порядков в числах, наборе инициалов и некоторых других случаях. В HTML тонкий пробел вставляется мнемонимом &thinsp. Чтобы вставить тонкий пробел в макет, включите в настройках Mac OS ввод юникод символов:

System Preferences > Keyboard > Input Sources > Unicode Hex Input

После чего зажмите клавишу Option и наберите «2009». Не забудьте написать отдельный комментарий для верстальщика, иначе тонкий пробел превратится в обычный.

Когда тонкий пробел недоступен, нужно ставить обычный. За исключением знаков % и №, их в таком случае лучше набирать без отступов.

Знак рубля

Используйте знак рубля — ₽. За знаком рубля закреплен юникодовский символ U+20BD и он присутствует в актуальных версиях Segoe UI и Helvetica Neue.

Телефонные номера

Телефонные номера вида (343) 123-45-67 Айфон понимает неправильно. Если открыть на Айфоне страницу с таким телефоном и тапнуть по номеру, то Айфон попытается набрать 343 123-45-67 — не догадается добавить в начало 8 или +7. Решить проблему можно: сверстать так, чтобы Айфон видел +7, а пользователь Айфона — не видел. Если хитрое решение по каким-то причинам невозможно, пишите бесхитростно: +7 343 123-45-67.