docdoc design

Типографика

Что есть текст? Шрифты, интерлиньяж, базовая линия и всё то, что связывает буквы вместе. Чистая типографика не слипается, не мнётся и не расползается — она прекрасна.
Встречайте OpenSans
Наш основной и единственный шрифт. Почему он?
• Полностью бесплатен;
• Разработан по запросу Google у прекрасного шрифтовика Стива Мэттисона;
• Богат на начертания, 10 шт;
• Хорошо читается как на мониторе, так и на печатных материалах.
Идеальная пара — 16/24
Базовый размер шрифта — 16px c межстрочным интервалом в 24px. Это сочетание чуть крпуновато в отношении стандартного размера для монитора в 13−14px. Но в тоже время его «крупность» дает комфортное считывание информации и делает его хорошей базовой точкой в типографике.

Для получения других размеров, мы используем множитель (sale factor) равным 1,333 (3:4 Perfect fourth). Этот множитель был выбран по причине небольшого разброса в размерах. Понимаю, что это абзац сложный, но пока я не придумал как сделать его легче :)

В итоге у нас получился набор стилей (кегль/интерлиньяж, начертание):
• Кегль — размер шрифта;
• Интерлиньяж — межстрочный интервал;
• Начертание — графический рисунок шрифта.
Title1 — 38/48, light
Title2 — 28/36, light
Title3 — 21/24, regular
Headline — 16/24, semibold
Body — 16/24, regular
Subhead — 14/20, regular
Caption — 12/16, regular
Вертикальный ритм
Это как ритм в музыке. Хорошие песни звучат плавно, плохие режут слух. Помните недваний хит «Грибы — Тает лед», именно из-за своей ритмичности он попал на вершины хит-парадов (не проверенный факт).

С текстом аналогично. Если у текста есть вертикальный ритм, то он читается легко и выглядит гармонично на странице.
Мы используем 8px сетку для вертикального ритма. Она помогает держать шрифты в тонусе. Чтобы шрифты хорошо ложились на 8px сетку, их интерлиньяж (межстрочный интервал) должен быть кратен 8px.
Ломайте правила
Плохо безмолвно следовать этим примерам. Например, они хорошо работают когда длина строки большая. В коротких подписях они буду выглядь «разорвано» и тогда нужно вручную уменьшать межстрочный интервал.
Полезные ссылки